Add more display-p3 tests
diff --git a/css/css-color/display-p3-001.html b/css/css-color/display-p3-001.html
new file mode 100644
index 0000000..74fe34a
--- /dev/null
+++ b/css/css-color/display-p3-001.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: display-p3</title>
+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3">
+<link rel="match" href="greensquare-ref.html">
+<meta name="assert" content="display-p3 with no alpha">
+<style>
+ .test { background-color: red; width: 12em; height: 12em; }
+ .test { background-color: color(display-p3 0.21604 0.49418 0.13151); } /* green (sRGB #008000) converted to display-p3 */
+</style>
+<body>
+ <p>Test passes if you see a green square, and no red.</p>
+ <div class="test"></div>
+</body>
diff --git a/css/css-color/display-p3-002.html b/css/css-color/display-p3-002.html
new file mode 100644
index 0000000..6a93029
--- /dev/null
+++ b/css/css-color/display-p3-002.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: display-p3</title>
+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-predefined">
+<link rel="match" href="blacksquare-ref.html">
+<meta name="assert" content="display-p3 with no alpha">
+<style>
+ .test { background-color: red; width: 12em; height: 12em; }
+ .test { background-color: color(display-p3 0 0 0); } /* black (sRGB #000000) converted to display-p3 */
+</style>
+<body>
+ <p>Test passes if you see a black square, and no red.</p>
+ <div class="test"></div>
+</body>
diff --git a/css/css-color/display-p3-003.html b/css/css-color/display-p3-003.html
new file mode 100644
index 0000000..697d164
--- /dev/null
+++ b/css/css-color/display-p3-003.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: display-p3</title>
+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-predefined">
+<link rel="match" href="./whitesquare-ref.html">
+<meta name="assert" content="display-p3 with no alpha">
+<style>
+ body { background-color: grey; }
+ .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+ .ref { background-color: rgb(100% 100% 100%); width: 12em; height: 6em; margin-bottom: 0; } /* color(display-p3 1 1 1) converted to sRGB */
+ .test { background-color: color(display-p3 1 1 1); }
+</style>
+<body>
+ <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+ <div class="ref"></div>
+ <div class="test"></div>
+</body>
diff --git a/css/css-color/display-p3-004-ref.html b/css/css-color/display-p3-004-ref.html
new file mode 100644
index 0000000..fd1c8a6
--- /dev/null
+++ b/css/css-color/display-p3-004-ref.html
@@ -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>
diff --git a/css/css-color/display-p3-004.html b/css/css-color/display-p3-004.html
new file mode 100644
index 0000000..8b0999a
--- /dev/null
+++ b/css/css-color/display-p3-004.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: display-p3</title>
+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-lab-oklab">
+<link rel="match" href="display-p3-004-ref.html">
+<meta name="assert" content="display-p3 with no alpha">
+<style>
+ .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+ .ref { background-color: lab(86.61399% -106.539 102.871); width: 12em; height: 6em; margin-bottom: 0; } /* color(display-p3 0 1 0) converted to Lab */
+ .test { background-color: color(display-p3 0 1 0); }
+</style>
+<body>
+ <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+ <div class="ref"></div>
+ <div class="test"></div>
+</body>
diff --git a/css/css-color/display-p3-005.html b/css/css-color/display-p3-005.html
new file mode 100644
index 0000000..db255dc
--- /dev/null
+++ b/css/css-color/display-p3-005.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: display-p3</title>
+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-predefined">
+<link rel="match" href="./yellowsquare-ref.html">
+<meta name="assert" content="display-p3 with no alpha">
+<style>
+ body { background-color: grey; }
+ .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+ .ref { background-color: yellow; width: 12em; height: 6em; margin-bottom: 0; } /* sRGB yellow converted to display-p3 */
+ .test { background-color: color(display-p3 1 1 0.330897); }
+</style>
+<body>
+ <p>Test passes if you see a yellow square, and no red.</p>
+ <div class="ref"></div>
+ <div class="test"></div>
+</body>
diff --git a/css/css-color/display-p3-006.html b/css/css-color/display-p3-006.html
new file mode 100644
index 0000000..0285af8
--- /dev/null
+++ b/css/css-color/display-p3-006.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: display-p3 and sRGB with medium chroma</title>
+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-sRGB">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#oklab-lab-to-predefined">
+<link rel="match" href="mossgreensquare-ref.html">
+<meta name="assert" content="display-p3 with no alpha">
+<style>
+ .test, .test2 { background-color: red; width: 12em; height: 4em; }
+ .ref {background-color: rgb(44.8436% 53.537% 28.8112%); width: 12em; height: 4em; }
+ /* lch(54% 35 118) converted to legacy sRGB */
+ .test { background-color: color(display-p3 0.465377 0.532768 0.317713); }
+ /* lch(54% 35 118) converted to display-p3 */
+ .test2 {background-color: color(srgb 0.448436 0.53537 0.288113); }
+ /* lch(54% 35 118) converted to color(sRGB) */
+</style>
+<body>
+ <p>Test passes if you see a moss green square, and no red.</p>
+ <div class="test"></div>
+ <div class="ref"></div>
+ <div class="test2"></div>
+</body>
diff --git a/css/css-color/mossgreensquare-ref.html b/css/css-color/mossgreensquare-ref.html
new file mode 100644
index 0000000..06f866c
--- /dev/null
+++ b/css/css-color/mossgreensquare-ref.html
@@ -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>
diff --git a/css/css-color/yellowsquare-ref.html b/css/css-color/yellowsquare-ref.html
new file mode 100644
index 0000000..34463bc
--- /dev/null
+++ b/css/css-color/yellowsquare-ref.html
@@ -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>
