diff --git a/testing/web-platform/meta/MANIFEST.json b/testing/web-platform/meta/MANIFEST.json
index b0fe0e5bd5ac..53ca2e63f459 100644
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -9193,6 +9193,126 @@
         "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.invalidtype.html",
         "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.invalidtype.html"
       },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.html"
+      },
       {
         "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.current.basic.html",
         "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.current.basic.html"
@@ -9301,6 +9421,70 @@
         "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.html4.html",
         "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.html4.html"
       },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-1.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-1.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-2.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-2.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-3.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-3.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-4.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-4.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-5.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-5.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-1.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-1.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-2.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-2.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-3.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-3.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-1.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-1.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-2.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-2.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-3.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-3.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-4.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-4.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-5.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-5.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-1.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-1.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-2.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-2.html"
+      },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-3.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-3.html"
+      },
       {
         "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex1.html",
         "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex1.html"
@@ -9365,6 +9549,10 @@
         "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-2.html",
         "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-2.html"
       },
+      {
+        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-3.html",
+        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-3.html"
+      },
       {
         "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-1.html",
         "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-1.html"
@@ -9397,22 +9585,6 @@
         "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-3.html",
         "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-3.html"
       },
-      {
-        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-4.html",
-        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-4.html"
-      },
-      {
-        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-5.html",
-        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-5.html"
-      },
-      {
-        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-6.html",
-        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-6.html"
-      },
-      {
-        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-7.html",
-        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-7.html"
-      },
       {
         "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-1.html",
         "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-1.html"
@@ -9433,14 +9605,6 @@
         "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-5.html",
         "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-5.html"
       },
