Bug 1473441 [wpt PR 11792] - [css-properties-values-api] Require PropertyDescriptor.inherits., a=testonly
authorAnders Hartvoll Ruud <andruud@chromium.org>
Sat, 07 Jul 2018 08:07:03 +0000
changeset 426167 77deadcbf7c15bca5235f8be3d61be7350e2cf81
parent 426166 b7105ab2b442ba0b7557b1aa7a2b6e0b8dc189ff
child 426168 bfcf0e22481d20cefb223bffbd990581cfe8dc3a
push id34267
push userrgurzau@mozilla.com
push dateWed, 11 Jul 2018 22:05:21 +0000
treeherdermozilla-central@3aca103e4915 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1473441, 11792, 860289, 1126303, 572731
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1473441 [wpt PR 11792] - [css-properties-values-api] Require PropertyDescriptor.inherits., a=testonly Automatic update from web-platform-tests[css-properties-values-api] Require PropertyDescriptor.inherits. As of a recent spec change, the 'inherits' field must now be set. See https://drafts.css-houdini.org/css-properties-values-api-1/#registering-custom-properties. This patch changes all calls to CSS.registerProperty (that are missing 'inherits') such that 'inherits' is explicitly set to 'false', which was the old default. In wpt/css/css-properties-values-api/register-property.html, I have added a new test to very that we throw an exception if it's omitted. Note that CSS.registerProperty API is an unshipped feature behind the CSSVariables2 flag. R=mstensho@chromium.org Bug: 860289 Change-Id: I14aa02d40c69e0ff6d1160160a8f772cb5159092 Reviewed-on: https://chromium-review.googlesource.com/1126303 Commit-Queue: Anders Ruud <andruud@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#572731} -- wpt-commits: ac8b4953a09fa7e7d7490cea8af26ab88d061dcb wpt-pr: 11792
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-paint-api/registered-properties-in-custom-paint.https.html
testing/web-platform/tests/css/css-properties-values-api/register-property-syntax-parsing.html
testing/web-platform/tests/css/css-properties-values-api/register-property.html
testing/web-platform/tests/css/css-properties-values-api/registered-properties-inheritance.html
testing/web-platform/tests/css/css-properties-values-api/registered-property-computation.html
testing/web-platform/tests/css/css-properties-values-api/registered-property-cssom.html
testing/web-platform/tests/css/css-properties-values-api/registered-property-initial.html
testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html
testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -526068,17 +526068,17 @@
    "43b210e27fec1e601eedf1cf8964d185b7f34751",
    "reftest"
   ],
   "css/css-paint-api/parse-input-arguments-ref.html": [
    "6133bd65ef569456f58f1e501d81e088256bdc0a",
    "support"
   ],
   "css/css-paint-api/registered-properties-in-custom-paint.https.html": [
-   "199e7dc0b76ee3bb099cc9b560a9ed2458335011",
+   "4b96517f4e5abfd3398a2eabdb0bf5a93f136052",
    "reftest"
   ],
   "css/css-paint-api/resources/html5.png": [
    "0b71ad4f2c95d41419082c2f1a2fc8370b14ebd2",
    "support"
   ],
   "css/css-paint-api/style-background-image-ref.html": [
    "60c0edf8a619bd28978207909132b8e3a0bf035e",
@@ -526448,37 +526448,37 @@
    "7f8a5b4d9047c07378473362acb3d001e70d5663",
    "support"
   ],
   "css/css-properties-values-api/META.yml": [
    "01384b56d5bbbb358e42778192d6893e425ca8ea",
    "support"
   ],
   "css/css-properties-values-api/register-property-syntax-parsing.html": [
-   "b065f4840b3c1deb4a2f8a59428e102f2ae11686",
+   "4d4ed39f6fa2b9a86692cc6f3ded6c58e6710642",
    "testharness"
   ],
   "css/css-properties-values-api/register-property.html": [
-   "df61ce5dd13847deaa9b7165dd1277c1ddefb646",
+   "df060d9f929b49e7fe10f54eff9402436a6394ae",
    "testharness"
   ],
   "css/css-properties-values-api/registered-properties-inheritance.html": [
-   "bee1726786f02027c0c1564adee385e2265cb3d3",
+   "b6ba19fea76d9d881afe0364c27438737ed79f3b",
    "testharness"
   ],
   "css/css-properties-values-api/registered-property-computation.html": [
-   "43bd84a7ea93849f2c08633e7246d5eb84ad84ce",
+   "e5241ea91d80edd7e7bd87ef3073d1976656e6d3",
    "testharness"
   ],
   "css/css-properties-values-api/registered-property-cssom.html": [
-   "01035477e322cd4465fd53619592cc2afe11e203",
+   "d24cfa3deb7465c4aa394e0f3a2dee244f35bb3a",
    "testharness"
   ],
   "css/css-properties-values-api/registered-property-initial.html": [
-   "90a089424b1c884a4ce6fe1684eed3ca03055158",
+   "5f395fa3944bfe1a636a00ec836e9822dbfe3751",
    "testharness"
   ],
   "css/css-properties-values-api/support/alt/alt.css": [
    "9497bedbe2a13e5412c6d58fcaccaffce44797ab",
    "support"
   ],
   "css/css-properties-values-api/support/alt/alt.js": [
    "0a9a8e1621ae44a94177d84b0183adfa514c21de",
@@ -526496,21 +526496,21 @@
    "bd7bbb7cfc8ca930399abcf886c3da0d446725eb",
    "support"
   ],
   "css/css-properties-values-api/url-resolution.html": [
    "582f4f05a8b48035c3369c8ce29252e845450cfb",
    "testharness"
   ],
   "css/css-properties-values-api/var-reference-registered-properties-cycles.html": [
-   "bc061780caa0085fca5b003c1aed68c7b162eabd",
+   "d8c831026c8ca0177b0974a5d6dd5938545af78e",
    "testharness"
   ],
   "css/css-properties-values-api/var-reference-registered-properties.html": [
-   "bdaa0efd1894244a44350f3001a2ae40c35c752b",
+   "4830a313175aac4cdb30b614c9d8c8a6e4714819",
    "testharness"
   ],
   "css/css-pseudo/META.yml": [
    "8036b3e54e2c0bb937b611a1c06017b00eb440d9",
    "support"
   ],
   "css/css-pseudo/first-letter-001-ref.html": [
    "f53ee70c3b61a9f812a9a44afb1364040563f473",
--- a/testing/web-platform/tests/css/css-paint-api/registered-properties-in-custom-paint.https.html
+++ b/testing/web-platform/tests/css/css-paint-api/registered-properties-in-custom-paint.https.html
@@ -49,19 +49,19 @@ registerPaint('geometry', class {
         ctx.lineWidth = 4;
         ctx.strokeRect(0, 0, geom.width, geom.height);
     }
 });
 </script>
 
 <script>
     try {
-      CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px'});
-      CSS.registerProperty({name: '--length-initial', syntax: '<length>', initialValue: '20px'});
-      CSS.registerProperty({name: '--number', syntax: '<number>', initialValue: '0'});
+      CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px', inherits: false});
+      CSS.registerProperty({name: '--length-initial', syntax: '<length>', initialValue: '20px', inherits: false});
+      CSS.registerProperty({name: '--number', syntax: '<number>', initialValue: '0', inherits: false});
       importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent);
     } catch(e) {
       document.body.textContent = e;
       takeScreenshot();
     }
 </script>
 </body>
 </html>
