Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add borders to (ok)lab L over 100% tests #45092

Merged
merged 2 commits into from Mar 16, 2024
Merged

Add borders to (ok)lab L over 100% tests #45092

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e30876
Add borders to (ok)lab L over 100% tests
foolip Mar 13, 2024
7554057
Update oklab-l-over-1-ref.html
foolip Mar 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 8 additions & 5 deletions css/css-color/lab-l-over-100-1.html
View file
Open in desktop
Expand Up @@ -5,13 +5,16 @@
<link rel="match" href="lab-l-over-100-ref.html">
<meta name="assert" content="lab() with lightness greater than 100">
<style>
.ref { background-color: lab(100 150 20); width: 100px; height: 100px}
.square { border: 1px solid black; width: 200px; height: 200px}
.ref { background-color: lab(100 150 20); height: 100px}
/* l = 150 should clamp back to 100 */
.test { background-color: lab(150 150 20); width: 100px; height: 100px}
.test { background-color: lab(150 150 20); height: 100px}
</style>

<body>
<p>Test passes if you see a single color.</p>
<div class="ref"></div>
<div class="test"></div>
<p>Test passes if you see a square border with a single color inside.</p>
<div class="square">
<div class="ref"></div>
<div class="test"></div>
</div>
</body>
13 changes: 8 additions & 5 deletions css/css-color/lab-l-over-100-2.html
View file
Open in desktop
Expand Up @@ -5,13 +5,16 @@
<link rel="match" href="lab-l-over-100-ref.html">
<meta name="assert" content="lab() with lightness greater than 100%">
<style>
.ref { background-color: lab(100% 150 20); width: 100px; height: 100px}
.square { border: 1px solid black; width: 200px; height: 200px}
.ref { background-color: lab(100% 150 20); height: 100px}
/* l = 150 should clamp back to 100 */
.test { background-color: lab(150% 150 20); width: 100px; height: 100px}
.test { background-color: lab(150% 150 20); height: 100px}
</style>

<body>
<p>Test passes if you see a single color.</p>
<div class="ref"></div>
<div class="test"></div>
<p>Test passes if you see a square border with a single color inside.</p>
<div class="square">
<div class="ref"></div>
<div class="test"></div>
</div>
</body>
4 changes: 2 additions & 2 deletions css/css-color/lab-l-over-100-ref.html
View file
Open in desktop
Expand Up @@ -2,10 +2,10 @@
<meta charset="utf-8">
<title>CSS Color 4: Verify lightness in Lab is always clamped to a value between 0 to 100</title>
<style>
.ref { background-color: lab(100 150 20); width: 100px; height: 200px}
.ref { background-color: lab(100 150 20); border: 1px solid black; width: 200px; height: 200px}
</style>

<body>
<p>Test passes if you see a single color.</p>
<p>Test passes if you see a square border with a single color inside.</p>
<div class="ref"></div>
</body>
13 changes: 8 additions & 5 deletions css/css-color/lch-l-over-100-1.html
View file
Open in desktop
Expand Up @@ -5,13 +5,16 @@
<link rel="match" href="lch-l-over-100-ref.html">
<meta name="assert" content="lch() with lightness greater than 100">
<style>
.ref { background-color: lch(100 150 20); width: 100px; height: 100px}
.square { border: 1px solid black; width: 200px; height: 200px}
.ref { background-color: lch(100 150 20); height: 100px}
/* l = 150 should clamp back to 100 */
.test { background-color: lch(150 150 20); width: 100px; height: 100px}
.test { background-color: lch(150 150 20); height: 100px}
</style>

<body>
<p>Test passes if you see a single color.</p>
<div class="ref"></div>
<div class="test"></div>
<p>Test passes if you see a square border with a single color inside.</p>
<div class="square">
<div class="ref"></div>
<div class="test"></div>
</div>
</body>
13 changes: 8 additions & 5 deletions css/css-color/lch-l-over-100-2.html
View file
Open in desktop
Expand Up @@ -5,13 +5,16 @@
<link rel="match" href="lch-l-over-100-ref.html">
<meta name="assert" content="lch() with lightness graeter than 100%">
<style>
.ref { background-color: lch(100% 150 20); width: 100px; height: 100px}
.square { border: 1px solid black; width: 200px; height: 200px}
.ref { background-color: lch(100% 150 20); height: 100px}
/* l = 150% should clamp back to 100% */
.test { background-color: lch(150% 150 20); width: 100px; height: 100px}
.test { background-color: lch(150% 150 20); height: 100px}
</style>

<body>
<p>Test passes if you see a single color.</p>
<div class="ref"></div>
<div class="test"></div>
<p>Test passes if you see a square border with a single color inside.</p>
<div class="square">
<div class="ref"></div>
<div class="test"></div>
</div>
</body>
5 changes: 2 additions & 3 deletions css/css-color/lch-l-over-100-ref.html
View file
Open in desktop
Expand Up @@ -2,11 +2,10 @@
<meta charset="utf-8">
<title>CSS Color 4: Specifying LCH with lightness over 100</title>
<style>
.ref { background-color: lch(100 150 20); width: 100px; height: 200px}
.ref { background-color: lch(100 150 20); border: 1px solid black; width: 200px; height: 200px}
</style>

