LibWeb: Add tests for the CSS4 color functions
This commit is contained in:
Quentin Ligier
Sam Atkins
parent
fac3ea77d8
commit
e099a452b1
Notes:
github-actions[bot]
2024-11-04 10:49:15 +00:00
Author: https://github.com/qligier Commit: https://github.com/LadybirdBrowser/ladybird/commit/e099a452b1d Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1915 Reviewed-by: https://github.com/AtkinsSJ ✅
10 changed files with 255 additions and 0 deletions
46
Tests/LibWeb/Ref/color-hsl.html
Normal file
46
Tests/LibWeb/Ref/color-hsl.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="reference/color-hsl-ref.html" />
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
}
|
||||
#d1 { background-color: hsla(120.0, 75%, 50%, 20%); }
|
||||
#d2 { background-color: hsla(120, 75%, 50%, 0.6); }
|
||||
#d3 { background-color: hsla(120 75% 50% / 60%); }
|
||||
#d4 { background-color: hsla(120.0 75% 50% / 1.0); }
|
||||
#d5 { background-color: hsla(120.0, 75%, 50%); }
|
||||
#d6 { background-color: hsla(120 75% 50%); }
|
||||
#d7 { background-color: hsl(120, 75%, 50%, 0.2); }
|
||||
#d8 { background-color: hsl(120, 75%, 50%, 60%); }
|
||||
#d9 { background-color: hsl(120 75% 50% / 0.6); }
|
||||
#d10 { background-color: hsl(120 75% 50% / 60%); }
|
||||
#d11 { background-color: hsl(600deg, 75%, 50%); }
|
||||
#d12 { background-color: hsl(2.6666666666turn, 75%, 50%); }
|
||||
#d13 { background-color: hsl(1.2e2, 75%, 50%, 0.6); }
|
||||
#d14 { background-color: hsla(540, 100%, 50%, 0.6); }
|
||||
#d15 { background-color: hsl(none none none / none); }
|
||||
#d16 { background-color: hsl(none 100% 50%); }
|
||||
#d17 { background-color: hsl(120 none 50%); }
|
||||
#d18 { background-color: hsl(120 80% none); }
|
||||
#d19 { background-color: hsl(120 100% 50% / none); }
|
||||
</style>
|
||||
<div id="d1">1</div>
|
||||
<div id="d2">2</div>
|
||||
<div id="d3">3</div>
|
||||
<div id="d4">4</div>
|
||||
<div id="d5">5</div>
|
||||
<div id="d6">6</div>
|
||||
<div id="d7">7</div>
|
||||
<div id="d8">8</div>
|
||||
<div id="d9">9</div>
|
||||
<div id="d10">10</div>
|
||||
<div id="d11">11</div>
|
||||
<div id="d12">12</div>
|
||||
<div id="d13">13</div>
|
||||
<div id="d14">14</div>
|
||||
<div id="d15">15</div>
|
||||
<div id="d16">16</div>
|
||||
<div id="d17">17</div>
|
||||
<div id="d18">18</div>
|
||||
<div id="d19">19</div>
|
||||
24
Tests/LibWeb/Ref/color-hwb.html
Normal file
24
Tests/LibWeb/Ref/color-hwb.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="reference/color-hwb-ref.html" />
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
}
|
||||
#d1 { background-color: hwb(100 40% 60%); }
|
||||
#d2 { background-color: hwb(120 50% 0% / 0.5); }
|
||||
#d3 { background-color: hwb(120 50% 0% / 0.5); }
|
||||
#d4 { background-color: hwb(none none none / none); }
|
||||
#d5 { background-color: hwb(none 50% 0% / 50%); }
|
||||
#d6 { background-color: hwb(120 none 0% / 60%); }
|
||||
#d7 { background-color: hwb(120 50% none / 50%); }
|
||||
#d8 { background-color: hwb(120 50% 0% / none); }
|
||||
</style>
|
||||
<div id="d1">1</div>
|
||||
<div id="d2">2</div>
|
||||
<div id="d3">3</div>
|
||||
<div id="d4">4</div>
|
||||
<div id="d5">5</div>
|
||||
<div id="d6">6</div>
|
||||
<div id="d7">7</div>
|
||||
<div id="d8">8</div>
|
||||
22
Tests/LibWeb/Ref/color-oklab.html
Normal file
22
Tests/LibWeb/Ref/color-oklab.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="reference/color-oklab-ref.html" />
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
}
|
||||
#d1 { background-color: oklab(51.975% -0.1403 0.10768); }
|
||||
#d2 { background-color: oklab(50% 0.05 0); }
|
||||
#d3 { background-color: oklab(51.975% -35.075% 26.92%); }
|
||||
#d4 { background-color: oklab(none none none / none); }
|
||||
#d5 { background-color: oklab(none 0 10 / 60%); }
|
||||
#d6 { background-color: oklab(120 0 none / 50%); }
|
||||
#d7 { background-color: oklab(120 0 10 / none); }
|
||||
</style>
|
||||
<div id="d1">1</div>
|
||||
<div id="d2">2</div>
|
||||
<div id="d3">3</div>
|
||||
<div id="d4">4</div>
|
||||
<div id="d5">5</div>
|
||||
<div id="d6">6</div>
|
||||
<div id="d7">7</div>
|
||||
22
Tests/LibWeb/Ref/color-oklch.html
Normal file
22
Tests/LibWeb/Ref/color-oklch.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="reference/color-oklch-ref.html" />
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
}
|
||||
#d1 { background-color: oklch(51.975% 0.17686 142.495); }
|
||||
#d2 { background-color: oklch(50% 0.2 270); }
|
||||
#d3 { background-color: oklch(51.975% 44.215% 142.495); }
|
||||
#d4 { background-color: oklch(none none none / none); }
|
||||
#d5 { background-color: oklch(none 0 10 / 60%); }
|
||||
#d6 { background-color: oklch(120 0 none / 50%); }
|
||||
#d7 { background-color: oklch(120 0 10 / none); }
|
||||
</style>
|
||||
<div id="d1">1</div>
|
||||
<div id="d2">2</div>
|
||||
<div id="d3">3</div>
|
||||
<div id="d4">4</div>
|
||||
<div id="d5">5</div>
|
||||
<div id="d6">6</div>
|
||||
<div id="d7">7</div>
|
||||
16
Tests/LibWeb/Ref/color-rgb.html
Normal file
16
Tests/LibWeb/Ref/color-rgb.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="reference/color-rgb-ref.html" />
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
}
|
||||
#d1 { background-color: rgba(257 30 40); }
|
||||
#d2 { background-color: rgb(none none none / none); }
|
||||
#d3 { background-color: rgb(none 100% 60%); }
|
||||
#d4 { background-color: rgb(120 100% 50% / none); }
|
||||
</style>
|
||||
<div id="d1">1</div>
|
||||
<div id="d2">2</div>
|
||||
<div id="d3">3</div>
|
||||
<div id="d4">4</div>
|
||||
45
Tests/LibWeb/Ref/reference/color-hsl-ref.html
Normal file
45
Tests/LibWeb/Ref/reference/color-hsl-ref.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
}
|
||||
#d1 { background-color: #d2f9d2; }
|
||||
#d2 { background-color: #79ec79; }
|
||||
#d3 { background-color: #79ec79; }
|
||||
#d4 { background-color: #20df20; }
|
||||
#d5 { background-color: #20df20; }
|
||||
#d6 { background-color: #20df20; }
|
||||
#d7 { background-color: #d2f9d2; }
|
||||
#d8 { background-color: #79ec79; }
|
||||
#d9 { background-color: #79ec79; }
|
||||
#d10 { background-color: #79ec79; }
|
||||
#d11 { background-color: #2020df; }
|
||||
#d12 { background-color: #2020df; }
|
||||
#d13 { background-color: #79ec79; }
|
||||
#d14 { background-color: #66ffff; }
|
||||
#d15 { background-color: #ffffff; }
|
||||
#d16 { background-color: #ff0000; }
|
||||
#d17 { background-color: #808080; }
|
||||
#d18 { background-color: #000000; }
|
||||
#d19 { background-color: #ffffff; }
|
||||
</style>
|
||||
<div id="d1">1</div>
|
||||
<div id="d2">2</div>
|
||||
<div id="d3">3</div>
|
||||
<div id="d4">4</div>
|
||||
<div id="d5">5</div>
|
||||
<div id="d6">6</div>
|
||||
<div id="d7">7</div>
|
||||
<div id="d8">8</div>
|
||||
<div id="d9">9</div>
|
||||
<div id="d10">10</div>
|
||||
<div id="d11">11</div>
|
||||
<div id="d12">12</div>
|
||||
<div id="d13">13</div>
|
||||
<div id="d14">14</div>
|
||||
<div id="d15">15</div>
|
||||
<div id="d16">16</div>
|
||||
<div id="d17">17</div>
|
||||
<div id="d18">18</div>
|
||||
<div id="d19">19</div>
|
||||
23
Tests/LibWeb/Ref/reference/color-hwb-ref.html
Normal file
23
Tests/LibWeb/Ref/reference/color-hwb-ref.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
}
|
||||
#d1 { background-color: #666666; }
|
||||
#d2 { background-color: #bfffbf; }
|
||||
#d3 { background-color: #bfffbf; }
|
||||
#d4 { background-color: #ffffff; }
|
||||
#d5 { background-color: #ffbfbf; }
|
||||
#d6 { background-color: #66ff66; }
|
||||
#d7 { background-color: #bfffbf; }
|
||||
#d8 { background-color: #ffffff; }
|
||||
</style>
|
||||
<div id="d1">1</div>
|
||||
<div id="d2">2</div>
|
||||
<div id="d3">3</div>
|
||||
<div id="d4">4</div>
|
||||
<div id="d5">5</div>
|
||||
<div id="d6">6</div>
|
||||
<div id="d7">7</div>
|
||||
<div id="d8">8</div>
|
||||
21
Tests/LibWeb/Ref/reference/color-oklab-ref.html
Normal file
21
Tests/LibWeb/Ref/reference/color-oklab-ref.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
}
|
||||
#d1 { background-color: #008000; }
|
||||
#d2 { background-color: #7c5762; }
|
||||
#d3 { background-color: #008000; }
|
||||
#d4 { background-color: #ffffff; }
|
||||
#d5 { background-color: #66ff66; }
|
||||
#d6 { background-color: #ffffff; }
|
||||
#d7 { background-color: #ffffff; }
|
||||
</style>
|
||||
<div id="d1">1</div>
|
||||
<div id="d2">2</div>
|
||||
<div id="d3">3</div>
|
||||
<div id="d4">4</div>
|
||||
<div id="d5">5</div>
|
||||
<div id="d6">6</div>
|
||||
<div id="d7">7</div>
|
||||
21
Tests/LibWeb/Ref/reference/color-oklch-ref.html
Normal file
21
Tests/LibWeb/Ref/reference/color-oklch-ref.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
}
|
||||
#d1 { background-color: #008000; }
|
||||
#d2 { background-color: #3b51d3; }
|
||||
#d3 { background-color: #008000; }
|
||||
#d4 { background-color: #ffffff; }
|
||||
#d5 { background-color: #666666; }
|
||||
#d6 { background-color: #ffffff; }
|
||||
#d7 { background-color: #ffffff; }
|
||||
</style>
|
||||
<div id="d1">1</div>
|
||||
<div id="d2">2</div>
|
||||
<div id="d3">3</div>
|
||||
<div id="d4">4</div>
|
||||
<div id="d5">5</div>
|
||||
<div id="d6">6</div>
|
||||
<div id="d7">7</div>
|
||||
15
Tests/LibWeb/Ref/reference/color-rgb-ref.html
Normal file
15
Tests/LibWeb/Ref/reference/color-rgb-ref.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
}
|
||||
#d1 { background-color: #ff1e28; }
|
||||
#d2 { background-color: #ffffff; }
|
||||
#d3 { background-color: #00ff99; }
|
||||
#d4 { background-color: #ffffff; }
|
||||
</style>
|
||||
<div id="d1">1</div>
|
||||
<div id="d2">2</div>
|
||||
<div id="d3">3</div>
|
||||
<div id="d4">4</div>
|
||||
Loading…
Add table
Reference in a new issue