--- a/testing/web-platform/tests/css/css-properties-values-api/register-property-syntax-parsing.html
+++ b/testing/web-platform/tests/css/css-properties-values-api/register-property-syntax-parsing.html
@@ -5,25 +5,25 @@
 <script src="/resources/testharnessreport.js"></script>
 <script>
 test_count = 0;
 
 function assert_valid(syntax, initialValue) {
     // No actual assertions, this just shouldn't throw
     test(function() {
         var name = '--syntax-test-' + (test_count++);
-        CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue});
+        CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false});
     }, "syntax:'" + syntax + "', initialValue:'" + initialValue + "' is valid");
 }
 
 function assert_invalid(syntax, initialValue) {
     test(function(){
         var name = '--syntax-test-' + (test_count++);
         assert_throws(new SyntaxError(),
-            () => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue}));
+            () => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false}));
     }, "syntax:'" + syntax + "', initialValue:'" + initialValue + "' is invalid");
 }
 
 assert_valid("*", "a");
 assert_valid(" * ", "b");
 assert_valid("<length>", "2px");
 assert_valid(" <number>", "5");
 assert_valid("<percentage> ", "10%");
--- a/testing/web-platform/tests/css/css-properties-values-api/register-property.html
+++ b/testing/web-platform/tests/css/css-properties-values-api/register-property.html
@@ -11,32 +11,38 @@ test(function() {
     assert_throws(new TypeError(), () => CSS.registerProperty(true));
     assert_throws(new TypeError(), () => CSS.registerProperty(2));
     assert_throws(new TypeError(), () => CSS.registerProperty("css"));
     assert_throws(new TypeError(), () => CSS.registerProperty(null));
 }, "registerProperty requires a Dictionary type");
 
 test(function() {
     // Valid property names, shouldn't throw
-    CSS.registerProperty({name: '--name1'});
-    CSS.registerProperty({name: '--name2, no need for escapes'});
-    CSS.registerProperty({name: ['--name', 3]});
+    CSS.registerProperty({name: '--name1', inherits: false});
+    CSS.registerProperty({name: '--name2, no need for escapes', inherits: false});
+    CSS.registerProperty({name: ['--name', 3], inherits: false});
 
     // Invalid property names
     assert_throws(new TypeError(), () => CSS.registerProperty({}));
-    assert_throws(new SyntaxError(), () => CSS.registerProperty({name: 'no-leading-dash'}));
-    assert_throws(new SyntaxError(), () => CSS.registerProperty({name: ''}));
-    assert_throws(new SyntaxError(), () => CSS.registerProperty({name: '\\--name'}));
+    assert_throws(new SyntaxError(), () => CSS.registerProperty({name: 'no-leading-dash', inherits: false}));
+    assert_throws(new SyntaxError(), () => CSS.registerProperty({name: '', inherits: false}));
+    assert_throws(new SyntaxError(), () => CSS.registerProperty({name: '\\--name', inherits: false}));
 }, "registerProperty requires a name matching <custom-property-name>");
 
 test(function() {
-    CSS.registerProperty({name: '--syntax-test-1', syntax: '*'});
-    CSS.registerProperty({name: '--syntax-test-2', syntax: ' * '});
+    CSS.registerProperty({name: '--syntax-test-1', syntax: '*', inherits: false});
+    CSS.registerProperty({name: '--syntax-test-2', syntax: ' * ', inherits: false});
     assert_throws(new SyntaxError(),
-        () => CSS.registerProperty({name: '--syntax-test-3', syntax: 'length'}));
-}, "registerProperty only allows omitting initialValue is syntax is '*'");
+        () => CSS.registerProperty({name: '--syntax-test-3', syntax: 'length', inherits: false}));
+}, "registerProperty only allows omitting initialValue if syntax is '*'");
 
 test(function() {
-    CSS.registerProperty({name: '--re-register', syntax: '<length>', initialValue: '0px'});
+    CSS.registerProperty({name: '--re-register', syntax: '<length>', initialValue: '0px', inherits: false});
     assert_throws({name: 'InvalidModificationError'},
-        () => CSS.registerProperty({name: '--re-register', syntax: '<percentage>', initialValue: '0%'}));
+        () => CSS.registerProperty({name: '--re-register', syntax: '<percentage>', initialValue: '0%', inherits: false}));
 }, "registerProperty fails for an already registered property");