-      {
-        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-6.html",
-        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-6.html"
-      },
-      {
-        "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-7.html",
-        "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-7.html"
-      },
       {
         "path": "2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-1.html",
         "url": "/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-1.html"
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.html
new file mode 100644
index 000000000000..3dbda598b639
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120 100.0% 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.png
new file mode 100644
index 000000000000..2733836c998f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.html
new file mode 100644
index 000000000000..25e98dc794c5
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120 100.0% 50.0% / 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.html
new file mode 100644
index 000000000000..de600d94bd8a
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-3</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-3.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120.0, 100.0%, 50.0%, 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.html
new file mode 100644
index 000000000000..52d917c6cf78
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-4</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120.0, 100.0%, 50.0%, 20%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.html
new file mode 100644
index 000000000000..4f65b3dea2a4
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-5</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-5.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120deg, 100.0%, 50.0%, 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.html
new file mode 100644
index 000000000000..19aa5974f2ca
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-6</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-6</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-6.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120deg, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.png
new file mode 100644
index 000000000000..2733836c998f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.html
new file mode 100644
index 000000000000..d9b6a3c98c33
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-7</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-7</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-7.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(133.33333333grad, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.png
new file mode 100644
index 000000000000..2733836c998f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.html
new file mode 100644
index 000000000000..24e2b51830c6
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-8</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-8</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-8.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(2.0943951024rad, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.png
new file mode 100644
index 000000000000..2733836c998f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.html
new file mode 100644
index 000000000000..9da548f3e72d
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-9</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-9</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-9.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(0.3333333333turn, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.png
new file mode 100644
index 000000000000..2733836c998f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.html
new file mode 100644
index 000000000000..65881eeb15fc
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120 100.0% 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.png
new file mode 100644
index 000000000000..2733836c998f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.html
new file mode 100644
index 000000000000..91f5e3459595
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120 100.0% 50.0% / 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.html
new file mode 100644
index 000000000000..eb6c69526e9d
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-3</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-3.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120.0, 100.0%, 50.0%, 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.html
new file mode 100644
index 000000000000..ce5bdef7ac35
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-4</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120.0, 100.0%, 50.0%, 20%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.html
new file mode 100644
index 000000000000..47b426daf549
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-5</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-5.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120deg, 100.0%, 50.0%, 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.html
new file mode 100644
index 000000000000..6dc5e7aef3f1
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-6</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-6</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-6.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120deg, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.png
new file mode 100644
index 000000000000..2733836c998f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.html
new file mode 100644
index 000000000000..a1069fea9fe4
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-7</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-7</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-7.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(133.33333333grad, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.png
new file mode 100644
index 000000000000..2733836c998f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.html
new file mode 100644
index 000000000000..7d04b1ca552b
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-8</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-8</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-8.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(2.0943951024rad, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.png
new file mode 100644
index 000000000000..2733836c998f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.html
new file mode 100644
index 000000000000..0a10c6e61c5c
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-9</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-9</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-9.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(0.3333333333turn, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.png
new file mode 100644
index 000000000000..2733836c998f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.html
new file mode 100644
index 000000000000..fd6376e1a2a1
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgb-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgb-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgb-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(0, 255.0, 0)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.png
new file mode 100644
index 000000000000..2733836c998f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.html
new file mode 100644
index 000000000000..ec0f62344f08
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgb-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgb-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgb-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(0, 255, 0, 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.html
new file mode 100644
index 000000000000..980abef36c4b
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgb-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgb-3</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgb-3.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(0, 255, 0, 20%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.html
new file mode 100644
index 000000000000..a2543b566ab8
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgb-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgb-4</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgb-4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(0 255 0)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.png
new file mode 100644
index 000000000000..2733836c998f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.html
new file mode 100644
index 000000000000..6b310d763ba7
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgb-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgb-5</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgb-5.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(0 255 0 / 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.html
new file mode 100644
index 000000000000..d38f7e0ac0e2
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgb-6</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgb-6</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgb-6.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(0 255 0 / 20%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.html
new file mode 100644
index 000000000000..83dfb2f86afb
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgba-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgba-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgba-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0, 255.0, 0)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.png
new file mode 100644
index 000000000000..2733836c998f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.html
new file mode 100644
index 000000000000..390d0bd0fab4
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgba-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgba-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgba-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0, 255, 0, 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.html
new file mode 100644
index 000000000000..f0fd88ee6c3c
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgba-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgba-3</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgba-3.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0, 255, 0, 20%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.html
new file mode 100644
index 000000000000..bd3e8edb2f8f
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgba-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgba-4</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgba-4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0 255 0)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.png
new file mode 100644
index 000000000000..2733836c998f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.html
new file mode 100644
index 000000000000..0287ef693cda
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgba-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgba-5</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgba-5.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0 255 0 / 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.html
new file mode 100644
index 000000000000..09042c8778ed
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgba-6</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgba-6</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgba-6.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0 255 0 / 20%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51, "50,25", "0,255,0,51");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.png b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.png
new file mode 100644
index 000000000000..c5661de82b2f
Binary files /dev/null and b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.png differ
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-1.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-1.html
new file mode 100644
index 000000000000..25bab97b05db
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsl-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsl-1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsl(0, 100%, 50% / 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-2.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-2.html
new file mode 100644
index 000000000000..f4a47f5d8aa3
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsl-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsl-2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsl(0 100% 50%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-7.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-3.html
similarity index 82%
rename from testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-7.html
rename to testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-3.html
index 06580f648163..490c66f362e0 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-7.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-3.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.invalid.rgba-7</title>
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsl-3</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/common/canvas-tests.js"></script>
 <link rel="stylesheet" href="/common/canvas-tests.css">
 <body class="show_output">
 
-<h1>2d.fillStyle.parse.invalid.rgba-7</h1>
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsl-3</h1>
 <p class="desc"></p>
 
 
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'rgba(255, 0, 0, '; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'hsl(0, 100% 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-7.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-4.html
similarity index 82%
rename from testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-7.html
rename to testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-4.html
index bc0bb5ef6f66..a3ab91c16a82 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-7.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-4.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.invalid.rgb-7</title>
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsl-4</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/common/canvas-tests.js"></script>
 <link rel="stylesheet" href="/common/canvas-tests.css">
 <body class="show_output">
 
-<h1>2d.fillStyle.parse.invalid.rgb-7</h1>
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsl-4</h1>
 <p class="desc"></p>
 
 
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'rgb(255, 0, 0, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'hsl(0 100% 50% /)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-5.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-5.html
new file mode 100644
index 000000000000..a437cd99cc71
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsl-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsl-5</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsl(0, 100%, 50% /)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-1.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-1.html
new file mode 100644
index 000000000000..5f71de33098b
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsla-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsla-1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsla(0, 100%, 50% / 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-2.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-2.html
new file mode 100644
index 000000000000..36c9fd1a6e48
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsla-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsla-2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsla(0 100% 50%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-3.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-3.html
new file mode 100644
index 000000000000..049ad397e001
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsla-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsla-3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsla(0, 100% 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-1.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-1.html
new file mode 100644
index 000000000000..7a2534ceb29b
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgb-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgb-1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgb(255, 0, 0 / 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-4.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-2.html
similarity index 82%
rename from testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-4.html
rename to testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-2.html
index e4d78b20e142..ca5a591ef641 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-4.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-2.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.invalid.rgb-4</title>
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgb-2</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/common/canvas-tests.js"></script>
 <link rel="stylesheet" href="/common/canvas-tests.css">
 <body class="show_output">
 
-<h1>2d.fillStyle.parse.invalid.rgb-4</h1>
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgb-2</h1>
 <p class="desc"></p>
 
 
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'rgb(100%, 0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'rgb(255 0 0, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-3.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-3.html
new file mode 100644
index 000000000000..e34ddfdf9afb
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgb-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgb-3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgb(255, 0 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-5.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-4.html
similarity index 82%
rename from testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-5.html
rename to testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-4.html
index 92f933db7990..682da31d2db6 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-5.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-4.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.invalid.rgb-5</title>
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgb-4</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/common/canvas-tests.js"></script>
 <link rel="stylesheet" href="/common/canvas-tests.css">
 <body class="show_output">
 
-<h1>2d.fillStyle.parse.invalid.rgb-5</h1>
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgb-4</h1>
 <p class="desc"></p>
 
 
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'rgb(255 0 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'rgb(0 0 0 /)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-5.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-5.html
new file mode 100644
index 000000000000..75a11dc199f0
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgb-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgb-5</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgb(0, 0, 0 /)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-1.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-1.html
new file mode 100644
index 000000000000..778fa479ce90
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgba-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgba-1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgba(255, 0, 0 / 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-6.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-2.html
similarity index 82%
rename from testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-6.html
rename to testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-2.html
index e3de9df53877..14c83a569129 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-6.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-2.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.invalid.rgb-6</title>
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgba-2</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/common/canvas-tests.js"></script>
 <link rel="stylesheet" href="/common/canvas-tests.css">
 <body class="show_output">
 
-<h1>2d.fillStyle.parse.invalid.rgb-6</h1>
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgba-2</h1>
 <p class="desc"></p>
 
 
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'rgb(255, - 1, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'rgba(255 0 0, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-3.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-3.html
new file mode 100644
index 000000000000..9647877b2a0e
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgba-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgba-3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgba(255, 0 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-5.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-5.html
index 87b6a5731ce1..0e3f8514847b 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-5.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-5.html
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'hsl(0, 100%, 100%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'hsl(0, 100.%, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-6.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-6.html
index 008e278b558f..6343ab12525c 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-6.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-6.html
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'hsl(0, 100.%, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'hsl(0, 100%, 50%,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-6.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-3.html
similarity index 84%
rename from testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-6.html
rename to testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-3.html
index 3e7f06ad436a..698a6cb9abc1 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-6.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-3.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.invalid.rgba-6</title>
+<title>Canvas test: 2d.fillStyle.parse.invalid.hsla-3</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/common/canvas-tests.js"></script>
 <link rel="stylesheet" href="/common/canvas-tests.css">
 <body class="show_output">
 
-<h1>2d.fillStyle.parse.invalid.rgba-6</h1>
+<h1>2d.fillStyle.parse.invalid.hsla-3</h1>
 <p class="desc"></p>
 
 
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'rgba(255, 0, 0, 1.)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'hsla(0, 0, 50%, 1,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-1.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-1.html
index fc0433eae59f..66fb8e13d28e 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-1.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-1.html
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'rgb(255.0, 0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'rgb(255.0, 0, 0,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-2.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-2.html
index 68c06e5ebec0..7f9457c8220a 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-2.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-2.html
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'rgb(255, 0.0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'rgb(100%, 0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-3.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-3.html
index f864c9f2bc42..2530569c28d8 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-3.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-3.html
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'rgb(255.0, 0, 0,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'rgb(255, - 1, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-1.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-1.html
index 774aed13d51f..1dc343ad1880 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-1.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-1.html
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'rgba(255, 0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'rgba(100%, 0, 0, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-2.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-2.html
index 14065e634267..5f5bb7941ae4 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-2.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-2.html
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'rgba(255.0, 0, 0, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'rgba(255, 0, 0, 1. 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-3.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-3.html
index 5947169fe55f..67ed7f2a226d 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-3.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-3.html
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'rgba(100%, 0, 0, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'rgba(255, 0, 0, 1.)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-4.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-4.html
index 9870b14f9d13..aea9725a2dc8 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-4.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-4.html
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'rgba(255, 0, 0, 100%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'rgba(255, 0, 0, '; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-5.html b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-5.html
index 4274996cae31..a149ed343a38 100644
--- a/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-5.html
+++ b/testing/web-platform/tests/2dcontext/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-5.html
@@ -21,7 +21,7 @@ _addTest(function(canvas, ctx) {
 
 
 ctx.fillStyle = '#0f0';
-try { ctx.fillStyle = 'rgba(255, 0, 0, 1. 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+try { ctx.fillStyle = 'rgba(255, 0, 0, 1,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
 ctx.fillRect(0, 0, 100, 50);
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
diff --git a/testing/web-platform/tests/2dcontext/tools/tests2d.yaml b/testing/web-platform/tests/2dcontext/tools/tests2d.yaml
index 8528a124123f..21a8c001599b 100644
--- a/testing/web-platform/tests/2dcontext/tools/tests2d.yaml
+++ b/testing/web-platform/tests/2dcontext/tools/tests2d.yaml
@@ -1372,6 +1372,40 @@
         ('hsla-clamp-6', 'hsla(120, 100%, 0%, -2)', 0,0,0,0, ""),
         ('svg-1', 'gray', 128,128,128,255, ""),
         ('svg-2', 'grey', 128,128,128,255, ""),
+        # css-color-4 rgb() color function
+        #   https://drafts.csswg.org/css-color/#numeric-rgb
+        ('css-color-4-rgb-1', 'rgb(0, 255.0, 0)', 0,255,0,255, ""),
+        ('css-color-4-rgb-2', 'rgb(0, 255, 0, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-rgb-3', 'rgb(0, 255, 0, 20%)', 0,255,0,51, ""),
+        ('css-color-4-rgb-4', 'rgb(0 255 0)', 0,255,0,255, ""),
+        ('css-color-4-rgb-5', 'rgb(0 255 0 / 0.2)', 0,255,0,51, ""),
+        ('css-color-4-rgb-6', 'rgb(0 255 0 / 20%)', 0,255,0,51, ""),
+        ('css-color-4-rgba-1', 'rgba(0, 255.0, 0)', 0,255,0,255, ""),
+        ('css-color-4-rgba-2', 'rgba(0, 255, 0, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-rgba-3', 'rgba(0, 255, 0, 20%)', 0,255,0,51, ""),
+        ('css-color-4-rgba-4', 'rgba(0 255 0)', 0,255,0,255, ""),
+        ('css-color-4-rgba-5', 'rgba(0 255 0 / 0.2)', 0,255,0,51, ""),
+        ('css-color-4-rgba-6', 'rgba(0 255 0 / 20%)', 0,255,0,51, ""),
+        # css-color-4 hsl() color function
+        #   https://drafts.csswg.org/css-color/#the-hsl-notation
+        ('css-color-4-hsl-1', 'hsl(120 100.0% 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsl-2', 'hsl(120 100.0% 50.0% / 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsl-3', 'hsl(120.0, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsl-4', 'hsl(120.0, 100.0%, 50.0%, 20%)', 0,255,0,51, ""),
+        ('css-color-4-hsl-5', 'hsl(120deg, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsl-6', 'hsl(120deg, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsl-7', 'hsl(133.33333333grad, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsl-8', 'hsl(2.0943951024rad, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsl-9', 'hsl(0.3333333333turn, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsla-1', 'hsl(120 100.0% 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsla-2', 'hsl(120 100.0% 50.0% / 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsla-3', 'hsl(120.0, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsla-4', 'hsl(120.0, 100.0%, 50.0%, 20%)', 0,255,0,51, ""),
+        ('css-color-4-hsla-5', 'hsl(120deg, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsla-6', 'hsl(120deg, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsla-7', 'hsl(133.33333333grad, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsla-8', 'hsl(2.0943951024rad, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsla-9', 'hsl(0.3333333333turn, 100.0%, 50.0%)', 0,255,0,255, ""),
         # currentColor is handled later
     ]:
         # TODO: test by retrieving fillStyle, instead of actually drawing?
@@ -1404,33 +1438,47 @@
         ('hex6', '#fg0000'),
         ('hex7', '#ff0000f'),
         ('hex8', '#fg0000ff'),
-        ('rgb-1', 'rgb(255.0, 0, 0)'),
-        ('rgb-2', 'rgb(255, 0.0, 0)'),
-        ('rgb-3', 'rgb(255.0, 0, 0,)'),
-        ('rgb-4', 'rgb(100%, 0, 0)'),
-        ('rgb-5', 'rgb(255 0 0)'),
-        ('rgb-6', 'rgb(255, - 1, 0)'),
-        ('rgb-7', 'rgb(255, 0, 0, 1)'),
-        ('rgba-1', 'rgba(255, 0, 0)'),
-        ('rgba-2', 'rgba(255.0, 0, 0, 1)'),
-        ('rgba-3', 'rgba(100%, 0, 0, 1)'),
-        ('rgba-4', 'rgba(255, 0, 0, 100%)'),
-        ('rgba-5', 'rgba(255, 0, 0, 1. 0)'),
-        ('rgba-6', 'rgba(255, 0, 0, 1.)'),
-        ('rgba-7', 'rgba(255, 0, 0, '),
+        ('rgb-1', 'rgb(255.0, 0, 0,)'),
+        ('rgb-2', 'rgb(100%, 0, 0)'),
+        ('rgb-3', 'rgb(255, - 1, 0)'),
+        ('rgba-1', 'rgba(100%, 0, 0, 1)'),
+        ('rgba-2', 'rgba(255, 0, 0, 1. 0)'),
+        ('rgba-3', 'rgba(255, 0, 0, 1.)'),
+        ('rgba-4', 'rgba(255, 0, 0, '),
+        ('rgba-5', 'rgba(255, 0, 0, 1,)'),
         ('hsl-1', 'hsl(0%, 100%, 50%)'),
         ('hsl-2', 'hsl(z, 100%, 50%)'),
         ('hsl-3', 'hsl(0, 0, 50%)'),
         ('hsl-4', 'hsl(0, 100%, 0)'),
-        ('hsl-5', 'hsl(0, 100%, 100%, 1)'),
-        ('hsl-6', 'hsl(0, 100.%, 50%)'),
+        ('hsl-5', 'hsl(0, 100.%, 50%)'),
+        ('hsl-6', 'hsl(0, 100%, 50%,)'),
         ('hsla-1', 'hsla(0%, 100%, 50%, 1)'),
         ('hsla-2', 'hsla(0, 0, 50%, 1)'),
+        ('hsla-3', 'hsla(0, 0, 50%, 1,)'),
         ('name-1', 'darkbrown'),
         ('name-2', 'firebrick1'),
         ('name-3', 'red blue'),
         ('name-4', '"red"'),
         ('name-5', '"red'),
+        # css-color-4 color function
+        #   comma and comma-less expressions should not mix together.
+        ('css-color-4-rgb-1', 'rgb(255, 0, 0 / 1)'),
+        ('css-color-4-rgb-2', 'rgb(255 0 0, 1)'),
+        ('css-color-4-rgb-3', 'rgb(255, 0 0)'),
+        ('css-color-4-rgba-1', 'rgba(255, 0, 0 / 1)'),
+        ('css-color-4-rgba-2', 'rgba(255 0 0, 1)'),
+        ('css-color-4-rgba-3', 'rgba(255, 0 0)'),
+        ('css-color-4-hsl-1', 'hsl(0, 100%, 50% / 1)'),
+        ('css-color-4-hsl-2', 'hsl(0 100% 50%, 1)'),
+        ('css-color-4-hsl-3', 'hsl(0, 100% 50%)'),
+        ('css-color-4-hsla-1', 'hsla(0, 100%, 50% / 1)'),
+        ('css-color-4-hsla-2', 'hsla(0 100% 50%, 1)'),
+        ('css-color-4-hsla-3', 'hsla(0, 100% 50%)'),
+        #  trailing slash
+        ('css-color-4-rgb-4', 'rgb(0 0 0 /)'),
+        ('css-color-4-rgb-5', 'rgb(0, 0, 0 /)'),
+        ('css-color-4-hsl-4', 'hsl(0 100% 50% /)'),
+        ('css-color-4-hsl-5', 'hsl(0, 100%, 50% /)'),
     ]:
         test = {
             'name': '2d.fillStyle.parse.invalid.%s' % name,