mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-08-15 16:30:36 +03:00
LibWeb/CSS: Add tests for color functions
This commit is contained in:
Gingeh
Andrew Kaster
parent
e8d32bab58
commit
e1c61d654f
Notes:
sideshowbarker
2024-07-17 05:03:11 +09:00
Author: https://github.com/Gingeh Commit: https://github.com/LadybirdBrowser/ladybird/commit/e1c61d654f Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/385 Reviewed-by: https://github.com/ADKaster ✅
89
Tests/LibWeb/Ref/css-color-functions.html
Normal file
89
Tests/LibWeb/Ref/css-color-functions.html
Normal file
@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<link rel="match" href="reference/css-color-functions-ref.html" />
|
||||
<div style="background-color: rgb(10, 20, 30);">
|
||||
<p>legacy rgb with numbers</p>
|
||||
</div>
|
||||
<div style="background-color: rgb(10%, 20%, 30%);">
|
||||
<p>legacy rgb with percentages</p>
|
||||
</div>
|
||||
<div style="background-color: rgba(10, 20, 30, 0.5);">
|
||||
<p>legacy rgba with numbers and number alpha</p>
|
||||
</div>
|
||||
<div style="background-color: rgba(10, 20, 30, 50%);">
|
||||
<p>legacy rgba with numbers and percentage alpha</p>
|
||||
</div>
|
||||
<div style="background-color: rgba(10%, 20%, 30%, 0.5);">
|
||||
<p>legacy rgba with percentages and number alpha</p>
|
||||
</div>
|
||||
<div style="background-color: rgba(10%, 20%, 30%, 50%);">
|
||||
<p>legacy rgba with percentages and percentage alpha</p>
|
||||
</div>
|
||||
<div style="background-color: hsl(120, 100%, 50%);">
|
||||
<p>legacy hsl with number hue</p>
|
||||
</div>
|
||||
<div style="background-color: hsl(120deg, 100%, 50%);">
|
||||
<p>legacy hsl with degree hue</p>
|
||||
</div>
|
||||
<div style="background-color: hsla(120, 100%, 50%, 0.5);">
|
||||
<p>legacy hsla with number alpha</p>
|
||||
</div>
|
||||
<div style="background-color: hsla(120, 100%, 50%, 50%);">
|
||||
<p>legacy hsla with percentage alpha</p>
|
||||
</div>
|
||||
<div style="background-color: rgba(-20, 0, 300, 1.5);">
|
||||
<p>legacy rgba with out-of-range numbers (should be clamped)</p>
|
||||
</div>
|
||||
<div style="background-color: rgba(-20%, 0%, 300%, -50%);">
|
||||
<p>legacy rgba with out-of-range percentages (should be clamped)</p>
|
||||
</div>
|
||||
<div style="background-color: rgb(10 20% 30);">
|
||||
<p>modern rgb with mixed types</p>
|
||||
</div>
|
||||
<div style="background-color: rgb(10 20% 30 / 0.5);">
|
||||
<p>modern rgb with alpha</p>
|
||||
</div>
|
||||
<div style="background-color: rgba(10 20% 30);">
|
||||
<p>modern rgba without alpha</p>
|
||||
</div>
|
||||
<div style="background-color: hsl(120 30% 50%);">
|
||||
<p>modern hsl</p>
|
||||
</div>
|
||||
<div style="background-color: hsl(120 30% 50% / 50%);">
|
||||
<p>modern hsl with alpha</p>
|
||||
</div>
|
||||
<div style="background-color: hsla(120 30% 50%);">
|
||||
<p>modern hsla without alpha</p>
|
||||
</div>
|
||||
<div style="background-color: hsl(120 30 50);">
|
||||
<p>modern hsl with numbers</p>
|
||||
</div>
|
||||
<div style="background-color: hsl(400 -30% 120%);">
|
||||
<p>modern hsl with out-of-range values (should be clamped/wrapped)</p>
|
||||
</div>
|
||||
<div style="background-color: hwb(120 30% 50%);">
|
||||
<p>hwb with percentages</p>
|
||||
</div>
|
||||
<div style="background-color: hwb(120 30% 50% / 0.5);">
|
||||
<p>hwb with percentages and alpha</p>
|
||||
</div>
|
||||
<div style="background-color: hwb(120grad 30 50);">
|
||||
<p>hwb with numbers/angle</p>
|
||||
</div>
|
||||
<div style="background-color: hwb(120 30 50% / 50%);">
|
||||
<p>hwb with mixed-type values and percentage alpha</p>
|
||||
</div>
|
||||
<div style="background-color: oklab(0.2 0 0.1 / 0.5);">
|
||||
<p>oklab with numbers and alpha</p>
|
||||
</div>
|
||||
<div style="background-color: oklab(4 0 0.1);">
|
||||
<p>oklab with out-of-range lightness (should be clamped)</p>
|
||||
</div>
|
||||
<div style="background-color: oklab(20% 70% -80% / 50%);">
|
||||
<p>oklab with percentages and alpha</p>
|
||||
</div>
|
||||
<div style="background-color: oklch(0.5 0.1 20 / 0.5);">
|
||||
<p>oklch with numbers</p>
|
||||
</div>
|
||||
<div style="background-color: oklch(50% 10% 20deg / 50%);">
|
||||
<p>oklch with percentages and angle hue </p>
|
||||
</div>
|
||||
91
Tests/LibWeb/Ref/reference/css-color-functions-ref.html
Normal file
91
Tests/LibWeb/Ref/reference/css-color-functions-ref.html
Normal file
@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- FIXME: Some colors/channels are off by 1, likely from accumulated rounding errors -->
|
||||
<!-- Affected cases are labeled with "Expected: #blahblah" -->
|
||||
|
||||
<div style="background-color: #0a141e;">
|
||||
<p>legacy rgb with numbers</p>
|
||||
</div>
|
||||
<div style="background-color: #1a334d;">
|
||||
<p>legacy rgb with percentages</p>
|
||||
</div>
|
||||
<div style="background-color: #84898e;">
|
||||
<p>legacy rgba with numbers and number alpha</p>
|
||||
</div>
|
||||
<div style="background-color: #84898e;">
|
||||
<p>legacy rgba with numbers and percentage alpha</p>
|
||||
</div>
|
||||
<div style="background-color: #8c98a5;"> <!-- Expected: #8c99a6 -->
|
||||
<p>legacy rgba with percentages and number alpha</p>
|
||||
</div>
|
||||
<div style="background-color: #8c99a6;">
|
||||
<p>legacy rgba with percentages and percentage alpha</p>
|
||||
</div>
|
||||
<div style="background-color: #00ff00;">
|
||||
<p>legacy hsl with number hue</p>
|
||||
</div>
|
||||
<div style="background-color: #00ff00;">
|
||||
<p>legacy hsl with degree hue</p>
|
||||
</div>
|
||||
<div style="background-color: #7fff7f;">
|
||||
<p>legacy hsla with number alpha</p>
|
||||
</div>
|
||||
<div style="background-color: #7fff7f;">
|
||||
<p>legacy hsla with percentage alpha</p>
|
||||
</div>
|
||||
<div style="background-color: #0000ff;">
|
||||
<p>legacy rgba with out-of-range numbers (should be clamped)</p>
|
||||
</div>
|
||||
<div style="background-color: #ffffff;">
|
||||
<p>legacy rgba with out-of-range percentages (should be clamped)</p>
|
||||
</div>
|
||||
<div style="background-color: #0a331e;">
|
||||
<p>modern rgb with mixed types</p>
|
||||
</div>
|
||||
<div style="background-color: #84988e;"> <!-- Expected: #84998e -->
|
||||
<p>modern rgb with alpha</p>
|
||||
</div>
|
||||
<div style="background-color: #0a331e;">
|
||||
<p>modern rgba without alpha</p>
|
||||
</div>
|
||||
<div style="background-color: #59a659;">
|
||||
<p>modern hsl</p>
|
||||
</div>
|
||||
<div style="background-color: #abd2ab;"> <!-- Expected: #acd2ac -->
|
||||
<p>modern hsl with alpha</p>
|
||||
</div>
|
||||
<div style="background-color: #59a659;">
|
||||
<p>modern hsla without alpha</p>
|
||||
</div>
|
||||
<div style="background-color: #59a659;">
|
||||
<p>modern hsl with numbers</p>
|
||||
</div>
|
||||
<div style="background-color: #ffffff;">
|
||||
<p>modern hsl with out-of-range values (should be clamped/wrapped)</p>
|
||||
</div>
|
||||
<div style="background-color: #4c7f4c;"> <!-- Expected: #4d804d -->
|
||||
<p>hwb with percentages</p>
|
||||
</div>
|
||||
<div style="background-color: #a5bfa5;"> <!-- Expected: #a6bfa6 -->
|
||||
<p>hwb with percentages and alpha</p>
|
||||
</div>
|
||||
<div style="background-color: #567f4c;"> <!-- Expected: #57804d -->
|
||||
<p>hwb with numbers/angle</p>
|
||||
</div>
|
||||
<div style="background-color: #a5bfa5;"> <!-- Expected: #a6bfa6 -->
|
||||
<p>hwb with mixed-type values and percentage alpha</p>
|
||||
</div>
|
||||
<div style="background-color: #92877f;"> <!-- Expected: #93877f -->
|
||||
<p>oklab with numbers and alpha</p>
|
||||
</div>
|
||||
<div style="background-color: #fffdb0;">
|
||||
<p>oklab with out-of-range lightness (should be clamped)</p>
|
||||
</div>
|
||||
<div style="background-color: #a77fce;"> <!-- Expected: #a87fce -->
|
||||
<p>oklab with percentages and alpha</p>
|
||||
</div>
|
||||
<div style="background-color: #c9a4a4;"> <!-- Expected: #c9a4a5 -->
|
||||
<p>oklch with numbers</p>
|
||||
</div>
|
||||
<div style="background-color: #bbacac;"> <!-- Expected: #bcacac -->
|
||||
<p>oklch with percentages and angle hue </p>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user