From ca0c8bdfa08abdc05f30fb01f61c85bd6fa0142f Mon Sep 17 00:00:00 2001 From: Brendan Kenny Date: Wed, 20 Feb 2019 13:14:58 -0500 Subject: [PATCH 1/3] deps: update cssstyle to support CSS4 colors --- .../test/audits/themed-omnibox-test.js | 10 ++ .../test/lib/manifest-parser-test.js | 95 +++++++++++++++++++ package.json | 2 +- yarn.lock | 8 +- 4 files changed, 110 insertions(+), 5 deletions(-) diff --git a/lighthouse-core/test/audits/themed-omnibox-test.js b/lighthouse-core/test/audits/themed-omnibox-test.js index 806be9d7c2e9..a8f462c4c11a 100644 --- a/lighthouse-core/test/audits/themed-omnibox-test.js +++ b/lighthouse-core/test/audits/themed-omnibox-test.js @@ -126,6 +126,16 @@ 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); + console.log(JSON.stringify(result, null, 2)); + 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 f07d83d66925..35f8e46e58f5 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.only('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 99831c2e16a7..7d41407a05ea 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 3cd4975e0515..dfc9dcdb715b 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" From cc9fbf2e81b77651a09b7e25a6dcf37b46772561 Mon Sep 17 00:00:00 2001 From: Brendan Kenny Date: Wed, 20 Feb 2019 13:34:00 -0500 Subject: [PATCH 2/3] lint --- lighthouse-core/test/audits/themed-omnibox-test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lighthouse-core/test/audits/themed-omnibox-test.js b/lighthouse-core/test/audits/themed-omnibox-test.js index a8f462c4c11a..b4fd98a42ec5 100644 --- a/lighthouse-core/test/audits/themed-omnibox-test.js +++ b/lighthouse-core/test/audits/themed-omnibox-test.js @@ -132,7 +132,6 @@ describe('PWA: themed omnibox audit', () => { const context = generateMockAuditContext(); const result = await ThemedOmniboxAudit.audit(artifacts, context); - console.log(JSON.stringify(result, null, 2)); assert.equal(result.rawValue, true); assert.equal(result.explanation, undefined); }); From 0ebe4f0b837512f78f1d7d822ae4b434c347d6de Mon Sep 17 00:00:00 2001 From: Brendan Kenny Date: Wed, 20 Feb 2019 13:43:37 -0500 Subject: [PATCH 3/3] - only --- lighthouse-core/test/lib/manifest-parser-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lighthouse-core/test/lib/manifest-parser-test.js b/lighthouse-core/test/lib/manifest-parser-test.js index 35f8e46e58f5..20b56ad564be 100644 --- a/lighthouse-core/test/lib/manifest-parser-test.js +++ b/lighthouse-core/test/lib/manifest-parser-test.js @@ -456,7 +456,7 @@ describe('Manifest Parser', function() { }); }); - describe.only('background_color, theme_color', () => { + describe('background_color, theme_color', () => { /** * Create a manifest with the specified colors and return the parsed result. * @param {string} backgroundColor