mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-29 16:21:29 +00:00
9ab25c47a4
These test work with LibGfx painter but won't longer work after switching to Skia, because it produces slightly different antialiasing, rounding in color blending, etc.
90 lines
3.1 KiB
HTML
90 lines
3.1 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 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>
|