<body>
<p>Test passes if you see a single color.</p>
<p>Test passes if you see a square border with a single color inside.</p>
<div class="ref"></div>
<div class="test"></div>
</body>
13 changes: 8 additions & 5 deletions css/css-color/oklab-l-over-1-1.html
View file
Open in desktop
Expand Up @@ -5,13 +5,16 @@
<link rel="match" href="oklab-l-over-1-ref.html">
<meta name="assert" content="oklab() with lightness greater than 1">
<style>
.ref { background-color: oklab(1 0.5 0.2); width: 100px; height: 100px}
.square { border: 1px solid black; width: 200px; height: 200px}
.ref { background-color: oklab(1 0.5 0.2); height: 100px}
/* l = 1.5 should clamp back to 1 */
.test { background-color: oklab(1.5 0.5 0.2); width: 100px; height: 100px}
.test { background-color: oklab(1.5 0.5 0.2); height: 100px}
</style>

<body>
<p>Test passes if you see a single color.</p>
<div class="ref"></div>
<div class="test"></div>
<p>Test passes if you see a square border with a single color inside.</p>
<div class="square">
<div class="ref"></div>
<div class="test"></div>
</div>
</body>
13 changes: 8 additions & 5 deletions css/css-color/oklab-l-over-1-2.html
View file
Open in desktop
Expand Up @@ -5,13 +5,16 @@
<link rel="match" href="oklab-l-over-1-ref.html">
<meta name="assert" content="oklab() with lightness greater than 100%">
<style>
.ref { background-color: oklab(100% 0.5 0.2); width: 100px; height: 100px}
.square { border: 1px solid black; width: 200px; height: 200px}
.ref { background-color: oklab(100% 0.5 0.2); height: 100px}
/* l = 150 should clamp back to 100 */
.test { background-color: oklab(150% 0.5 0.2); width: 100px; height: 100px}
.test { background-color: oklab(150% 0.5 0.2); height: 100px}
</style>

<body>
<p>Test passes if you see a single color.</p>
<div class="ref"></div>
<div class="test"></div>
<p>Test passes if you see a square border with a single color inside.</p>
<div class="square">
<div class="ref"></div>
<div class="test"></div>
</div>
</body>
4 changes: 2 additions & 2 deletions css/css-color/oklab-l-over-1-ref.html
View file
Open in desktop
Expand Up @@ -2,10 +2,10 @@
<meta charset="utf-8">
<title>CSS Color 4: Verify lightness in Lab is always clamped to a value between 0 to 100</title>
<style>
.ref { background-color: oklab(1 0.5 0.2); width: 100px; height: 200px}
.ref { background-color: oklab(1 0.5 0.2); border: 1px solid black; width: 200px; height: 200px}
</style>

<body>
<p>Test passes if you see a single color.</p>
<p>Test passes if you see a square border with a single color inside.</p>
<div class="ref"></div>
</body>
13 changes: 8 additions & 5 deletions css/css-color/oklch-l-over-1-1.html
View file
Open in desktop
Expand Up @@ -5,13 +5,16 @@
<link rel="match" href="oklch-l-over-1-ref.html">
<meta name="assert" content="oklch() with lightness greater than 1">
<style>
.ref { background-color: oklch(1 0.5 50); width: 100px; height: 100px}
.square { border: 1px solid black; width: 200px; height: 200px}
.ref { background-color: oklch(1 0.5 50); height: 100px}
/* l = 1.5 should clamp back to 1 */
.test { background-color: oklch(1.5 0.5 50); width: 100px; height: 100px}
.test { background-color: oklch(1.5 0.5 50); height: 100px}
</style>

<body>
<p>Test passes if you see a single color.</p>
<div class="ref"></div>
<div class="test"></div>
<p>Test passes if you see a square border with a single color inside.</p>
<div class="square">
<div class="ref"></div>
<div class="test"></div>
</div>
</body>
13 changes: 8 additions & 5 deletions css/css-color/oklch-l-over-1-2.html
View file
Open in desktop
Expand Up @@ -5,13 +5,16 @@
<link rel="match" href="oklch-l-over-1-ref.html">
<meta name="assert" content="oklch() with lightness greater than 100%">
<style>
.ref { background-color: oklch(100% 0.5 50); width: 100px; height: 100px}
.square { border: 1px solid black; width: 200px; height: 200px}
.ref { background-color: oklch(100% 0.5 50); height: 100px}
/* l = 150% should clamp back to 100% */
.test { background-color: oklch(150% 0.5 50); width: 100px; height: 100px}
.test { background-color: oklch(150% 0.5 50); height: 100px}
</style>

<body>
<p>Test passes if you see a single color.</p>
<div class="ref"></div>
<div class="test"></div>
<p>Test passes if you see a square border with a single color inside.</p>
<div class="square">
<div class="ref"></div>
<div class="test"></div>
</div>
</body>
4 changes: 2 additions & 2 deletions css/css-color/oklch-l-over-1-ref.html
View file
Open in desktop
Expand Up @@ -2,10 +2,10 @@
<meta charset="utf-8">
<title>CSS Color 4: Verify lightness in Oklch is always clamped to a value between 0 to 1</title>
<style>
.ref { background-color: oklch(1 0.5 50); width: 100px; height: 200px}
.ref { background-color: oklch(1 0.5 50); border: 1px solid black; width: 200px; height: 200px}
</style>

<body>
<p>Test passes if you see a single color.</p>
<p>Test passes if you see a square border with a single color inside.</p>
<div class="ref"></div>
</body>