LibWeb/CSS: Add support for the display-p3 color space in color()

This color space is often used as a reference in WPT tests, having
support for it makes us pass 15 new tests:
  - css/css-color/display-p3-001.html
  - css/css-color/display-p3-002.html
  - css/css-color/display-p3-003.html
  - css/css-color/display-p3-004.html
  - css/css-color/display-p3-005.html
  - css/css-color/display-p3-006.html
  - css/css-color/lab-008.html
  - css/css-color/lch-008.html
  - css/css-color/oklab-008.html
  - css/css-color/oklch-008.html
  - css/css-color/predefined-005.html
  - css/css-color/predefined-006.html
  - css/css-color/xyz-005.html
  - css/css-color/xyz-d50-005.html
  - css/css-color/xyz-d65-005.html
This commit is contained in:
Lucas CHOLLET
2024-11-14 00:26:39 -05:00
committed by Andreas Kling
parent f949334a9a
commit 596a4e55dd
Notes: github-actions[bot] 2024-11-16 09:30:55 +00:00
17 changed files with 216 additions and 1 deletions

View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4:display-p3</title>
<style>
.test { background-color: lab(86.61399% -106.539 102.871); width: 12em; height: 12em; } /* color(display-p3 0 1 0) converted to Lab */
</style>
<body>
<p>Test passes if you see a single square, and not two rectangles of different colors.</p>
<div class="test"></div>
</body>

View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Moss green (medium chroma) square reference</title>
<style>
.test { background-color: rgb(44.8436% 53.537% 28.8112%); width: 12em; height: 12em;}
</style>
<body>
<p>Test passes if you see a moss green square, and no red.</p>
<div class="test"></div>
</body>

View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>White square reference</title>
<style>
body { background-color: grey; }
.test { background-color: #FFFFFF; width: 12em; height: 12em; }
</style>
<body>
<p>Test passes if you see a white square, and no red.</p>
<div class="test"></div>
</body>

View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>sRGB yellow square reference</title>
<style>
body { background-color: grey; }
.test { background-color: #FFFF00; width: 12em; height: 12em; }
</style>
<body>
<p>Test passes if you see a yellow square, and no red.</p>
<div class="test"></div>
</body>