core(manifest): remove css color verification

core/audits/themed-omnibox.js

@@ -4,8 +4,6 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
-import cssParsers from 'cssstyle/lib/parsers.js';
-
 import MultiCheckAudit from './multi-check-audit.js';
 import {ManifestValues} from '../computed/manifest-values.js';
 import * as i18n from '../lib/i18n/i18n.js';
@@ -28,8 +26,10 @@ const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
  *
  * Requirements:
  *   * manifest is not empty
- *   * manifest has a valid theme_color
- *   * HTML has a valid theme-color meta
+ *   * manifest has a theme_color
+ *   * HTML has a theme-color meta
+ *
+ * Color validity is explicitly not checked.
  */
 
 class ThemedOmnibox extends MultiCheckAudit {
@@ -47,14 +47,6 @@ class ThemedOmnibox extends MultiCheckAudit {
     };
   }
 
-  /**
-   * @param {string} color
-   * @return {boolean}
-   */
-  static isValidColor(color) {
-    return cssParsers.valueType(color) === cssParsers.TYPES.COLOR;
-  }
-
   /**
    * @param {LH.Artifacts.MetaElement|undefined} themeColorMeta
    * @param {Array<string>} failures
@@ -63,8 +55,8 @@ class ThemedOmnibox extends MultiCheckAudit {
     if (!themeColorMeta) {
       // TODO(#7238): i18n
       failures.push('No `<meta name="theme-color">` tag found');
-    } else if (!ThemedOmnibox.isValidColor(themeColorMeta.content || '')) {
-      failures.push('The theme-color meta tag did not contain a valid CSS color');
+    } else if (!themeColorMeta.content) {
+      failures.push('The theme-color meta tag did not contain a content value');
     }
   }
 

core/lib/manifest-parser.js

@@ -4,8 +4,6 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
-import cssParsers from 'cssstyle/lib/parsers.js';
-
 const ALLOWED_DISPLAY_VALUES = [
   'fullscreen',
   'standalone',
@@ -29,14 +27,6 @@ const ALLOWED_ORIENTATION_VALUES = [
   'landscape-secondary',
 ];
 
-/**
- * @param {string} color
- * @return {boolean}
- */
-function isValidColor(color) {
-  return cssParsers.valueType(color) === cssParsers.TYPES.COLOR;
-}
-
 /**
  * @param {*} raw
  * @param {boolean=} trim
@@ -72,12 +62,6 @@ function parseColor(raw) {
     return color;
   }
 
-  // Use color parser to check CSS3 Color parsing.
-  if (!isValidColor(color.raw)) {
-    color.value = undefined;
-    color.warning = 'ERROR: color parsing failed.';
-  }
-
   return color;
 }
 

core/test/audits/splash-screen-test.js

@@ -98,18 +98,6 @@ describe('PWA: splash screen audit', () => {
       });
     });
 
-    it('fails when a manifest contains invalid background color', () => {
-      const artifacts = generateMockArtifacts(JSON.stringify({
-        background_color: 'no',
-      }));
-      const context = generateMockAuditContext();
-
-      return SplashScreenAudit.audit(artifacts, context).then(result => {
-        assert.strictEqual(result.score, 0);
-        assert.ok(result.explanation.includes('background_color'), result.explanation);
-      });
-    });
-
     it('fails when a manifest contains no theme color', () => {
       const artifacts = generateMockArtifacts();
       artifacts.WebAppManifest.value.theme_color.value = undefined;

core/test/audits/themed-omnibox-test.js

@@ -91,16 +91,6 @@ describe('PWA: themed omnibox audit', () => {
     });
   });
 
-  it('fails and warns when theme-color has an invalid CSS color', () => {
-    const artifacts = generateMockArtifacts();
-    artifacts.MetaElements = [{name: 'theme-color', content: '#1234567'}];
-    const context = generateMockAuditContext();
-    return ThemedOmniboxAudit.audit(artifacts, context).then(result => {
-      assert.equal(result.score, 0);
-      assert.ok(result.explanation.includes('valid CSS color'));
-    });
-  });
-
   it('succeeds when theme-color present in the html', () => {
     const artifacts = generateMockArtifacts();
     artifacts.MetaElements = [{name: 'theme-color', content: '#fafa33'}];

core/test/computed/manifest-values-test.js

@@ -91,19 +91,6 @@ describe('ManifestValues computed artifact', () => {
       assert.equal(colorResults.every(i => i.passing === false), true);
     });
 
-    it('fails when a minimal manifest contains an invalid background_color', async () => {
-      const WebAppManifest = noUrlManifestParser(JSON.stringify({
-        background_color: 'no',
-        theme_color: 'no',
-      }));
-      const InstallabilityErrors = {errors: []};
-      const artifacts = {WebAppManifest, InstallabilityErrors};
-
-      const results = await ManifestValues.request(artifacts, getMockContext());
-      const colorResults = results.allChecks.filter(i => i.id.includes('Color'));
-      assert.equal(colorResults.every(i => i.passing === false), true);
-    });
-
     it('succeeds when a minimal manifest contains a valid background_color', async () => {
       const WebAppManifest = noUrlManifestParser(JSON.stringify({
         background_color: '#FAFAFA',

core/test/lib/manifest-parser-test.js

@@ -547,23 +547,6 @@ describe('Manifest Parser', function() {
       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;

package.json

@@ -188,7 +188,6 @@
     "chrome-launcher": "^0.15.1",
     "configstore": "^5.0.1",
     "csp_evaluator": "1.1.1",
-    "cssstyle": "1.2.1",
     "enquirer": "^2.3.6",
     "http-link-header": "^0.8.0",
     "intl-messageformat": "^4.4.0",

yarn.lock

@@ -2777,7 +2777,7 @@ cssom@0.3.x, cssom@^0.3.4:
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
   integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
 
-cssstyle@1.2.1, cssstyle@^1.1.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==