diff --git a/lib/commons/color/parse-text-shadows.js b/lib/commons/color/parse-text-shadows.js index ca6a00d23e..386c4b028b 100644 --- a/lib/commons/color/parse-text-shadows.js +++ b/lib/commons/color/parse-text-shadows.js @@ -16,9 +16,8 @@ export default function parseTextShadows(textShadow) { while (str) { const colorMatch = - str.match(/^rgba?\([0-9,.\s]+\)/i) || - str.match(/^[a-z]+/i) || - str.match(/^#[0-9a-f]+/i); + // match a color name or function (e.g. `oklch(39.2% 0.4 0 / 0.5)`) or a hex value + str.match(/^[a-z]+(\([^)]+\))?/i) || str.match(/^#[0-9a-f]+/i); const pixelMatch = str.match(/^([0-9.-]+)px/i) || str.match(/^(0)/); if (colorMatch) { @@ -48,7 +47,7 @@ export default function parseTextShadows(textShadow) { shadows.push(current); str = str.substr(1).trim(); } else { - throw new Error(`Unable to process text-shadows: ${textShadow}`); + throw new Error(`Unable to process text-shadows: ${str}`); } } diff --git a/test/commons/color/parse-text-shadows.js b/test/commons/color/parse-text-shadows.js index 35385092c6..6452ca9e9e 100644 --- a/test/commons/color/parse-text-shadows.js +++ b/test/commons/color/parse-text-shadows.js @@ -33,6 +33,35 @@ describe('axe.commons.color.parseTextShadows', () => { }); }); + it('accepts named colors', () => { + const shadows = parseTextShadows('red 1px 2px 3px, blue 4px 5px 6px'); + assert.deepEqual(shadows[0], { + pixels: [1, 2, 3], + colorStr: 'red' + }); + assert.deepEqual(shadows[1], { + pixels: [4, 5, 6], + colorStr: 'blue' + }); + }); + + it('accepts different color functions', () => { + const shadows = parseTextShadows(` + rgb(0, 202, 148) 0px 0px, + hsl(165.58deg 100% 35.07% / .5) 0px 0px, + lch(65 49.19 167.45) 0px 0px, + oklch(60% 0.57 181) 0px 0px, + lab(65 -48.01 10.69) 0px 0px, + color(xyz-d65 0.26 0.44 0.35 / 1) 0px 0px, + `); + assert.equal(shadows[0].colorStr, 'rgb(0, 202, 148)'); + assert.equal(shadows[1].colorStr, 'hsl(165.58deg 100% 35.07% / .5)'); + assert.equal(shadows[2].colorStr, 'lch(65 49.19 167.45)'); + assert.equal(shadows[3].colorStr, 'oklch(60% 0.57 181)'); + assert.equal(shadows[4].colorStr, 'lab(65 -48.01 10.69)'); + assert.equal(shadows[5].colorStr, 'color(xyz-d65 0.26 0.44 0.35 / 1)'); + }); + it('sets default blur to 0 when omitted', () => { const shadows = parseTextShadows('1px 2px #000, 4px 5px #fff'); assert.deepEqual(shadows[0], { diff --git a/test/integration/rules/color-contrast/color-contrast.html b/test/integration/rules/color-contrast/color-contrast.html index dd3a114312..5a6cc1e690 100644 --- a/test/integration/rules/color-contrast/color-contrast.html +++ b/test/integration/rules/color-contrast/color-contrast.html @@ -448,3 +448,14 @@
hello
+ +
+ Hello world +
diff --git a/test/integration/rules/color-contrast/color-contrast.json b/test/integration/rules/color-contrast/color-contrast.json index 0cd24e9ad7..a5a8aa0355 100644 --- a/test/integration/rules/color-contrast/color-contrast.json +++ b/test/integration/rules/color-contrast/color-contrast.json @@ -36,7 +36,8 @@ ["#pass19"], ["#pass20"], ["#pass21"], - ["#pass22"] + ["#pass22"], + ["#pass23"] ], "incomplete": [ ["#canttell1"],