Include HWB support in devtools-frontend webtests.
Re-enable two webtests that were temporarily disabled while adding
support for the HWB color format to the devtools frontend.
Additionally, add further tests for the new color format.
Fixed: 1288883
Change-Id: I1c3ca0a5077e419037236996e71bb1e8d871cd30
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3516254
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Cr-Commit-Position: refs/heads/main@{#980845}
diff --git a/third_party/blink/web_tests/TestExpectations b/third_party/blink/web_tests/TestExpectations
index 0f2ecbba..0ce34aed2 100644
--- a/third_party/blink/web_tests/TestExpectations
+++ b/third_party/blink/web_tests/TestExpectations
@@ -7651,10 +7651,6 @@
# Sheriff 2022-03-01
crbug.com/1302043 [ Linux ] virtual/plz-dedicated-worker/external/wpt/resource-timing/object-not-found-after-cross-origin-redirect.html [ Pass Timeout ]
-# Temporarily disable to land related CL in DevTools
-crbug.com/1288883 http/tests/devtools/elements/styles-3/spectrum.js [ Skip ]
-crbug.com/1288883 http/tests/devtools/elements/styles-4/styles-invalid-color-values.js [ Skip ]
-
# Sheriff 2022-03-03
crbug.com/1302571 virtual/threaded/http/tests/devtools/isolated-code-cache/cross-origin-test.js [ Skip ]
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 1bcba848..1c4229f 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
@@ -33,6 +33,14 @@
hsl(1deg 100% 50% / 20%)
Testing: hsL(1deg 100% 50% / 20%)
hsl(1deg 100% 50% / 20%)
+Testing: hwb(1 100% 50%)
+hwb(0deg 67% 33%)
+Testing: hwb(100grad 100% 50% / 0.2)
+hwb(0deg 67% 33% / 20%)
+Testing: hwb(1rad 20% 50% / 20%)
+hwb(57deg 20% 50% / 20%)
+Testing: hwB(1deg 20% 50% / 20%)
+hwb(1deg 20% 50% / 20%)
--- Testing alpha changes
Testing: red
#ff000000
@@ -66,6 +74,14 @@
hsl(1deg 100% 50% / 0%)
Testing: hsL(1deg 100% 50% / 20%)
hsl(1deg 100% 50% / 0%)
+Testing: hwb(1 100% 50%)
+hwb(0deg 67% 33% / 0%)
+Testing: hwb(100grad 100% 50% / 0.2)
+hwb(0deg 67% 33% / 0%)
+Testing: hwb(1rad 20% 50% / 20%)
+hwb(57deg 20% 50% / 0%)
+Testing: hwB(1deg 20% 50% / 20%)
+hwb(1deg 20% 50% / 0%)
--- Testing _formatViewSwitch()
Testing: red
rgb
@@ -84,35 +100,47 @@
hsl
Testing: rgb(1, 2, 3)
hsl
-hex
+hwb
Testing: rgba(1, 2, 3, 0.2)
hsl
-hex
+hwb
Testing: rgb(1, 2, 3, 0.2)
hsl
-hex
+hwb
Testing: rgb(1 2 3 / 20%)
hsl
-hex
+hwb
Testing: rgbA(1 2 3)
hsl
-hex
+hwb
Testing: rgba(1.5 2.6 3.1)
hsl
-hex
+hwb
Testing: hsl(1, 100%, 50%)
+hwb
hex
-rgb
Testing: hsl(1 100% 50%)
+hwb
hex
-rgb
Testing: hsla(1, 100%, 50%, 0.2)
+hwb
hex
-rgb
Testing: hsl(1 100% 50% / 20%)
+hwb
+hex
+Testing: hsL(1deg 100% 50% / 20%)
+hwb
+hex
+Testing: hwb(1 100% 50%)
hex
rgb
-Testing: hsL(1deg 100% 50% / 20%)
+Testing: hwb(100grad 100% 50% / 0.2)
+hex
+rgb
+Testing: hwb(1rad 20% 50% / 20%)
+hex
+rgb
+Testing: hwB(1deg 20% 50% / 20%)
hex
rgb
diff --git a/third_party/blink/web_tests/http/tests/devtools/elements/styles-3/spectrum.js b/third_party/blink/web_tests/http/tests/devtools/elements/styles-3/spectrum.js
index 87a60c1f..02d7995 100644
--- a/third_party/blink/web_tests/http/tests/devtools/elements/styles-3/spectrum.js
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/styles-3/spectrum.js
@@ -43,7 +43,9 @@
{string: 'rgb(1 2 3 / 20%)', format: cf.RGB}, {string: 'rgbA(1 2 3)', format: cf.RGB},
{string: 'rgba(1.5 2.6 3.1)', format: cf.RGB}, {string: 'hsl(1, 100%, 50%)', format: cf.HSL},
{string: 'hsl(1 100% 50%)', format: cf.HSL}, {string: 'hsla(1, 100%, 50%, 0.2)', format: cf.HSLA},
- {string: 'hsl(1 100% 50% / 20%)', format: cf.HSL}, {string: 'hsL(1deg 100% 50% / 20%)', format: cf.HSL}
+ {string: 'hsl(1 100% 50% / 20%)', format: cf.HSL}, {string: 'hsL(1deg 100% 50% / 20%)', format: cf.HSL},
+ {string: 'hwb(1 100% 50%)', format: cf.HWB}, {string: 'hwb(100grad 100% 50% / 0.2)', format: cf.HWB},
+ {string: 'hwb(1rad 20% 50% / 20%)', format: cf.HWB}, {string: 'hwB(1deg 20% 50% / 20%)', format: cf.HWB}
];
TestRunner.addResult('--- Testing colorString()');
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 51bb48f..96931e59 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
@@ -13,6 +13,7 @@
shorthexa: #f00f
rgb: rgb(255 0 0)
hsl: hsl(0deg 100% 50%)
+ hwb: hwb(0deg 0% 0%)
color: #F00
simple: true
@@ -24,6 +25,7 @@
shorthexa: #f00f
rgb: rgb(255 0 0)
hsl: hsl(0deg 100% 50%)
+ hwb: hwb(0deg 0% 0%)
color: #F00F
simple: true
@@ -35,6 +37,7 @@
shorthexa: #F00F
rgb: rgb(255 0 0)
hsl: hsl(0deg 100% 50%)
+ hwb: hwb(0deg 0% 0%)
color: #FF0000
simple: true
@@ -46,6 +49,7 @@
shorthexa: #f00f
rgb: rgb(255 0 0)
hsl: hsl(0deg 100% 50%)
+ hwb: hwb(0deg 0% 0%)
color: #FF0000FF
simple: true
@@ -57,6 +61,7 @@
shorthexa: #f00f
rgb: rgb(255 0 0)
hsl: hsl(0deg 100% 50%)
+ hwb: hwb(0deg 0% 0%)
color: rgb(255,0,0)
simple: true
@@ -68,6 +73,7 @@
shorthexa: #f00f
rgb: rgb(255,0,0)
hsl: hsl(0deg 100% 50%)
+ hwb: hwb(0deg 0% 0%)
color: rgb(300,0,0)
simple: true
@@ -79,6 +85,7 @@
shorthexa: #f00f
rgb: rgb(255 0 0)
hsl: hsl(0deg 100% 50%)
+ hwb: hwb(0deg 0% 0%)
color: rgb(255,-10,0)
simple: true
@@ -90,6 +97,7 @@
shorthexa: #f00f
rgb: rgb(255 0 0)
hsl: hsl(0deg 100% 50%)
+ hwb: hwb(0deg 0% 0%)
color: rgb(110%, 0%, 0%)
simple: true
@@ -101,6 +109,7 @@
shorthexa: #f00f
rgb: rgb(255 0 0)
hsl: hsl(0deg 100% 50%)
+ hwb: hwb(0deg 0% 0%)
color: rgba(0,0,0,0.5)
simple: false
@@ -111,6 +120,7 @@
rgba: rgba(0,0,0,0.5)
hsl: hsl(0deg 0% 0% / 50%)
hsla: hsl(0deg 0% 0% / 50%)
+ hwb: hwb(0deg 0% 100% / 50%)
color: rgb(0,0,0,50%)
simple: false
@@ -121,6 +131,7 @@
rgba: rgb(0,0,0,50%)
hsl: hsl(0deg 0% 0% / 50%)
hsla: hsl(0deg 0% 0% / 50%)
+ hwb: hwb(0deg 0% 100% / 50%)
color: rgb( 0 0 0 / 50% )
simple: false
@@ -131,6 +142,7 @@
rgba: rgb( 0 0 0 / 50% )
hsl: hsl(0deg 0% 0% / 50%)
hsla: hsl(0deg 0% 0% / 50%)
+ hwb: hwb(0deg 0% 100% / 50%)
color: rgb(1 1 1/1)
simple: true
@@ -140,6 +152,7 @@
shorthexa: null
rgb: rgb(1 1 1)
hsl: hsl(0deg 0% 0%)
+ hwb: hwb(0deg 0% 100%)
color: rgb(1 1 1/ 1)
simple: true
@@ -149,6 +162,7 @@
shorthexa: null
rgb: rgb(1 1 1)
hsl: hsl(0deg 0% 0%)
+ hwb: hwb(0deg 0% 100%)
color: rgba(1.5 1.5 1.5)
simple: true
@@ -158,6 +172,7 @@
shorthexa: null
rgb: rgba(1.5 1.5 1.5)
hsl: hsl(0deg 0% 1%)
+ hwb: hwb(0deg 1% 99%)
color: hsl(-120, 100%, 50%)
simple: true
@@ -169,6 +184,7 @@
shorthexa: #00ff
rgb: rgb(0 0 255)
hsl: hsl(-120, 100%, 50%)
+ hwb: hwb(240deg 0% 0%)
color: hsl(-120deg, 100%, 50%)
simple: true
@@ -180,6 +196,7 @@
shorthexa: #00ff
rgb: rgb(0 0 255)
hsl: hsl(-120deg, 100%, 50%)
+ hwb: hwb(240deg 0% 0%)
color: hsl(-120, 200%, 200%)
simple: true
@@ -191,6 +208,7 @@
shorthexa: #ffff
rgb: rgb(255 255 255)
hsl: hsl(-120, 200%, 200%)
+ hwb: hwb(0deg 100% 0%)
color: hsl(-120, -200%, -200%)
simple: true
@@ -202,6 +220,7 @@
shorthexa: #000f
rgb: rgb(0 0 0)
hsl: hsl(0deg 0% 0%)
+ hwb: hwb(0deg 0% 100%)
color: hsla(-120, -200%, -200%, -5)
simple: false
@@ -213,6 +232,7 @@
rgba: rgb(0 0 0 / 0%)
hsl: hsl(0deg 0% 0% / 0%)
hsla: hsl(0deg 0% 0% / 0%)
+ hwb: hwb(0deg 0% 100% / 0%)
color: hsla(240,100%,50%,0.05)
simple: false
@@ -223,6 +243,7 @@
rgba: rgb(0 0 255 / 5%)
hsl: hsl(240deg 100% 50% / 5%)
hsla: hsla(240,100%,50%,0.05)
+ hwb: hwb(240deg 0% 0% / 5%)
color: hsl(200.5,0%,50%)
simple: true
@@ -233,6 +254,7 @@
shorthexa: null
rgb: rgb(128 128 128)
hsl: hsl(200.5,0%,50%)
+ hwb: hwb(0deg 50% 50%)
color: hsla(200,1.5%,50%,1)
simple: true
@@ -242,6 +264,7 @@
shorthexa: null
rgb: rgb(126 128 129)
hsl: hsl(200deg 1% 50%)
+ hwb: hwb(200deg 49% 49%)
color: rgba(0,0,0,.5)
simple: false
@@ -252,6 +275,7 @@
rgba: rgba(0,0,0,.5)
hsl: hsl(0deg 0% 0% / 50%)
hsla: hsl(0deg 0% 0% / 50%)
+ hwb: hwb(0deg 0% 100% / 50%)
color: hsla(.5,.5%,.5%,.5)
simple: false
@@ -262,6 +286,7 @@
rgba: rgb(1 1 1 / 50%)
hsl: hsl(1deg 0% 1% / 50%)
hsla: hsla(.5,.5%,.5%,.5)
+ hwb: hwb(1deg 0% 99% / 50%)
color: hsla(100.5,50.5%,50.5%,.5)
simple: false
@@ -272,6 +297,102 @@
rgba: rgb(106 193 65 / 50%)
hsl: hsl(101deg 50% 51% / 50%)
hsla: hsla(100.5,50.5%,50.5%,.5)
+ hwb: hwb(101deg 26% 25% / 50%)
+
+color: hwb(-120 200% 200%)
+ simple: true
+ original: hwb(-120 200% 200%)
+ nickname: grey
+ hex: #808080
+ hexa: #808080ff
+ shorthexa: null
+ rgb: rgb(128 128 128)
+ hsl: hsl(0deg 0% 50%)
+ hwb: hwb(-120 200% 200%)
+
+color: hwb(-120 -200% -200%)
+ simple: true
+ original: hwb(-120 -200% -200%)
+ nickname: blue
+ hex: #0000ff
+ shorthex: #00f
+ hexa: #0000ffff
+ shorthexa: #00ff
+ rgb: rgb(0 0 255)
+ hsl: hsl(240deg 100% 50%)
+ hwb: hwb(240deg 0% 0%)
+
+color: hwb(-120 -200% -200% / -5)
+ simple: false
+ original: hwb(-120 -200% -200% / -5)
+ hexa: #0000ff00
+ shorthexa: #00f0
+ rgb: rgb(0 0 255 / 0%)
+ rgba: rgb(0 0 255 / 0%)
+ hsl: hsl(240deg 100% 50% / 0%)
+ hsla: hsl(240deg 100% 50% / 0%)
+ hwb: hwb(240deg 0% 0% / 0%)
+
+color: hwb(240 100% 50% / 0.05)
+ simple: false
+ original: hwb(240 100% 50% / 0.05)
+ hexa: #aaaaaa0d
+ shorthexa: null
+ rgb: rgb(170 170 170 / 5%)
+ rgba: rgb(170 170 170 / 5%)
+ hsl: hsl(0deg 0% 67% / 5%)
+ hsla: hsl(0deg 0% 67% / 5%)
+ hwb: hwb(0deg 67% 33% / 5%)
+
+color: hwb(200.5 0% 50%)
+ simple: true
+ original: hwb(200.5 0% 50%)
+ hex: #005480
+ hexa: #005480ff
+ shorthexa: null
+ rgb: rgb(0 84 128)
+ hsl: hsl(201deg 100% 25%)
+ hwb: hwb(200.5 0% 50%)
+
+color: hwb(200 1.5% 50% / 1)
+ simple: true
+ original: hwb(200 1.5% 50% / 1)
+ hex: #045680
+ hexa: #045680ff
+ shorthexa: null
+ rgb: rgb(4 86 128)
+ hsl: hsl(200deg 94% 26%)
+ hwb: hwb(200deg 2% 50%)
+
+color: hwb(100grad 20% 30%)
+ simple: true
+ original: hwb(100grad 20% 30%)
+ hex: #73b333
+ hexa: #73b333ff
+ shorthexa: null
+ rgb: rgb(115 179 51)
+ hsl: hsl(90deg 56% 45%)
+ hwb: hwb(100grad 20% 30%)
+
+color: hwb(1rad 5% 15%)
+ simple: true
+ original: hwb(1rad 5% 15%)
+ hex: #d9d00d
+ hexa: #d9d00dff
+ shorthexa: null
+ rgb: rgb(217 208 13)
+ hsl: hsl(57deg 89% 45%)
+ hwb: hwb(1rad 5% 15%)
+
+color: hwb(1turn 25% 15%)
+ simple: true
+ original: hwb(1turn 25% 15%)
+ hex: #d94040
+ hexa: #d94040ff
+ shorthexa: null
+ rgb: rgb(217 64 64)
+ hsl: hsl(0deg 67% 55%)
+ hwb: hwb(1turn 25% 15%)
color: rgba(255, 0, 0, -5)
simple: false
@@ -282,6 +403,7 @@
rgba: rgb(255 0 0 / 0%)
hsl: hsl(0deg 100% 50% / 0%)
hsla: hsl(0deg 100% 50% / 0%)
+ hwb: hwb(0deg 0% 0% / 0%)
color: rgba(255, 0, 0, 5)
simple: true
@@ -293,6 +415,7 @@
shorthexa: #f00f
rgb: rgb(255 0 0)
hsl: hsl(0deg 100% 50%)
+ hwb: hwb(0deg 0% 0%)
Running: testInvalidColors
@@ -336,3 +459,17 @@
SUCCESS: parsed invalid color hsla to null
+SUCCESS: parsed invalid color hwb(0,0,1) to null
+
+SUCCESS: parsed invalid color hwb(0 0% 0) to null
+
+SUCCESS: parsed invalid color hwb(a b c) to null
+
+SUCCESS: parsed invalid color hwb(0 0 0 / 0) to null
+
+SUCCESS: parsed invalid color hwb(0 0% 0% 0) to null
+
+SUCCESS: parsed invalid color hwb(0 turn 0 0 0) to null
+
+SUCCESS: parsed invalid color hwb to null
+
diff --git a/third_party/blink/web_tests/http/tests/devtools/elements/styles-4/styles-invalid-color-values.js b/third_party/blink/web_tests/http/tests/devtools/elements/styles-4/styles-invalid-color-values.js
index b3b8085..0384ba5 100644
--- a/third_party/blink/web_tests/http/tests/devtools/elements/styles-4/styles-invalid-color-values.js
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/styles-4/styles-invalid-color-values.js
@@ -23,7 +23,11 @@
'hsla(-120, -200%, -200%, -5)', // clipped to hsla(0,0%,0%,0)
'hsla(240,100%,50%,0.05)', 'hsl(200.5,0%,50%)', 'hsla(200,1.5%,50%,1)', 'rgba(0,0,0,.5)', 'hsla(.5,.5%,.5%,.5)',
'hsla(100.5,50.5%,50.5%,.5)',
-
+ 'hwb(-120 200% 200%)', // clipped to hwb(240 100% 100%) = hwb(0 50% 50%)
+ 'hwb(-120 -200% -200%)', // clipped to hwb(240 100% 100%)
+ 'hwb(-120 -200% -200% / -5)', // clipped to hwb(0 0% 0% / 0%)
+ 'hwb(240 100% 50% / 0.05)', 'hwb(200.5 0% 50%)', 'hwb(200 1.5% 50% / 1)', 'hwb(0 0 0 /.5)', 'hwb(.5 .5% .5% .5)',
+ 'hwb(100grad 20% 30%)', 'hwb(1rad 5% 15%)', 'hwb(1turn 25% 15%)',
// Each of these has their alpha clipped [0.0, 1.0].
'rgba(255, 0, 0, -5)', // clipped to rgba(255,0,0,0)
'rgba(255, 0, 0, 5)', // clipped to rgba(255,0,0,1)
@@ -33,7 +37,8 @@
// An invalid color, eg a value for a shorthand like 'border' which can have a color
'none', '#00000', '#ggg', 'rgb(a,b,c)', 'rgb(a,b,c,d)', 'rgba(0 0 0 1%)', 'rgba(0,0,0,)',
'rgba(0 0, 0)', 'rgba(1 1 1 / )', 'rgb(1 1 / 1)', 'rgb(1 1/1)', 'hsl(0,0,0)', 'hsl(0%, 0%, 0%)',
- 'hsla(0,,0,1)', 'hsl(0, 0%, 0)', 'hsl(a,b,c)', 'hsla(0,0,0,0)', 'hsla(0 0% 0% 0)', 'hsla(0 turn, 0, 0, 0)', 'hsla'
+ 'hsla(0,,0,1)', 'hsl(0, 0%, 0)', 'hsl(a,b,c)', 'hsla(0,0,0,0)', 'hsla(0 0% 0% 0)', 'hsla(0 turn, 0, 0, 0)', 'hsla',
+ 'hwb(0,0,1)', 'hwb(0 0% 0)', 'hwb(a b c)', 'hwb(0 0 0 / 0)', 'hwb(0 0% 0% 0)', 'hwb(0 turn 0 0 0)', 'hwb'
];
TestRunner.runTestSuite([
@@ -74,6 +79,9 @@
// Simple colors do not have RGBA and HSLA representations.
if (!color.hasAlpha() && (colorFormat === cf.RGBA || colorFormat === cf.HSLA))
continue;
+ // Skip alpha representation for HWB - only exists internally
+ if (colorFormat === cf.HWBA)
+ continue;
// Advanced colors do not have HEX representations.
if (color.hasAlpha() && (colorFormat === cf.ShortHEX || colorFormat === cf.HEX))
continue;
