From f7d7324322f094c501a4d935c5440dd50eeb6c28 Mon Sep 17 00:00:00 2001 From: Brendan Kenny Date: Mon, 25 Feb 2019 11:11:00 -0800 Subject: [PATCH] deps: update cssstyle to parse more named colors, CSS4 colors (#7283) --- .../test/audits/themed-omnibox-test.js | 9 ++ .../test/lib/manifest-parser-test.js | 95 +++++++++++++++++++ package.json | 2 +- yarn.lock | 8 +- 4 files changed, 109 insertions(+), 5 deletions(-) diff --git a/lighthouse-core/test/audits/themed-omnibox-test.js b/lighthouse-core/test/audits/themed-omnibox-test.js index 806be9d7c2..b4fd98a42e 100644 --- a/lighthouse-core/test/audits/themed-omnibox-test.js +++ b/lighthouse-core/test/audits/themed-omnibox-test.js @@ -126,6 +126,15 @@ describe('PWA: themed omnibox audit', () => { }); }); + it('succeeds when theme-color has a CSS4 nickname content value', async () => { + const artifacts = generateMockArtifacts(); + artifacts.MetaElements = [{name: 'theme-color', content: 'rebeccapurple'}]; // <3 + const context = generateMockAuditContext(); + + const result = await ThemedOmniboxAudit.audit(artifacts, context); + assert.equal(result.rawValue, true); + assert.equal(result.explanation, undefined); + }); it('fails if HTML theme color is good, but manifest themecolor is bad', () => { const artifacts = generateMockArtifacts(); diff --git a/lighthouse-core/test/lib/manifest-parser-test.js b/lighthouse-core/test/lib/manifest-parser-test.js index f07d83d669..20b56ad564 100644 --- a/lighthouse-core/test/lib/manifest-parser-test.js +++ b/lighthouse-core/test/lib/manifest-parser-test.js @@ -455,4 +455,99 @@ describe('Manifest Parser', function() { assert.equal(url0, undefined); }); }); + + describe('background_color, theme_color', () => { + /** + * Create a manifest with the specified colors and return the parsed result. + * @param {string} backgroundColor + * @param {string} themeColor + */ + function getParsedManifest(backgroundColor, themeColor) { + return manifestParser(`{ + "background_color": "${backgroundColor}", + "theme_color": "${themeColor}" + }`, EXAMPLE_MANIFEST_URL, EXAMPLE_DOC_URL); + } + + it('correctly parses hex colors', () => { + const bgColor = '#123'; + const themeColor = '#1a5e25'; + const parsedManifest = getParsedManifest(bgColor, themeColor).value; + + assert.strictEqual(parsedManifest.background_color.value, bgColor); + assert.strictEqual(parsedManifest.background_color.warning, undefined); + assert.strictEqual(parsedManifest.theme_color.value, themeColor); + assert.strictEqual(parsedManifest.theme_color.warning, undefined); + }); + + it('correctly parses CSS3 and CSS4 nickname colors', () => { + const bgColor = 'cornflowerblue'; + const themeColor = 'rebeccapurple'; // <3 + const parsedManifest = getParsedManifest(bgColor, themeColor).value; + + assert.strictEqual(parsedManifest.background_color.value, bgColor); + assert.strictEqual(parsedManifest.background_color.warning, undefined); + assert.strictEqual(parsedManifest.theme_color.value, themeColor); + assert.strictEqual(parsedManifest.theme_color.warning, undefined); + }); + + it('correctly parses RGB/RGBA colors', () => { + const bgColor = 'rgb(222, 184, 135)'; + const themeColor = 'rgba(5%, 10%, 20%, 0.4)'; + const parsedManifest = getParsedManifest(bgColor, themeColor).value; + + assert.strictEqual(parsedManifest.background_color.value, bgColor); + assert.strictEqual(parsedManifest.background_color.warning, undefined); + assert.strictEqual(parsedManifest.theme_color.value, themeColor); + assert.strictEqual(parsedManifest.theme_color.warning, undefined); + }); + + it('correctly parses HSL/HSLA colors', () => { + const bgColor = 'hsl(120, 100%, 50%)'; + const themeColor = 'hsla(120, 20%, 56%, 0.4)'; + const parsedManifest = getParsedManifest(bgColor, themeColor).value; + + assert.strictEqual(parsedManifest.background_color.value, bgColor); + assert.strictEqual(parsedManifest.background_color.warning, undefined); + assert.strictEqual(parsedManifest.theme_color.value, themeColor); + assert.strictEqual(parsedManifest.theme_color.warning, undefined); + }); + + it('warns on invalid colors', () => { + const bgColor = 'notarealcolor'; + const themeColor = '#0123456789'; + const parsedManifest = getParsedManifest(bgColor, themeColor).value; + + assert.deepStrictEqual(parsedManifest.background_color, { + raw: bgColor, + value: undefined, + warning: 'ERROR: color parsing failed.', + }); + assert.deepStrictEqual(parsedManifest.theme_color, { + raw: themeColor, + value: undefined, + warning: 'ERROR: color parsing failed.', + }); + }); + + it('warns when colors are not strings', () => { + const bgColor = 15; + const themeColor = false; + const parsedManifest = manifestParser(`{ + "background_color": ${bgColor}, + "theme_color": ${themeColor} + }`, EXAMPLE_MANIFEST_URL, EXAMPLE_DOC_URL).value; + + assert.deepStrictEqual(parsedManifest.background_color, { + raw: bgColor, + value: undefined, + warning: 'ERROR: expected a string.', + }); + assert.deepStrictEqual(parsedManifest.theme_color, { + raw: themeColor, + value: undefined, + warning: 'ERROR: expected a string.', + }); + }); + }); }); diff --git a/package.json b/package.json index 99831c2e16..7d41407a05 100644 --- a/package.json +++ b/package.json @@ -140,7 +140,7 @@ "axe-core": "3.1.2", "chrome-launcher": "^0.10.5", "configstore": "^3.1.1", - "cssstyle": "1.1.1", + "cssstyle": "1.2.1", "details-element-polyfill": "2.2.0", "esprima": "^4.0.1", "http-link-header": "^0.8.0", diff --git a/yarn.lock b/yarn.lock index 3cd4975e05..dfc9dcdb71 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2336,10 +2336,10 @@ cssom@^0.3.4: resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.4.tgz#8cd52e8a3acfd68d3aed38ee0a640177d2f9d797" integrity sha512-+7prCSORpXNeR4/fUP3rL+TzqtiFfhMvTd7uEqMdgPvLPt4+uzFUeufx5RHjGTACCargg/DiEt/moMQmvnfkog== -cssstyle@1.1.1, cssstyle@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.1.1.tgz#18b038a9c44d65f7a8e428a653b9f6fe42faf5fb" - integrity sha512-364AI1l/M5TYcFH83JnOH/pSqgaNnKmYgKrm0didZMGKWjQB60dymwWy1rKUgL3J1ffdq9xVi2yGLHdSjjSNog== +cssstyle@1.2.1, cssstyle@^1.1.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.2.1.tgz#3aceb2759eaf514ac1a21628d723d6043a819495" + integrity sha512-7DYm8qe+gPx/h77QlCyFmX80+fGaE/6A/Ekl0zaszYOubvySO2saYFdQ78P29D0UsULxFKCetDGNaNRUdSF+2A== dependencies: cssom "0.3.x"