minerva/Tests/LibWeb/Ref/css-color-functions.html at 80c0d1833935efa0f2bc7f07bc6b5bd638a247a8

ErisCyan / minerva
Find file
Newer
Older
minerva / Tests / LibWeb / Ref / css-color-functions.html
minerva on 13 Jul 3 KB Initial commit
Raw Blame History
<!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>