[css-typed-om] Whitelist supported properties.

This patch whitelists all our supported properties. Any property that is not supported will return a base CSSStyleValue. This ensures that we don't accidentally produce unexpected results for properties that we haven't tested it. We also add a few new properties to support, bringing the total number of property tests to 50. We also remove support for 'z-index' because it uses <integers> which we don't support yet. transition-duration is failing tests because we currently convert ms to seconds when we compute, which is incorrect. Some paint/layout tests depend on properties that are not whitelisted, so we've changed them: - border-radius -> margin-left - align-items -> empty-cell Bug: 816402 Change-Id: I84d2fd8a15df92624122f0c1ecf4f7c42f928928 Reviewed-on: https://chromium-review.googlesource.com/942651Reviewed-by: nainar <nainar@chromium.org> Commit-Queue: Darren Shen <shend@chromium.org> Cr-Commit-Position: refs/heads/master@{#540397}

[css-typed-om] Whitelist supported properties.
This patch whitelists all our supported properties. Any property that is not supported will return a base CSSStyleValue. This ensures that we don't accidentally produce unexpected results for properties that we haven't tested it. We also add a few new properties to support, bringing the total number of property tests to 50. We also remove support for 'z-index' because it uses <integers> which we don't support yet. transition-duration is failing tests because we currently convert ms to seconds when we compute, which is incorrect. Some paint/layout tests depend on properties that are not whitelisted, so we've changed them: - border-radius -> margin-left - align-items -> empty-cell Bug: 816402 Change-Id: I84d2fd8a15df92624122f0c1ecf4f7c42f928928 Reviewed-on: https://chromium-review.googlesource.com/942651Reviewed-by: nainar <nainar@chromium.org> Commit-Queue: Darren Shen <shend@chromium.org> Cr-Commit-Position: refs/heads/master@{#540397}
1ccb08d5 · Darren Shen · Commit Bot · 97c6f1f8 · 1ccb08d5 · 1ccb08d5
Commit 1ccb08d5 authored Mar 02, 2018 by Darren Shen Committed by Commit Bot Mar 02, 2018
23 changed files
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-layout-api/style-map-multi-ref.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-layout-api/style-map-multi-ref.html
@@ -2,8 +2,8 @@
 <style>
 .result {
  background: green;
-  border-radius: 2px;
  margin: 10px;
+  margin-left: 2px;

  width: 100px;
  height: 100px;

--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-layout-api/style-map-multi.https.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-layout-api/style-map-multi.https.html
@@ -12,7 +12,7 @@

  /* Properties under test. */
  --foo: bar;
-  border-radius: 2px;
+  margin-left: 2px;
 }

 @supports (display: layout(test)) {
@@ -30,7 +30,7 @@
 <script id="code" type="text/worklet">
 registerLayout('test', class {
  static get inputProperties() {
-    return [ '--bar', '--foo', 'align-items', 'border-top-left-radius'];
+    return [ '--bar', '--foo', 'empty-cells', 'margin-left'];
  }

  *intrinsicSizes() {}
@@ -38,8 +38,8 @@ registerLayout('test', class {
    const expected = [
      {property: '--bar', value: '[CSSUnparsedValue=]'},
      {property: '--foo', value: '[CSSUnparsedValue= bar]'},
-      {property: 'align-items', value: '[CSSKeywordValue=normal]'},
-      {property: 'border-top-left-radius', value: '[CSSUnitValue=2px]'},
+      {property: 'empty-cells', value: '[CSSKeywordValue=show]'},
+      {property: 'margin-left', value: '[CSSUnitValue=2px]'},
    ];

    const actual = Array.from(styleMap.keys()).sort().map((property) => {

--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-layout-api/style-map-ref.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-layout-api/style-map-ref.html
@@ -2,8 +2,8 @@
 <style>
 .result {
  background: green;
-  border-radius: 2px;
  margin: 10px;
+  margin-left: 2px;

  width: 100px;
  height: 100px;

--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-layout-api/style-map.https.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-layout-api/style-map.https.html
@@ -12,7 +12,7 @@

  /* Properties under test. */
  --foo: bar;
-  border-radius: 2px;
+  margin-left: 2px;
 }

 @supports (display: layout(test)) {
@@ -60,8 +60,8 @@ const tmpl = (test, idx) => {
 const tests = [
  {property: '--bar', expected: '[CSSUnparsedValue=]'},
  {property: '--foo', expected: '[CSSUnparsedValue= bar]'},
-  {property: 'align-items', expected: '[CSSKeywordValue=normal]'},
-  {property: 'border-top-left-radius', expected: '[CSSUnitValue=2px]'},
+  {property: 'empty-cells', expected: '[CSSKeywordValue=show]'},
+  {property: 'margin-left', expected: '[CSSUnitValue=2px]'},
 ];

 const workletSource = tests.map(tmpl).join('\n');

--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/style-background-image-ref.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/style-background-image-ref.html
 <!DOCTYPE html>
 <html>
 <body>
-<canvas id ="canvas" width="100" height="100" style="border-radius: 2px"></canvas>
+<canvas id ="canvas" width="100" height="100" style="margin-left: 2px"></canvas>
 <script>
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext("2d");

--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/style-background-image.https.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/style-background-image.https.html
@@ -5,7 +5,7 @@
 .container {
  width: 100px;
  height: 100px;
-  border-radius: 2px;
+  margin-left: 2px;
  --foo: bar;
 }

@@ -24,8 +24,8 @@ registerPaint('geometry', class {
        return [
            '--bar',
            '--foo',
-            'align-items',
-            'border-top-left-radius',
+            'empty-cells',
+            'margin-left',
        ];
    }
    paint(ctx, geom, styleMap) {
@@ -45,9 +45,9 @@ registerPaint('geometry', class {
            ctx.strokeStyle = 'red';
        if (serializedStrings[1] != "--foo: [CSSUnparsedValue= bar]")
            ctx.strokeStyle = 'blue';
-        if (serializedStrings[2] != "align-items: [CSSKeywordValue=normal]")
+        if (serializedStrings[2] != "empty-cells: [CSSKeywordValue=show]")
            ctx.strokeStyle = 'yellow';
-        if (serializedStrings[3] != "border-top-left-radius: [CSSUnitValue=2px]")
+        if (serializedStrings[3] != "margin-left: [CSSUnitValue=2px]")
            ctx.strokeStyle = 'cyan';
        ctx.lineWidth = 4;
        ctx.strokeRect(0, 0, geom.width, geom.height);

--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/style-before-pseudo-ref.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/style-before-pseudo-ref.html
@@ -2,17 +2,17 @@
 <html>
 <style>
 div {
-    border-radius: 3px;
+    margin-left: 3px;
 }
 div::before {
    width: 100px;
    height: 100px;
-    border-radius: 2px;
+    margin-left: 2px;
    content: 'foo';
    color: rgba(0, 0, 0, 0);
 }
 canvas{
-    border-radius: 2px;
+    margin-left: 2px;
    display: block;
    position: relative;
    top: -1em;

--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/style-before-pseudo.https.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/style-before-pseudo.https.html
@@ -3,7 +3,7 @@
 <link rel="match" href="style-before-pseudo-ref.html">
 <style>
 div {
-    border-radius: 3px;
+    margin-left: 3px;
 }

 div::before {
@@ -13,7 +13,7 @@ div::before {
    color: rgba(0, 0, 0, 0);

    background-image: paint(geometry);
-    border-radius: 2px;
+    margin-left: 2px;
    --foo: bar;
 }
 </style>
@@ -28,7 +28,7 @@ registerPaint('geometry', class {
        return [
            '--bar',
            '--foo',
-            'border-top-left-radius',
+            'margin-left',
        ];
    }
    paint(ctx, geom, styleMap) {
@@ -48,7 +48,7 @@ registerPaint('geometry', class {
            ctx.strokeStyle = 'red';
        if (serializedStrings[1] != "--foo: [CSSUnparsedValue= bar]")
            ctx.strokeStyle = 'blue';
-        if (serializedStrings[2] != "border-top-left-radius: [CSSUnitValue=2px]")
+        if (serializedStrings[2] != "margin-left: [CSSUnitValue=2px]")
            ctx.strokeStyle = 'yellow';
        ctx.lineWidth = 4;
        ctx.strokeRect(0, 0, geom.width, geom.height);

--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/stylevalue-normalization/normalize-numeric.tentative.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/stylevalue-normalization/normalize-numeric.tentative.html
@@ -30,7 +30,7 @@ test(t => {
 }, 'Normalizing a <dimension> returns a CSSUnitValue with the correct unit');

 test(t => {
-  test_numeric_normalization(t, 'z-index', '0', CSS.number(0));
+  test_numeric_normalization(t, 'opacity', '0', CSS.number(0));
 }, 'Normalizing a <number> with a unitless zero returns 0');

 test(t => {

--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/computed/computed.tentative-expected.txt
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/computed/computed.tentative-expected.txt
-This is a testharness.js-based test.
-FAIL Computed StylePropertyMap contains every CSS property assert_not_equals: got disallowed value null
-PASS Computed StylePropertyMap contains CSS property declarations in style rules
-PASS Computed StylePropertyMap contains custom property declarations in style rules
-PASS Computed StylePropertyMap contains CSS property declarations in inline styles
-PASS Computed StylePropertyMap contains custom property declarations in inline rules
-PASS Computed StylePropertyMap contains computed values and not resolved values
-PASS Computed StylePropertyMap is live
-Harness: the test ran to completion.
-
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/z-index.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/z-index.html
 <!doctype html>
 <meta charset="utf-8">
-<title>'z-index' property</title>
+<title>'backface-visibility' property</title>
 <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
 <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
 <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
@@ -13,11 +13,9 @@
 <script>
 'use strict';

-runPropertyTests('z-index', [
-  { syntax: 'auto'},
-  // FIXME: This also supports <integer> but the testharness
-  // doesn't support that yet.
-  // { syntax: '<integer>' }
+runPropertyTests('backface-visibility', [
+  { syntax: 'visible' },
+  { syntax: 'hidden' },
 ]);

 </script>
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/border-collapse.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/border-collapse.html
+<!doctype html>
+<meta charset="utf-8">
+<title>'border-collapse' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runPropertyTests('border-collapse', [
+  { syntax: 'separate' },
+  { syntax: 'collapse' },
+]);
+
+</script>
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/direction.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/direction.html
+<!doctype html>
+<meta charset="utf-8">
+<title>'direction' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runPropertyTests('direction', [
+  { syntax: 'ltr' },
+  { syntax: 'rtl' },
+]);
+
+</script>
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/empty-cells.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/empty-cells.html
+<!doctype html>
+<meta charset="utf-8">
+<title>'empty-cells' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runPropertyTests('empty-cells', [
+  { syntax: 'show' },
+  { syntax: 'hide' },
+]);
+
+</script>
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/list-style-image.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/list-style-image.html
+<!doctype html>
+<meta charset="utf-8">
+<title>'list-style-image' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runPropertyTests('list-style-image', [
+  { syntax: 'none' },
+  { syntax: '<image>' },
+]);
+
+</script>
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/overflow-anchor.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/overflow-anchor.html
+<!doctype html>
+<meta charset="utf-8">
+<title>'overflow-anchor' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runPropertyTests('overflow-anchor', [
+  { syntax: 'auto' },
+  { syntax: 'none' },
+]);
+
+</script>
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/resize.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/resize.html
+<!doctype html>
+<meta charset="utf-8">
+<title>'resize' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runPropertyTests('resize', [
+  { syntax: 'none' },
+  { syntax: 'both' },
+  { syntax: 'horizontal' },
+  { syntax: 'vertical' },
+]);
+
+</script>
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/transition-duration-expected.txt
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/transition-duration-expected.txt
+This is a testharness.js-based test.
+PASS Can set 'transition-duration' to CSS-wide keywords
+PASS Can set 'transition-duration' to var() references
+FAIL Can set 'transition-duration' to a time assert_approx_equals: expected -3.14 +/- 0.000001 but got -0.00314
+PASS Setting 'transition-duration' to a length throws TypeError
+PASS Setting 'transition-duration' to a percent throws TypeError
+PASS Setting 'transition-duration' to a number throws TypeError
+PASS Setting 'transition-duration' to a position throws TypeError
+PASS Setting 'transition-duration' to a transform throws TypeError
+Harness: the test ran to completion.
+
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/transition-duration.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/transition-duration.html
+<meta charset="utf-8">
+<title>'transition-duration' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+// FIXME: transition-duration is list-valued. Run list-valued tests here too.
+runPropertyTests('transition-duration', [
+  { syntax: '<time>' },
+]);
+
+</script>
--- a/third_party/WebKit/LayoutTests/typedcssom/computedstyle/numbers.html
+++ b/third_party/WebKit/LayoutTests/typedcssom/computedstyle/numbers.html
-<!DOCTYPE html>
-<script src="../../resources/testharness.js"></script>
-<script src="../../resources/testharnessreport.js"></script>
-
-<div id="testElement"></div>
-
-<script>
-
-EPSILON = 0.000001;
-
-var properties = {
-  'animation-iteration-count': 1,
-  'column-count': 2,
-  'opacity': 0.3,
-  'orphans': 4,
-  'widows': 5,
-};
-
-var computedMap = testElement.computedStyleMap();
-
-test(function() {
-  for (var property in properties) {
-    var value = properties[property];
-    testElement.style[property] = "" + value;
-    var result = computedMap.get(property);
-    assert_equals(result.constructor.name, CSSUnitValue.name);
-    assert_approx_equals(result.value, value, EPSILON);
-  }
-}, "Single valued CSSUnitValues can be retrieved from Computed StyleMap");
-
-test(function() {
-  testElement.style.animationIterationCount = "6.2, 9.8, 1";
-
-  var result = computedMap.getAll('animation-iteration-count');
-  assert_equals(result.length, 3);
-  assert_equals(result[0].constructor.name, CSSUnitValue.name);
-  assert_equals(result[1].constructor.name, CSSUnitValue.name);
-  assert_equals(result[2].constructor.name, CSSUnitValue.name);
-  assert_approx_equals(result[0].value, 6.2, EPSILON);
-  assert_approx_equals(result[1].value, 9.8, EPSILON);
-  assert_approx_equals(result[2].value, 1, EPSILON);
-}, "Can retrieve list of CSSUnitValues from list-valued property");
-
-</script>
--- a/third_party/WebKit/LayoutTests/typedcssom/inlinestyle/numbers.html
+++ b/third_party/WebKit/LayoutTests/typedcssom/inlinestyle/numbers.html
-<!DOCTYPE html>
-<script src="../../resources/testharness.js"></script>
-<script src="../../resources/testharnessreport.js"></script>
-
-<div id="testElement"></div>
-
-<script>
-
-var gettingProperties = [
-  'animation-iteration-count',
-  'column-count',
-  'line-height',
-  'opacity',
-  'orphans',
-  'widows',
-  'z-index'
-];
-
-test(function() {
-  for (var i = 0; i < gettingProperties.length; i++) {
-    var value = 10 * (i + 1);
-    testElement.style[gettingProperties[i]] = "" + value;
-    var result = testElement.attributeStyleMap.get(gettingProperties[i]);
-    assert_equals(result.constructor.name, CSSUnitValue.name,
-        "result from " + gettingProperties[i].name);
-    assert_equals(result.value, value);
-  }
-}, "Single valued CSSUnitValues can be retrieved from Inline StyleMap");
-
-test(function() {
-  testElement.style.animationIterationCount = "6.2, 9.8, 1";
-
-  var result = testElement.attributeStyleMap.getAll('animation-iteration-count');
-  assert_equals(result.length, 3);
-  assert_equals(result[0].constructor.name, CSSUnitValue.name);
-  assert_equals(result[1].constructor.name, CSSUnitValue.name);
-  assert_equals(result[2].constructor.name, CSSUnitValue.name);
-  assert_equals(result[0].value, 6.2);
-  assert_equals(result[1].value, 9.8);
-  assert_equals(result[2].value, 1);
-}, "Can retrieve list of CSSUnitValues from list-valued property");
-
-</script>
--- a/third_party/WebKit/Source/core/css/CSSProperties.json5
+++ b/third_party/WebKit/Source/core/css/CSSProperties.json5
@@ -1645,6 +1645,7 @@
      type_name: "StyleImage",
      computed_style_custom_functions: ["getter", "setter"],
      custom_apply_functions_value: true,
+      keywords: ["none"]
    },
    {
      name: "list-style-position",

--- a/third_party/WebKit/Source/core/css/cssom/StyleValueFactory.cpp
+++ b/third_party/WebKit/Source/core/css/cssom/StyleValueFactory.cpp
@@ -91,6 +91,80 @@ CSSStyleValue* CreateStyleValueWithPropertyInternal(CSSPropertyID property_id,
  return nullptr;
 }

+bool IsPropertySupported(CSSPropertyID property_id) {
+  switch (property_id) {
+    case CSSPropertyVariable:
+    case CSSPropertyAnimationDirection:
+    case CSSPropertyTransitionDuration:
+    case CSSPropertyColor:
+    case CSSPropertyDirection:
+    case CSSPropertyFontStyle:
+    case CSSPropertyFontWeight:
+    case CSSPropertyBackfaceVisibility:
+    case CSSPropertyBackgroundColor:
+    case CSSPropertyBackgroundImage:
+    case CSSPropertyBorderBottomColor:
+    case CSSPropertyBorderBottomStyle:
+    case CSSPropertyBorderBottomWidth:
+    case CSSPropertyBorderCollapse:
+    case CSSPropertyBorderImageSource:
+    case CSSPropertyBorderLeftColor:
+    case CSSPropertyBorderLeftStyle:
+    case CSSPropertyBorderLeftWidth:
+    case CSSPropertyBorderRightColor:
+    case CSSPropertyBorderRightStyle:
+    case CSSPropertyBorderRightWidth:
+    case CSSPropertyBorderTopColor:
+    case CSSPropertyBorderTopStyle:
+    case CSSPropertyBorderTopWidth:
+    case CSSPropertyBottom:
+    case CSSPropertyBoxSizing:
+    case CSSPropertyCaretColor:
+    case CSSPropertyClear:
+    case CSSPropertyColumnRuleColor:
+    case CSSPropertyDisplay:
+    case CSSPropertyEmptyCells:
+    case CSSPropertyFloat:
+    case CSSPropertyHeight:
+    case CSSPropertyLeft:
+    case CSSPropertyLineHeight:
+    case CSSPropertyListStyleImage:
+    case CSSPropertyListStylePosition:
+    case CSSPropertyMarginBottom:
+    case CSSPropertyMarginLeft:
+    case CSSPropertyMarginRight:
+    case CSSPropertyMarginTop:
+    case CSSPropertyObjectPosition:
+    case CSSPropertyOpacity:
+    case CSSPropertyOutlineColor:
+    case CSSPropertyOutlineStyle:
+    case CSSPropertyOverflowAnchor:
+    case CSSPropertyOverflowX:
+    case CSSPropertyOverflowY:
+    case CSSPropertyPaddingBottom:
+    case CSSPropertyPaddingLeft:
+    case CSSPropertyPaddingRight:
+    case CSSPropertyPaddingTop:
+    case CSSPropertyPosition:
+    case CSSPropertyResize:
+    case CSSPropertyRight:
+    case CSSPropertyShapeOutside:
+    case CSSPropertyTextAlign:
+    case CSSPropertyTextDecorationColor:
+    case CSSPropertyTextDecorationStyle:
+    case CSSPropertyTextTransform:
+    case CSSPropertyTop:
+    case CSSPropertyTransform:
+    case CSSPropertyVerticalAlign:
+    case CSSPropertyVisibility:
+    case CSSPropertyWhiteSpace:
+    case CSSPropertyWidth:
+      return true;
+    default:
+      return false;
+  }
+}
+
 CSSStyleValue* CreateStyleValueWithProperty(CSSPropertyID property_id,
                                            const CSSValue& value) {
  // These cannot be overridden by individual properties.
@@ -105,6 +179,9 @@ CSSStyleValue* CreateStyleValueWithProperty(CSSPropertyID property_id,
    return CSSUnparsedValue::FromCSSValue(*variable_data);
  }

+  if (!IsPropertySupported(property_id))
+    return CSSUnsupportedStyleValue::Create(property_id, value);
+
  CSSStyleValue* style_value =
      CreateStyleValueWithPropertyInternal(property_id, value);
  if (style_value)