mirror of
https://github.com/SerenityOS/serenity
synced 2026-05-12 01:47:00 +02:00
a3f56f9abb
Example of the difference:
50 * 2.55 --> 127.4999 --> round towards +∞ --> 127
50 * 255 / 100 --> 127.5000 --> round towards +∞ --> 128
Now, 9 failing WPT tests in /css/css-color/ pass.
(cherry picked from commit 6c3ecf6a342cbc0a83c1deac89e1a7edf6d959c4;
amended because css-color-functions.html is a reftest for us, not
a screenshot test)
93 lines
3.2 KiB
HTML
93 lines
3.2 KiB
HTML
<!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% 50% 90%);">
|
|
<p>modern rgb with percentages (round away from 0)</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>
|