Restore DevTools color formatting tests

A DevTools CL [1] changes the way CSS colors are serialized.
A previous Chromium patch [2] temporarily disabled the affected
tests. Now that the DevTools CL has landed and rolled into
Chromium [3], we can re-enable the tests with updated test
expectations.

[1]: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2172417
[2]: https://chromium-review.googlesource.com/c/chromium/src/+/2172317
[3]: https://chromium-review.googlesource.com/c/chromium/src/+/2172998

Bug: chromium:1075869
Change-Id: Ic91228ce944400d1e8f0cbd750615e60f6e0c319
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2172859
Commit-Queue: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Cr-Commit-Position: refs/heads/master@{#763805}
diff --git a/third_party/blink/web_tests/http/tests/devtools/components/color-expected.txt b/third_party/blink/web_tests/http/tests/devtools/components/color-expected.txt
index 713a8015..2294222 100644
--- a/third_party/blink/web_tests/http/tests/devtools/components/color-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/components/color-expected.txt
@@ -2,9 +2,9 @@
 
 Dumping 'red' in different formats:
  - rgb(255 0 0)
- - rgb(255 0 0 / 1)
- - hsl(0 100% 50%)
- - hsl(0 100% 50% / 1)
+ - rgb(255 0 0)
+ - hsl(0deg 100% 50%)
+ - hsl(0deg 100% 50%)
  - hsv(0, 100%, 100%)
  - hsva(0, 100%, 100%, 1)
  - #ff0000ff
@@ -13,13 +13,13 @@
  - #f00
  - red
  - default: red
- - inverse color: rgb(0 255 255 / 1)
- - setAlpha(0.42): rgb(255 0 0 / 0.42)
+ - inverse color: rgb(0 255 255)
+ - setAlpha(0.42): rgb(255 0 0 / 42%)
 Dumping 'green' in different formats:
  - rgb(0 128 0)
- - rgb(0 128 0 / 1)
- - hsl(120 100% 25%)
- - hsl(120 100% 25% / 1)
+ - rgb(0 128 0)
+ - hsl(120deg 100% 25%)
+ - hsl(120deg 100% 25%)
  - hsv(120, 100%, 50%)
  - hsva(120, 100%, 50%, 1)
  - #008000ff
@@ -28,13 +28,13 @@
  - null
  - green
  - default: green
- - inverse color: rgb(255 127 255 / 1)
- - setAlpha(0.42): rgb(0 128 0 / 0.42)
+ - inverse color: rgb(255 127 255)
+ - setAlpha(0.42): rgb(0 128 0 / 42%)
 Dumping 'blue' in different formats:
  - rgb(0 0 255)
- - rgb(0 0 255 / 1)
- - hsl(240 100% 50%)
- - hsl(240 100% 50% / 1)
+ - rgb(0 0 255)
+ - hsl(240deg 100% 50%)
+ - hsl(240deg 100% 50%)
  - hsv(240, 100%, 100%)
  - hsva(240, 100%, 100%, 1)
  - #0000ffff
@@ -43,13 +43,13 @@
  - #00f
  - blue
  - default: blue
- - inverse color: rgb(255 255 0 / 1)
- - setAlpha(0.42): rgb(0 0 255 / 0.42)
+ - inverse color: rgb(255 255 0)
+ - setAlpha(0.42): rgb(0 0 255 / 42%)
 Dumping 'cyan' in different formats:
  - rgb(0 255 255)
- - rgb(0 255 255 / 1)
- - hsl(180 100% 50%)
- - hsl(180 100% 50% / 1)
+ - rgb(0 255 255)
+ - hsl(180deg 100% 50%)
+ - hsl(180deg 100% 50%)
  - hsv(180, 100%, 100%)
  - hsva(180, 100%, 100%, 1)
  - #00ffffff
@@ -58,13 +58,13 @@
  - #0ff
  - cyan
  - default: cyan
- - inverse color: rgb(255 0 0 / 1)
- - setAlpha(0.42): rgb(0 255 255 / 0.42)
+ - inverse color: rgb(255 0 0)
+ - setAlpha(0.42): rgb(0 255 255 / 42%)
 Dumping 'magenta' in different formats:
  - rgb(255 0 255)
- - rgb(255 0 255 / 1)
- - hsl(300 100% 50%)
- - hsl(300 100% 50% / 1)
+ - rgb(255 0 255)
+ - hsl(300deg 100% 50%)
+ - hsl(300deg 100% 50%)
  - hsv(300, 100%, 100%)
  - hsva(300, 100%, 100%, 1)
  - #ff00ffff
@@ -73,13 +73,13 @@
  - #f0f
  - magenta
  - default: magenta
- - inverse color: rgb(0 255 0 / 1)
- - setAlpha(0.42): rgb(255 0 255 / 0.42)
+ - inverse color: rgb(0 255 0)
+ - setAlpha(0.42): rgb(255 0 255 / 42%)
 Dumping 'yellow' in different formats:
  - rgb(255 255 0)
- - rgb(255 255 0 / 1)
- - hsl(60 100% 50%)
- - hsl(60 100% 50% / 1)
+ - rgb(255 255 0)
+ - hsl(60deg 100% 50%)
+ - hsl(60deg 100% 50%)
  - hsv(60, 100%, 100%)
  - hsva(60, 100%, 100%, 1)
  - #ffff00ff
@@ -88,13 +88,13 @@
  - #ff0
  - yellow
  - default: yellow
- - inverse color: rgb(0 0 255 / 1)
- - setAlpha(0.42): rgb(255 255 0 / 0.42)
+ - inverse color: rgb(0 0 255)
+ - setAlpha(0.42): rgb(255 255 0 / 42%)
 Dumping 'white' in different formats:
  - rgb(255 255 255)
- - rgb(255 255 255 / 1)
- - hsl(0 0% 100%)
- - hsl(0 0% 100% / 1)
+ - rgb(255 255 255)
+ - hsl(0deg 0% 100%)
+ - hsl(0deg 0% 100%)
  - hsv(0, 0%, 100%)
  - hsva(0, 0%, 100%, 1)
  - #ffffffff
@@ -103,13 +103,13 @@
  - #fff
  - white
  - default: white
- - inverse color: rgb(0 0 0 / 1)
- - setAlpha(0.42): rgb(255 255 255 / 0.42)
+ - inverse color: rgb(0 0 0)
+ - setAlpha(0.42): rgb(255 255 255 / 42%)
 Dumping 'black' in different formats:
  - rgb(0 0 0)
- - rgb(0 0 0 / 1)
- - hsl(0 0% 0%)
- - hsl(0 0% 0% / 1)
+ - rgb(0 0 0)
+ - hsl(0deg 0% 0%)
+ - hsl(0deg 0% 0%)
  - hsv(0, 0%, 0%)
  - hsva(0, 0%, 0%, 1)
  - #000000ff
@@ -118,13 +118,13 @@
  - #000
  - black
  - default: black
- - inverse color: rgb(255 255 255 / 1)
- - setAlpha(0.42): rgb(0 0 0 / 0.42)
+ - inverse color: rgb(255 255 255)
+ - setAlpha(0.42): rgb(0 0 0 / 42%)
 Dumping 'rgb(94, 126, 91)' in different formats:
  - rgb(94, 126, 91)
- - rgb(94 126 91 / 1)
- - hsl(115 16% 43%)
- - hsl(115 16% 43% / 1)
+ - rgb(94 126 91)
+ - hsl(115deg 16% 43%)
+ - hsl(115deg 16% 43%)
  - hsv(115, 28%, 49%)
  - hsva(115, 28%, 49%, 1)
  - #5e7e5bff
@@ -133,13 +133,13 @@
  - null
  - null
  - default: rgb(94 126 91)
- - inverse color: rgb(161 129 164 / 1)
- - setAlpha(0.42): rgb(94 126 91 / 0.42)
+ - inverse color: rgb(161 129 164)
+ - setAlpha(0.42): rgb(94 126 91 / 42%)
 Dumping 'rgba(94 126 91)' in different formats:
  - rgba(94 126 91)
- - rgb(94 126 91 / 1)
- - hsl(115 16% 43%)
- - hsl(115 16% 43% / 1)
+ - rgb(94 126 91)
+ - hsl(115deg 16% 43%)
+ - hsl(115deg 16% 43%)
  - hsv(115, 28%, 49%)
  - hsva(115, 28%, 49%, 1)
  - #5e7e5bff
@@ -148,28 +148,13 @@
  - null
  - null
  - default: rgb(94 126 91)
- - inverse color: rgb(161 129 164 / 1)
- - setAlpha(0.42): rgb(94 126 91 / 0.42)
+ - inverse color: rgb(161 129 164)
+ - setAlpha(0.42): rgb(94 126 91 / 42%)
 Dumping 'rgba(94, 126, 91, 0.5)' in different formats:
- - null
- - rgba(94, 126, 91, 0.5)
- - null
- - hsl(115 16% 43% / 0.5)
- - hsv(115, 28%, 49%)
- - hsva(115, 28%, 49%, 0.5)
- - #5e7e5b80
- - null
- - null
- - null
- - null
- - default: rgb(94 126 91 / 0.5)
- - inverse color: rgb(161 129 164 / 0.5)
- - setAlpha(0.42): rgb(94 126 91 / 0.42)
-Dumping 'rgb(94 126 91 / 50%)' in different formats:
- - null
  - rgb(94 126 91 / 50%)
- - null
- - hsl(115 16% 43% / 0.5)
+ - rgba(94, 126, 91, 0.5)
+ - hsl(115deg 16% 43% / 50%)
+ - hsl(115deg 16% 43% / 50%)
  - hsv(115, 28%, 49%)
  - hsva(115, 28%, 49%, 0.5)
  - #5e7e5b80
@@ -177,14 +162,29 @@
  - null
  - null
  - null
- - default: rgb(94 126 91 / 0.5)
- - inverse color: rgb(161 129 164 / 0.5)
- - setAlpha(0.42): rgb(94 126 91 / 0.42)
+ - default: rgb(94 126 91 / 50%)
+ - inverse color: rgb(161 129 164 / 50%)
+ - setAlpha(0.42): rgb(94 126 91 / 42%)
+Dumping 'rgb(94 126 91 / 50%)' in different formats:
+ - rgb(94 126 91 / 50%)
+ - rgb(94 126 91 / 50%)
+ - hsl(115deg 16% 43% / 50%)
+ - hsl(115deg 16% 43% / 50%)
+ - hsv(115, 28%, 49%)
+ - hsva(115, 28%, 49%, 0.5)
+ - #5e7e5b80
+ - null
+ - null
+ - null
+ - null
+ - default: rgb(94 126 91 / 50%)
+ - inverse color: rgb(161 129 164 / 50%)
+ - setAlpha(0.42): rgb(94 126 91 / 42%)
 Dumping 'hsl(212, 55%, 32%)' in different formats:
  - rgb(37 79 126)
- - rgb(37 79 126 / 1)
+ - rgb(37 79 126)
  - hsl(212, 55%, 32%)
- - hsl(212 55% 32% / 1)
+ - hsl(212deg 55% 32%)
  - hsv(212, 71%, 50%)
  - hsva(212, 71%, 50%, 1)
  - #254f7eff
@@ -192,14 +192,14 @@
  - null
  - null
  - null
- - default: hsl(212 55% 32%)
- - inverse color: rgb(218 176 129 / 1)
- - setAlpha(0.42): rgb(37 79 126 / 0.42)
+ - default: hsl(212deg 55% 32%)
+ - inverse color: rgb(218 176 129)
+ - setAlpha(0.42): rgb(37 79 126 / 42%)
 Dumping 'hsla(212 55% 32%)' in different formats:
  - rgb(37 79 126)
- - rgb(37 79 126 / 1)
+ - rgb(37 79 126)
  - hsla(212 55% 32%)
- - hsl(212 55% 32% / 1)
+ - hsl(212deg 55% 32%)
  - hsv(212, 71%, 50%)
  - hsva(212, 71%, 50%, 1)
  - #254f7eff
@@ -207,13 +207,13 @@
  - null
  - null
  - null
- - default: hsl(212 55% 32%)
- - inverse color: rgb(218 176 129 / 1)
- - setAlpha(0.42): rgb(37 79 126 / 0.42)
+ - default: hsl(212deg 55% 32%)
+ - inverse color: rgb(218 176 129)
+ - setAlpha(0.42): rgb(37 79 126 / 42%)
 Dumping 'hsla(212, 55%, 32%, 0.5)' in different formats:
- - null
- - rgb(37 79 126 / 0.5)
- - null
+ - rgb(37 79 126 / 50%)
+ - rgb(37 79 126 / 50%)
+ - hsl(212deg 55% 32% / 50%)
  - hsla(212, 55%, 32%, 0.5)
  - hsv(212, 71%, 50%)
  - hsva(212, 71%, 50%, 0.5)
@@ -222,13 +222,13 @@
  - null
  - null
  - null
- - default: hsl(212 55% 32% / 0.5)
- - inverse color: rgb(218 176 129 / 0.5)
- - setAlpha(0.42): rgb(37 79 126 / 0.42)
+ - default: hsl(212deg 55% 32% / 50%)
+ - inverse color: rgb(218 176 129 / 50%)
+ - setAlpha(0.42): rgb(37 79 126 / 42%)
 Dumping 'hsla(212  55%  32% /  50%)' in different formats:
- - null
- - rgb(37 79 126 / 0.5)
- - null
+ - rgb(37 79 126 / 50%)
+ - rgb(37 79 126 / 50%)
+ - hsl(212deg 55% 32% / 50%)
  - hsla(212  55%  32% /  50%)
  - hsv(212, 71%, 50%)
  - hsva(212, 71%, 50%, 0.5)
@@ -237,13 +237,13 @@
  - null
  - null
  - null
- - default: hsl(212 55% 32% / 0.5)
- - inverse color: rgb(218 176 129 / 0.5)
- - setAlpha(0.42): rgb(37 79 126 / 0.42)
+ - default: hsl(212deg 55% 32% / 50%)
+ - inverse color: rgb(218 176 129 / 50%)
+ - setAlpha(0.42): rgb(37 79 126 / 42%)
 Dumping 'hsla(212deg 55% 32% / 50%)' in different formats:
- - null
- - rgb(37 79 126 / 0.5)
- - null
+ - rgb(37 79 126 / 50%)
+ - rgb(37 79 126 / 50%)
+ - hsl(212deg 55% 32% / 50%)
  - hsla(212deg 55% 32% / 50%)
  - hsv(212, 71%, 50%)
  - hsva(212, 71%, 50%, 0.5)
@@ -252,14 +252,14 @@
  - null
  - null
  - null
- - default: hsl(212 55% 32% / 0.5)
- - inverse color: rgb(218 176 129 / 0.5)
- - setAlpha(0.42): rgb(37 79 126 / 0.42)
+ - default: hsl(212deg 55% 32% / 50%)
+ - inverse color: rgb(218 176 129 / 50%)
+ - setAlpha(0.42): rgb(37 79 126 / 42%)
 Dumping '#12345678' in different formats:
- - null
- - rgb(18 52 86 / 0.47058823529411764)
- - null
- - hsl(210 65% 20% / 0.47058823529411764)
+ - rgb(18 52 86 / 47%)
+ - rgb(18 52 86 / 47%)
+ - hsl(210deg 65% 20% / 47%)
+ - hsl(210deg 65% 20% / 47%)
  - hsv(210, 79%, 34%)
  - hsva(210, 79%, 34%, 0.47058823529411764)
  - #12345678
@@ -268,13 +268,13 @@
  - null
  - null
  - default: #12345678
- - inverse color: rgb(237 203 169 / 0.47058823529411764)
- - setAlpha(0.42): rgb(18 52 86 / 0.42)
+ - inverse color: rgb(237 203 169 / 47%)
+ - setAlpha(0.42): rgb(18 52 86 / 42%)
 Dumping '#00FFFF' in different formats:
  - rgb(0 255 255)
- - rgb(0 255 255 / 1)
- - hsl(180 100% 50%)
- - hsl(180 100% 50% / 1)
+ - rgb(0 255 255)
+ - hsl(180deg 100% 50%)
+ - hsl(180deg 100% 50%)
  - hsv(180, 100%, 100%)
  - hsva(180, 100%, 100%, 1)
  - #00ffffff
@@ -283,13 +283,13 @@
  - #0ff
  - cyan
  - default: #00ffff
- - inverse color: rgb(255 0 0 / 1)
- - setAlpha(0.42): rgb(0 255 255 / 0.42)
+ - inverse color: rgb(255 0 0)
+ - setAlpha(0.42): rgb(0 255 255 / 42%)
 Dumping '#1234' in different formats:
- - null
- - rgb(17 34 51 / 0.26666666666666666)
- - null
- - hsl(210 50% 13% / 0.26666666666666666)
+ - rgb(17 34 51 / 27%)
+ - rgb(17 34 51 / 27%)
+ - hsl(210deg 50% 13% / 27%)
+ - hsl(210deg 50% 13% / 27%)
  - hsv(210, 67%, 20%)
  - hsva(210, 67%, 20%, 0.26666666666666666)
  - #11223344
@@ -298,13 +298,13 @@
  - null
  - null
  - default: #1234
- - inverse color: rgb(238 221 204 / 0.26666666666666666)
- - setAlpha(0.42): rgb(17 34 51 / 0.42)
+ - inverse color: rgb(238 221 204 / 27%)
+ - setAlpha(0.42): rgb(17 34 51 / 42%)
 Dumping '#0FF' in different formats:
  - rgb(0 255 255)
- - rgb(0 255 255 / 1)
- - hsl(180 100% 50%)
- - hsl(180 100% 50% / 1)
+ - rgb(0 255 255)
+ - hsl(180deg 100% 50%)
+ - hsl(180deg 100% 50%)
  - hsv(180, 100%, 100%)
  - hsva(180, 100%, 100%, 1)
  - #00ffffff
@@ -313,6 +313,6 @@
  - #0FF
  - cyan
  - default: #0ff
- - inverse color: rgb(255 0 0 / 1)
- - setAlpha(0.42): rgb(0 255 255 / 0.42)
+ - inverse color: rgb(255 0 0)
+ - setAlpha(0.42): rgb(0 255 255 / 42%)
 
diff --git a/third_party/blink/web_tests/http/tests/devtools/elements/styles-1/color-aware-property-value-edit-expected.txt b/third_party/blink/web_tests/http/tests/devtools/elements/styles-1/color-aware-property-value-edit-expected.txt
index c083e9a..4008e71 100644
--- a/third_party/blink/web_tests/http/tests/devtools/elements/styles-1/color-aware-property-value-edit-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/styles-1/color-aware-property-value-edit-expected.txt
@@ -10,7 +10,7 @@
 1px solid #f00
 
 Running: editKeywordAsHSL
-1px solid hsl(0 100% 50%)
+1px solid hsl(0deg 100% 50%)
 
 Running: editKeywordAsRGB
 1px solid rgb(255 0 0)
@@ -22,7 +22,7 @@
 #ffe
 
 Running: editHexAsHSL
-hsl(60 100% 97%)
+hsl(60deg 100% 97%)
 
 Running: editHexAsRGB
 rgb(255 255 238)
diff --git a/third_party/blink/web_tests/http/tests/devtools/elements/styles-1/color-swatch-expected.txt b/third_party/blink/web_tests/http/tests/devtools/elements/styles-1/color-swatch-expected.txt
index e2836329..991449de 100644
--- a/third_party/blink/web_tests/http/tests/devtools/elements/styles-1/color-swatch-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/styles-1/color-swatch-expected.txt
@@ -17,5 +17,5 @@
 
 Running: testColorSwatchInComputedRules
 Initial color value: rgb(255, 0, 0)
-After shift-click color value: hsl(0 100% 50%)
+After shift-click color value: hsl(0deg 100% 50%)
 
diff --git a/third_party/blink/web_tests/http/tests/devtools/elements/styles-3/spectrum-expected.txt b/third_party/blink/web_tests/http/tests/devtools/elements/styles-3/spectrum-expected.txt
index 0032124..1bcba848 100644
--- a/third_party/blink/web_tests/http/tests/devtools/elements/styles-3/spectrum-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/styles-3/spectrum-expected.txt
@@ -14,25 +14,25 @@
 Testing: rgb(1, 2, 3)
 rgb(1 2 3)
 Testing: rgba(1, 2, 3, 0.2)
-rgb(1 2 3 / 0.2)
+rgb(1 2 3 / 20%)
 Testing: rgb(1, 2, 3, 0.2)
-rgb(1 2 3 / 0.2)
+rgb(1 2 3 / 20%)
 Testing: rgb(1 2 3 / 20%)
-rgb(1 2 3 / 0.2)
+rgb(1 2 3 / 20%)
 Testing: rgbA(1 2 3)
 rgb(1 2 3)
 Testing: rgba(1.5 2.6 3.1)
 rgb(2 3 3)
 Testing: hsl(1, 100%, 50%)
-hsl(1 100% 50%)
+hsl(1deg 100% 50%)
 Testing: hsl(1 100% 50%)
-hsl(1 100% 50%)
+hsl(1deg 100% 50%)
 Testing: hsla(1, 100%, 50%, 0.2)
-hsl(1 100% 50% / 0.2)
+hsl(1deg 100% 50% / 20%)
 Testing: hsl(1 100% 50% / 20%)
-hsl(1 100% 50% / 0.2)
+hsl(1deg 100% 50% / 20%)
 Testing: hsL(1deg  100% 50%  /  20%)
-hsl(1 100% 50% / 0.2)
+hsl(1deg 100% 50% / 20%)
 --- Testing alpha changes
 Testing: red
 #ff000000
@@ -45,27 +45,27 @@
 Testing: #ABCDEFAA
 #abcdef00
 Testing: rgb(1, 2, 3)
-rgb(1 2 3 / 0)
+rgb(1 2 3 / 0%)
 Testing: rgba(1, 2, 3, 0.2)
-rgb(1 2 3 / 0)
+rgb(1 2 3 / 0%)
 Testing: rgb(1, 2, 3, 0.2)
-rgb(1 2 3 / 0)
+rgb(1 2 3 / 0%)
 Testing: rgb(1 2 3 / 20%)
-rgb(1 2 3 / 0)
+rgb(1 2 3 / 0%)
 Testing: rgbA(1 2 3)
-rgb(1 2 3 / 0)
+rgb(1 2 3 / 0%)
 Testing: rgba(1.5 2.6 3.1)
-rgb(2 3 3 / 0)
+rgb(2 3 3 / 0%)
 Testing: hsl(1, 100%, 50%)
-hsl(1 100% 50% / 0)
+hsl(1deg 100% 50% / 0%)
 Testing: hsl(1 100% 50%)
-hsl(1 100% 50% / 0)
+hsl(1deg 100% 50% / 0%)
 Testing: hsla(1, 100%, 50%, 0.2)
-hsl(1 100% 50% / 0)
+hsl(1deg 100% 50% / 0%)
 Testing: hsl(1 100% 50% / 20%)
-hsl(1 100% 50% / 0)
+hsl(1deg 100% 50% / 0%)
 Testing: hsL(1deg  100% 50%  /  20%)
-hsl(1 100% 50% / 0)
+hsl(1deg 100% 50% / 0%)
 --- Testing _formatViewSwitch()
 Testing: red
 rgb
diff --git a/third_party/blink/web_tests/http/tests/devtools/elements/styles-4/styles-invalid-color-values-expected.txt b/third_party/blink/web_tests/http/tests/devtools/elements/styles-4/styles-invalid-color-values-expected.txt
index 49a2e64..51bb48f 100644
--- a/third_party/blink/web_tests/http/tests/devtools/elements/styles-4/styles-invalid-color-values-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/styles-4/styles-invalid-color-values-expected.txt
@@ -12,7 +12,7 @@
   hexa: #ff0000ff
   shorthexa: #f00f
   rgb: rgb(255 0 0)
-  hsl: hsl(0 100% 50%)
+  hsl: hsl(0deg 100% 50%)
 
 color: #F00
   simple: true
@@ -23,7 +23,7 @@
   hexa: #ff0000ff
   shorthexa: #f00f
   rgb: rgb(255 0 0)
-  hsl: hsl(0 100% 50%)
+  hsl: hsl(0deg 100% 50%)
 
 color: #F00F
   simple: true
@@ -34,7 +34,7 @@
   hexa: #ff0000ff
   shorthexa: #F00F
   rgb: rgb(255 0 0)
-  hsl: hsl(0 100% 50%)
+  hsl: hsl(0deg 100% 50%)
 
 color: #FF0000
   simple: true
@@ -45,7 +45,7 @@
   hexa: #ff0000ff
   shorthexa: #f00f
   rgb: rgb(255 0 0)
-  hsl: hsl(0 100% 50%)
+  hsl: hsl(0deg 100% 50%)
 
 color: #FF0000FF
   simple: true
@@ -56,7 +56,7 @@
   hexa: #FF0000FF
   shorthexa: #f00f
   rgb: rgb(255 0 0)
-  hsl: hsl(0 100% 50%)
+  hsl: hsl(0deg 100% 50%)
 
 color: rgb(255,0,0)
   simple: true
@@ -67,7 +67,7 @@
   hexa: #ff0000ff
   shorthexa: #f00f
   rgb: rgb(255,0,0)
-  hsl: hsl(0 100% 50%)
+  hsl: hsl(0deg 100% 50%)
 
 color: rgb(300,0,0)
   simple: true
@@ -78,7 +78,7 @@
   hexa: #ff0000ff
   shorthexa: #f00f
   rgb: rgb(255 0 0)
-  hsl: hsl(0 100% 50%)
+  hsl: hsl(0deg 100% 50%)
 
 color: rgb(255,-10,0)
   simple: true
@@ -89,7 +89,7 @@
   hexa: #ff0000ff
   shorthexa: #f00f
   rgb: rgb(255 0 0)
-  hsl: hsl(0 100% 50%)
+  hsl: hsl(0deg 100% 50%)
 
 color: rgb(110%, 0%, 0%)
   simple: true
@@ -100,37 +100,37 @@
   hexa: #ff0000ff
   shorthexa: #f00f
   rgb: rgb(255 0 0)
-  hsl: hsl(0 100% 50%)
+  hsl: hsl(0deg 100% 50%)
 
 color: rgba(0,0,0,0.5)
   simple: false
   original: rgba(0,0,0,0.5)
   hexa: #00000080
   shorthexa: null
-  rgb: null
+  rgb: rgb(0 0 0 / 50%)
   rgba: rgba(0,0,0,0.5)
-  hsl: null
-  hsla: hsl(0 0% 0% / 0.5)
+  hsl: hsl(0deg 0% 0% / 50%)
+  hsla: hsl(0deg 0% 0% / 50%)
 
 color: rgb(0,0,0,50%)
   simple: false
   original: rgb(0,0,0,50%)
   hexa: #00000080
   shorthexa: null
-  rgb: null
+  rgb: rgb(0 0 0 / 50%)
   rgba: rgb(0,0,0,50%)
-  hsl: null
-  hsla: hsl(0 0% 0% / 0.5)
+  hsl: hsl(0deg 0% 0% / 50%)
+  hsla: hsl(0deg 0% 0% / 50%)
 
 color: rgb( 0  0   0   /   50%  )
   simple: false
   original: rgb( 0  0   0   /   50%  )
   hexa: #00000080
   shorthexa: null
-  rgb: null
+  rgb: rgb(0 0 0 / 50%)
   rgba: rgb( 0  0   0   /   50%  )
-  hsl: null
-  hsla: hsl(0 0% 0% / 0.5)
+  hsl: hsl(0deg 0% 0% / 50%)
+  hsla: hsl(0deg 0% 0% / 50%)
 
 color: rgb(1 1 1/1)
   simple: true
@@ -139,7 +139,7 @@
   hexa: #010101ff
   shorthexa: null
   rgb: rgb(1 1 1)
-  hsl: hsl(0 0% 0%)
+  hsl: hsl(0deg 0% 0%)
 
 color: rgb(1 1 1/ 1)
   simple: true
@@ -148,7 +148,7 @@
   hexa: #010101ff
   shorthexa: null
   rgb: rgb(1 1 1)
-  hsl: hsl(0 0% 0%)
+  hsl: hsl(0deg 0% 0%)
 
 color: rgba(1.5 1.5 1.5)
   simple: true
@@ -157,7 +157,7 @@
   hexa: #020202ff
   shorthexa: null
   rgb: rgba(1.5 1.5 1.5)
-  hsl: hsl(0 0% 1%)
+  hsl: hsl(0deg 0% 1%)
 
 color: hsl(-120, 100%, 50%)
   simple: true
@@ -201,7 +201,7 @@
   hexa: #000000ff
   shorthexa: #000f
   rgb: rgb(0 0 0)
-  hsl: hsl(0 0% 0%)
+  hsl: hsl(0deg 0% 0%)
 
 color: hsla(-120, -200%, -200%, -5)
   simple: false
@@ -209,19 +209,19 @@
   nickname: transparent
   hexa: #00000000
   shorthexa: #0000
-  rgb: null
-  rgba: rgb(0 0 0 / 0)
-  hsl: null
-  hsla: hsl(0 0% 0% / 0)
+  rgb: rgb(0 0 0 / 0%)
+  rgba: rgb(0 0 0 / 0%)
+  hsl: hsl(0deg 0% 0% / 0%)
+  hsla: hsl(0deg 0% 0% / 0%)
 
 color: hsla(240,100%,50%,0.05)
   simple: false
   original: hsla(240,100%,50%,0.05)
   hexa: #0000ff0d
   shorthexa: null
-  rgb: null
-  rgba: rgb(0 0 255 / 0.05)
-  hsl: null
+  rgb: rgb(0 0 255 / 5%)
+  rgba: rgb(0 0 255 / 5%)
+  hsl: hsl(240deg 100% 50% / 5%)
   hsla: hsla(240,100%,50%,0.05)
 
 color: hsl(200.5,0%,50%)
@@ -241,26 +241,26 @@
   hexa: #7e8081ff
   shorthexa: null
   rgb: rgb(126 128 129)
-  hsl: hsl(200 1% 50%)
+  hsl: hsl(200deg 1% 50%)
 
 color: rgba(0,0,0,.5)
   simple: false
   original: rgba(0,0,0,.5)
   hexa: #00000080
   shorthexa: null
-  rgb: null
+  rgb: rgb(0 0 0 / 50%)
   rgba: rgba(0,0,0,.5)
-  hsl: null
-  hsla: hsl(0 0% 0% / 0.5)
+  hsl: hsl(0deg 0% 0% / 50%)
+  hsla: hsl(0deg 0% 0% / 50%)
 
 color: hsla(.5,.5%,.5%,.5)
   simple: false
   original: hsla(.5,.5%,.5%,.5)
   hexa: #01010180
   shorthexa: null
-  rgb: null
-  rgba: rgb(1 1 1 / 0.5)
-  hsl: null
+  rgb: rgb(1 1 1 / 50%)
+  rgba: rgb(1 1 1 / 50%)
+  hsl: hsl(1deg 0% 1% / 50%)
   hsla: hsla(.5,.5%,.5%,.5)
 
 color: hsla(100.5,50.5%,50.5%,.5)
@@ -268,9 +268,9 @@
   original: hsla(100.5,50.5%,50.5%,.5)
   hexa: #6ac14180
   shorthexa: null
-  rgb: null
-  rgba: rgb(106 193 65 / 0.5)
-  hsl: null
+  rgb: rgb(106 193 65 / 50%)
+  rgba: rgb(106 193 65 / 50%)
+  hsl: hsl(101deg 50% 51% / 50%)
   hsla: hsla(100.5,50.5%,50.5%,.5)
 
 color: rgba(255, 0, 0, -5)
@@ -278,10 +278,10 @@
   original: rgba(255, 0, 0, -5)
   hexa: #ff000000
   shorthexa: #f000
-  rgb: null
-  rgba: rgb(255 0 0 / 0)
-  hsl: null
-  hsla: hsl(0 100% 50% / 0)
+  rgb: rgb(255 0 0 / 0%)
+  rgba: rgb(255 0 0 / 0%)
+  hsl: hsl(0deg 100% 50% / 0%)
+  hsla: hsl(0deg 100% 50% / 0%)
 
 color: rgba(255, 0, 0, 5)
   simple: true
@@ -292,7 +292,7 @@
   hexa: #ff0000ff
   shorthexa: #f00f
   rgb: rgb(255 0 0)
-  hsl: hsl(0 100% 50%)
+  hsl: hsl(0deg 100% 50%)
 
 Running: testInvalidColors
 
diff --git a/third_party/blink/web_tests/http/tests/devtools/extensions/extensions-timeline-api-expected.txt b/third_party/blink/web_tests/http/tests/devtools/extensions/extensions-timeline-api-expected.txt
index 9ccdf16..55d5be3 100644
--- a/third_party/blink/web_tests/http/tests/devtools/extensions/extensions-timeline-api-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/extensions/extensions-timeline-api-expected.txt
@@ -23,10 +23,10 @@
 Timeline Flame Chart
 Group: long extension name
 Level 0
-Extension record X 1 (hsl(261 82% 70% / 0.7))
-Extension record X 2 (hsl(230 88% 70% / 0.7))
+Extension record X 1 (hsl(261deg 82% 70% / 70%))
+Extension record X 2 (hsl(230deg 88% 70% / 70%))
 Level 1
-Extension record I 1 (hsl(298 100% 70% / 0.7))
-Extension record B+E (hsl(292 100% 70% / 0.7))
+Extension record I 1 (hsl(298deg 100% 70% / 70%))
+Extension record B+E (hsl(292deg 100% 70% / 70%))
 All tests done.