+
+test(function(){
+    CSS.registerProperty({name: '--inherit-test-1', syntax: '<length>', initialValue: '0px', inherits: true});
+    CSS.registerProperty({name: '--inherit-test-2', syntax: '<length>', initialValue: '0px', inherits: false});
+    assert_throws(new TypeError(), () => CSS.registerProperty({name: '--inherit-test-3', syntax: '<length>', initialValue: '0px'}));
+}, "registerProperty requires inherits");
 </script>
--- a/testing/web-platform/tests/css/css-properties-values-api/registered-properties-inheritance.html
+++ b/testing/web-platform/tests/css/css-properties-values-api/registered-properties-inheritance.html
@@ -19,19 +19,19 @@
 }
 </style>
 <div id=outer><div id=inner></div></div>
 <script>
 test(function() {
     CSS.registerProperty({name: '--inherited-length-1', syntax: '<length>', initialValue: '1px', inherits: true});
     CSS.registerProperty({name: '--inherited-length-2', syntax: '<length>', initialValue: '2px', inherits: true});
     CSS.registerProperty({name: '--inherited-length-3', syntax: '<length>', initialValue: '3px', inherits: true});
-    CSS.registerProperty({name: '--non-inherited-length-1', syntax: '<length>', initialValue: '4px'});
-    CSS.registerProperty({name: '--non-inherited-length-2', syntax: '<length>', initialValue: '5px'});
-    CSS.registerProperty({name: '--non-inherited-length-3', syntax: '<length>', initialValue: '6px'});
+    CSS.registerProperty({name: '--non-inherited-length-1', syntax: '<length>', initialValue: '4px', inherits: false});
+    CSS.registerProperty({name: '--non-inherited-length-2', syntax: '<length>', initialValue: '5px', inherits: false});
+    CSS.registerProperty({name: '--non-inherited-length-3', syntax: '<length>', initialValue: '6px', inherits: false});
 
     outerComputedStyle = getComputedStyle(outer);
     assert_equals(outerComputedStyle.getPropertyValue('--inherited-length-1'), '10px');
     assert_equals(outerComputedStyle.getPropertyValue('--inherited-length-2'), '22px');
     assert_equals(outerComputedStyle.getPropertyValue('--inherited-length-3'), '30px');
     assert_equals(outerComputedStyle.getPropertyValue('--non-inherited-length-1'), '22px');
     assert_equals(outerComputedStyle.getPropertyValue('--non-inherited-length-2'), '5px');
     assert_equals(outerComputedStyle.getPropertyValue('--non-inherited-length-3'), '50px');
--- a/testing/web-platform/tests/css/css-properties-values-api/registered-property-computation.html
+++ b/testing/web-platform/tests/css/css-properties-values-api/registered-property-computation.html
@@ -31,30 +31,30 @@
 <div id=divWithFontSizeSet></div>
 <div id=parentDiv>
     <div id=divWithFontSizeInherited></div>
     <div id=fontSizeCycle></div>
 </div>
 
 <script>
 test(() => {
-    CSS.registerProperty({name: '--length-1', syntax: '<length>', initialValue: '0px'});
-    CSS.registerProperty({name: '--length-2', syntax: '<length>', initialValue: '0px'});
-    CSS.registerProperty({name: '--length-3', syntax: '<length>', initialValue: '0px'});
-    CSS.registerProperty({name: '--length-4', syntax: '<length>', initialValue: '0px'});
-    CSS.registerProperty({name: '--length-5', syntax: '<length>', initialValue: '0px'});
-    CSS.registerProperty({name: '--length-6', syntax: '<length>', initialValue: '0px'});
-    CSS.registerProperty({name: '--length-percentage-1', syntax: '<length-percentage>', initialValue: '0px'});
-    CSS.registerProperty({name: '--length-percentage-2', syntax: '<length-percentage>', initialValue: '0px'});
-    CSS.registerProperty({name: '--length-percentage-3', syntax: '<length-percentage>', initialValue: '0px'});
-    CSS.registerProperty({name: '--list-1', syntax: '<length>+', initialValue: '0px'});
-    CSS.registerProperty({name: '--list-2', syntax: '<length>+', initialValue: '0px'});
-    CSS.registerProperty({name: '--list-3', syntax: '<length-percentage>+', initialValue: '0px'});
-    CSS.registerProperty({name: '--list-4', syntax: '<length-percentage>+', initialValue: '0px'});
-    CSS.registerProperty({name: '--font-size', syntax: '<length>', initialValue: '0px'});
+    CSS.registerProperty({name: '--length-1', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-2', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-3', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-4', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-5', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-6', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-percentage-1', syntax: '<length-percentage>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-percentage-2', syntax: '<length-percentage>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-percentage-3', syntax: '<length-percentage>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--list-1', syntax: '<length>+', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--list-2', syntax: '<length>+', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--list-3', syntax: '<length-percentage>+', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--list-4', syntax: '<length-percentage>+', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--font-size', syntax: '<length>', initialValue: '0px', inherits: false});
 }, "CSS.registerProperty");
 
 for (var element of [divWithFontSizeSet, divWithFontSizeInherited]) {
     var id = element.id;
     var computedStyle = getComputedStyle(element);
 
     test(function() {
         assert_equals(computedStyle.getPropertyValue('--length-1'), '12px');
--- a/testing/web-platform/tests/css/css-properties-values-api/registered-property-cssom.html
+++ b/testing/web-platform/tests/css/css-properties-values-api/registered-property-cssom.html
@@ -33,17 +33,17 @@ test(function() {
 
   assert_equals(inlineStyle.getPropertyValue('--length'), '5');
   assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');
   assert_equals(computedStyle.getPropertyValue('--length'), '5');
   assert_equals(computedStyle.getPropertyValue('--color'), 'hello');
 }, "CSSOM setters function as expected for unregistered properties");
 
 test(function() {
-  CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px'});
+  CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px', inherits: false});
   CSS.registerProperty({name: '--color', syntax: '<color>', initialValue: 'white', inherits: true});
 }, "CSS.registerProperty");
 
 test(function() {
   assert_equals(inlineStyle.getPropertyValue('--length'), '5');
   assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');
   assert_equals(computedStyle.getPropertyValue('--length'), '0px');
   assert_equals(computedStyle.getPropertyValue('--color'), 'blue');
--- a/testing/web-platform/tests/css/css-properties-values-api/registered-property-initial.html
+++ b/testing/web-platform/tests/css/css-properties-values-api/registered-property-initial.html
@@ -7,22 +7,22 @@
 #target {
   background: var(--inherited-color);
   color: var(--non-inherited-color);
 }
 </style>
 <div id=target></div>
 <script>
 test(function() {
-    CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: 'calc(10px + 15px)'});
-    CSS.registerProperty({name: '--length-percentage', syntax: '<length-percentage>', initialValue: 'calc(1in + 10% + 4px)'});
+    CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: 'calc(10px + 15px)', inherits: false});
+    CSS.registerProperty({name: '--length-percentage', syntax: '<length-percentage>', initialValue: 'calc(1in + 10% + 4px)', inherits: false});
     CSS.registerProperty({name: '--inherited-color', syntax: '<color>', initialValue: 'pink', inherits: true});
-    CSS.registerProperty({name: '--non-inherited-color', syntax: '<color>', initialValue: 'purple'});
-    CSS.registerProperty({name: '--single-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 2))'});
-    CSS.registerProperty({name: '--multiple-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 1)) translateX(calc(3px + 1px))'});
+    CSS.registerProperty({name: '--non-inherited-color', syntax: '<color>', initialValue: 'purple', inherits: false});
+    CSS.registerProperty({name: '--single-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 2))', inherits: false});
+    CSS.registerProperty({name: '--multiple-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 1)) translateX(calc(3px + 1px))', inherits: false});
 
     computedStyle = getComputedStyle(target);
     assert_equals(computedStyle.getPropertyValue('--length'), '25px');
     assert_equals(computedStyle.getPropertyValue('--length-percentage'), 'calc(100px + 10%)');
     assert_equals(computedStyle.getPropertyValue('--inherited-color'), 'pink');
     assert_equals(computedStyle.getPropertyValue('--non-inherited-color'), 'purple');
     assert_equals(computedStyle.getPropertyValue('--single-transform-list'), 'scale(4)');
     assert_equals(computedStyle.getPropertyValue('--multiple-transform-list'), 'scale(3) translateX(4px)');
--- a/testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html
+++ b/testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html
@@ -14,20 +14,20 @@
     --unregistered-1-a:var(--registered-1-a);
     left: var(--registered-1-a, 50px);
     top: var(--registered-1-b, 60px);
 }
 </style>
 <div id=test1></div>
 <script>
 test(function() {
-    CSS.registerProperty({name: '--registered-1-a', syntax: '<length>', initialValue: '1px'});
-    CSS.registerProperty({name: '--registered-1-b', syntax: '<length>', initialValue: '2px'});
-    CSS.registerProperty({name: '--registered-1-c', syntax: '<length>', initialValue: '3px'});
-    CSS.registerProperty({name: '--registered-1-d', syntax: '<length>', initialValue: '4px'});
+    CSS.registerProperty({name: '--registered-1-a', syntax: '<length>', initialValue: '1px', inherits: false});
+    CSS.registerProperty({name: '--registered-1-b', syntax: '<length>', initialValue: '2px', inherits: false});
+    CSS.registerProperty({name: '--registered-1-c', syntax: '<length>', initialValue: '3px', inherits: false});
+    CSS.registerProperty({name: '--registered-1-d', syntax: '<length>', initialValue: '4px', inherits: false});
 
     computedStyle = getComputedStyle(test1);
     assert_equals(computedStyle.getPropertyValue('--registered-1-a'), '1px');
     assert_equals(computedStyle.getPropertyValue('--registered-1-b'), '2px');
 
     assert_equals(computedStyle.getPropertyValue('--registered-1-c'), '2px');
     assert_equals(computedStyle.getPropertyValue('--registered-1-d'), '2px');
     assert_equals(computedStyle.getPropertyValue('--unregistered-1-a'), '1px');
@@ -51,21 +51,21 @@ test(function() {
     --unregistered-2-e:var(--unregistered-2-a);
     left: var(--registered-2-a, 70px);
     top: var(--unregistered-2-a, 80px);
 }
 </style>
 <div id=test2></div>
 <script>
 test(function() {
-    CSS.registerProperty({name: '--registered-2-a', syntax: '<length>', initialValue: '1px'});
-    CSS.registerProperty({name: '--registered-2-b', syntax: '<length>', initialValue: '2px'});
-    CSS.registerProperty({name: '--registered-2-c', syntax: '<length>', initialValue: '3px'});
-    CSS.registerProperty({name: '--registered-2-d', syntax: '<length>', initialValue: '4px'});
-    CSS.registerProperty({name: '--registered-2-e', syntax: '<length>', initialValue: '5px'});
+    CSS.registerProperty({name: '--registered-2-a', syntax: '<length>', initialValue: '1px', inherits: false});
+    CSS.registerProperty({name: '--registered-2-b', syntax: '<length>', initialValue: '2px', inherits: false});
+    CSS.registerProperty({name: '--registered-2-c', syntax: '<length>', initialValue: '3px', inherits: false});
+    CSS.registerProperty({name: '--registered-2-d', syntax: '<length>', initialValue: '4px', inherits: false});
+    CSS.registerProperty({name: '--registered-2-e', syntax: '<length>', initialValue: '5px', inherits: false});
 
     computedStyle = getComputedStyle(test2);
     assert_equals(computedStyle.getPropertyValue('--registered-2-a'), '1px');
     assert_equals(computedStyle.getPropertyValue('--unregistered-2-a'), '');
 
     assert_equals(computedStyle.getPropertyValue('--registered-2-b'), '1px');
     assert_equals(computedStyle.getPropertyValue('--registered-2-c'), '1px');
     assert_equals(computedStyle.getPropertyValue('--registered-2-d'), '40px');
@@ -90,20 +90,20 @@ test(function() {
     --registered-3-d: var(--registered-3-c, 50px);
     left: var(--registered-3-d, 60px);
     top: var(--registered-3-b, 70px);
 }
 </style>
 <div id=test3></div>
 <script>
 test(function() {
-    CSS.registerProperty({name: '--registered-3-a', syntax: '<length>', initialValue: '1px'});
-    CSS.registerProperty({name: '--registered-3-b', syntax: '<length>', initialValue: '2px'});
-    CSS.registerProperty({name: '--registered-3-c', syntax: '<length>', initialValue: '3px'});
-    CSS.registerProperty({name: '--registered-3-d', syntax: '<length>', initialValue: '4px'});
+    CSS.registerProperty({name: '--registered-3-a', syntax: '<length>', initialValue: '1px', inherits: false});
+    CSS.registerProperty({name: '--registered-3-b', syntax: '<length>', initialValue: '2px', inherits: false});
+    CSS.registerProperty({name: '--registered-3-c', syntax: '<length>', initialValue: '3px', inherits: false});
+    CSS.registerProperty({name: '--registered-3-d', syntax: '<length>', initialValue: '4px', inherits: false});
 
     computedStyle = getComputedStyle(test3);
     assert_equals(computedStyle.getPropertyValue('--unregistered-3-a'), '');
     assert_equals(computedStyle.getPropertyValue('--unregistered-3-b'), '');
 
     assert_equals(computedStyle.getPropertyValue('--registered-3-a'), '30px');
     assert_equals(computedStyle.getPropertyValue('--registered-3-b'), '2px');
     assert_equals(computedStyle.getPropertyValue('--registered-3-c'), '40px');
@@ -123,19 +123,19 @@ test(function() {
     --unregistered-4-b:var(--unregistered-4-a,woof);
     --unregistered-4-c:var(--unregistered-4-a);
     transition-property: var(--registered-4-a, water);
 }
 </style>
 <div id=test4></div>
 <script>
 test(function() {
-    CSS.registerProperty({name: '--registered-4-a', syntax: '*'});
-    CSS.registerProperty({name: '--registered-4-b', syntax: '*', initialValue: 'moo'});
-    CSS.registerProperty({name: '--registered-4-c', syntax: '*', initialValue: 'circle'});
+    CSS.registerProperty({name: '--registered-4-a', syntax: '*', inherits: false});
+    CSS.registerProperty({name: '--registered-4-b', syntax: '*', initialValue: 'moo', inherits: false});
+    CSS.registerProperty({name: '--registered-4-c', syntax: '*', initialValue: 'circle', inherits: false});
 
     computedStyle = getComputedStyle(test4);
     assert_equals(computedStyle.getPropertyValue('--registered-4-a'), '');
     assert_equals(computedStyle.getPropertyValue('--unregistered-4-a'), '');
 
     assert_equals(computedStyle.getPropertyValue('--registered-4-b'), 'meow');
     assert_equals(computedStyle.getPropertyValue('--registered-4-c'), 'circle');
     assert_equals(computedStyle.getPropertyValue('--unregistered-4-b'), 'woof');
--- a/testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties.html
+++ b/testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties.html
@@ -22,29 +22,29 @@ div {
     --registered-token-stream-1:var(--invalid);
     --registered-token-stream-2:var(--invalid,fallback);
     --token-stream-1:var(--registered-token-stream-1,moo);
 }
 </style>
 <div id=element></div>
 <script>
 test(function() {
-    CSS.registerProperty({name: '--123px', syntax: '<length>', initialValue: '123px'});
+    CSS.registerProperty({name: '--123px', syntax: '<length>', initialValue: '123px', inherits: false});
 
-    CSS.registerProperty({name: '--registered-length-1', syntax: '<length>', initialValue: '0px'});
-    CSS.registerProperty({name: '--registered-length-2', syntax: '<length>', initialValue: '0px'});
-    CSS.registerProperty({name: '--registered-length-3', syntax: '<length>', initialValue: '0px'});
-    CSS.registerProperty({name: '--registered-length-4', syntax: '<length>', initialValue: '0px'});
-    CSS.registerProperty({name: '--registered-length-5', syntax: '<length>', initialValue: '0px'});
-    CSS.registerProperty({name: '--registered-length-6', syntax: '<length>', initialValue: '0px'});
-    CSS.registerProperty({name: '--registered-length-7', syntax: '<length>', initialValue: '0px'});
-    CSS.registerProperty({name: '--registered-length-invalid', syntax: '<length>', initialValue: '15px'});
+    CSS.registerProperty({name: '--registered-length-1', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--registered-length-2', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--registered-length-3', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--registered-length-4', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--registered-length-5', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--registered-length-6', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--registered-length-7', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--registered-length-invalid', syntax: '<length>', initialValue: '15px', inherits: false});
 
-    CSS.registerProperty({name: '--registered-token-stream-1', syntax: '*'});
-    CSS.registerProperty({name: '--registered-token-stream-2', syntax: '*'});
+    CSS.registerProperty({name: '--registered-token-stream-1', syntax: '*', inherits: false});
+    CSS.registerProperty({name: '--registered-token-stream-2', syntax: '*', inherits: false});
 
     computedStyle = getComputedStyle(element);
     assert_equals(computedStyle.getPropertyValue('--registered-length-1'), '10px');
     assert_equals(computedStyle.getPropertyValue('--registered-length-2'), '10px');
     assert_equals(computedStyle.getPropertyValue('--registered-length-3'), '20px');
     assert_equals(computedStyle.getPropertyValue('--registered-length-4'), '60px');
     assert_equals(computedStyle.getPropertyValue('--registered-length-5'), '70px');
     assert_equals(computedStyle.getPropertyValue('--registered-length-6'), '80px');