Changeset 239365 – WebKit

trunk/LayoutTests/ChangeLog

-                      r239357
+                      r239365
+-12-18  Justin Michaud  <justin_michaud@apple.com>
+        Update CSS Properties and Values API to use new cycle fallback behaviour
+        https://bugs.webkit.org/show_bug.cgi?id=192800
+        Reviewed by Antti Koivisto.
+        * css-custom-properties-api/crash.html:
+        * css-custom-properties-api/inherits-expected.txt:
+        * css-custom-properties-api/inherits.html:
+        * css-custom-properties-api/registerProperty-expected.txt:
+        * css-custom-properties-api/registerProperty.html:
 -12-18  Myles C. Maxfield  <mmaxfield@apple.com>

trunk/LayoutTests/css-custom-properties-api/crash.html

-                      r237697
+                      r239365
   inlineStyle.setProperty('--baz', '   40px');
   assert_equals(computedStyle.getPropertyValue('--baz'), '40px');
   assert_equals(computedStyle.getPropertyValue('--foo'), '200px');
   assert_equals(computedStyle.getPropertyValue('--bar'), '200px');
+  assert_equals(computedStyle.getPropertyValue('--foo'), '');
+  assert_equals(computedStyle.getPropertyValue('--bar'), '');
   assert_equals(computedStyle.getPropertyValue('--baz'), '40px');
   assert_equals(computedStyle.getPropertyValue('font-size'), '200px');
+  assert_equals(computedStyle.getPropertyValue('font-size'), '30px');
   inlineStyle.removeProperty('--baz');
   assert_equals(computedStyle.getPropertyValue('--baz'), '200px');
   assert_equals(computedStyle.getPropertyValue('--foo'), '200px');
   assert_equals(computedStyle.getPropertyValue('--bar'), '200px');
   assert_equals(computedStyle.getPropertyValue('font-size'), '200px');
+  assert_equals(computedStyle.getPropertyValue('--foo'), '');
+  assert_equals(computedStyle.getPropertyValue('--bar'), '');
+  assert_equals(computedStyle.getPropertyValue('font-size'), '30px');
   assert_equals(computedStyle.getPropertyValue('--baz'), '200px');
 }, "Setting the inline style is handled correctly when registered");

trunk/LayoutTests/css-custom-properties-api/inherits-expected.txt

-                      r236828
+                      r239365
 Specified in parent, inherits=true
+px green
+test
 Specified in parent, inherits=false
+px green
+test
 Specified in parent, not registered
+px green
+test
 Initial
+px green
+test
 Unset, inherits=true
+px green
+test
 Unset, inherits=false
+px green
+test
 A cycle between an inherits=true and inherits=false property
+px green
+test
 A cycle between an inherits=true and inherits=false property
+px green
+test
 A cycle between an inherits=true and inherits=false property with fallback
+px green
+test
 Inheritance should not create a cycle
+px green
+test
 A cycle between two unregistered properties
+px green
+test
 Revert, inherits=true
+px purple
+test
 Revert, inherits=false
+px purple
+test
 Revert, unregistered
+purple
+test
 Inherit, unregistered
+purple
+test
 Test that inherited properties do variable substitution before being inherited - registered
 …
 No initial value in registered property should act like unregistered
+px green
+test
 (unregistered)
+px green
+test
 Inherit should be substituted for unregistered property
+px green
+test

trunk/LayoutTests/css-custom-properties-api/inherits.html

-                      r236828
+                      r239365
 <div>
   <p> Specified in parent, inherits=true</p>
   <div id="parent1"><div id="child1"><p>100px green</p></div> </div>
+  <div id="parent1"><div id="child1"><p>test</p></div> </div>
   <p> Specified in parent, inherits=false </p>
   <div id="parent2"><div id="child2"><p>200px green</p></div> </div>
+  <div id="parent2"><div id="child2"><p>test</p></div> </div>
   <p> Specified in parent, not registered </p>
   <div id="parent3"><div id="child3"><p>100px green</p></div> </div>
+  <div id="parent3"><div id="child3"><p>test</p></div> </div>
   <p> Initial </p>
   <div id="parent4"><div id="child4"><p>200px green</p></div> </div>
+  <div id="parent4"><div id="child4"><p>test</p></div> </div>
   <p> Unset, inherits=true </p>
   <div id="parent5"><div id="child5"><p>100px green</p></div> </div>
+  <div id="parent5"><div id="child5"><p>test</p></div> </div>
   <p> Unset, inherits=false </p>
   <div id="parent6"><div id="child6"><p>200px green</p></div> </div>
+  <div id="parent6"><div id="child6"><p>test</p></div> </div>
   <p> A cycle between an inherits=true and inherits=false property </p>
   <div id="parent7"><div id="child7"><p>200px green</p></div> </div>
+  <div id="parent7"><div id="child7"><p>test</p></div> </div>
   <p> A cycle between an inherits=true and inherits=false property </p>
   <div id="parent8"><div id="child8"><p>200px green</p></div> </div>
+  <div id="parent8"><div id="child8"><p>test</p></div> </div>
   <p> A cycle between an inherits=true and inherits=false property with fallback </p>
   <div id="parent9"><div id="child9"><p>200px green</p></div> </div>
+  <div id="parent9"><div id="child9"><p>test</p></div> </div>
   <p> Inheritance should not create a cycle </p>
   <div id="parent10"><div id="child10"><p>110px green</p></div></div>
+  <div id="parent10"><div id="child10"><p>test</p></div></div>
   <p> A cycle between two unregistered properties </p>
   <div id="parent11"><div id="child11"><p>300px green</p></div> </div>
+  <div id="parent11"><div id="child11"><p>test</p></div> </div>
   <p> Revert, inherits=true </p>
   <div id="parent12"><div id="child12"><div id="childchild12"><p>190px purple</p></div></div></div>
+  <div id="parent12"><div id="child12"><div id="childchild12"><p>test</p></div></div></div>
   <p> Revert, inherits=false </p>
   <div id="parent13"><div id="child13"><div id="childchild13"><p>200px purple</p></div></div> </div>
+  <div id="parent13"><div id="child13"><div id="childchild13"><p>test</p></div></div> </div>
   <p> Revert, unregistered </p>
   <div id="parent14"><div id="child14"><div id="childchild14"><p>purple</p></div></div> </div>
+  <div id="parent14"><div id="child14"><div id="childchild14"><p>test</p></div></div> </div>
   <p> Inherit, unregistered </p>
   <div id="parent14-1"><div id="child14-1"><div id="childchild14-1"><p>purple</p></div></div> </div>
+  <div id="parent14-1"><div id="child14-1"><div id="childchild14-1"><p>test</p></div></div> </div>
   <p> Test that inherited properties do variable substitution before being inherited - registered</p>
 …
   <p> No initial value in registered property should act like unregistered</p>
   <div id="parent17"><div id="child17"><p>200px green</p></div> </div>
+  <div id="parent17"><div id="child17"><p>test</p></div> </div>
   <p> (unregistered) </p>
   <div id="parent18"><div id="child18"><p>500px green</p></div> </div>
+  <div id="parent18"><div id="child18"><p>test</p></div> </div>
   <p>Inherit should be substituted for unregistered property</p>
   <div id="parent19"><div id="child19"><p>500px green</p></div> </div>
+  <div id="parent19"><div id="child19"><p>test</p></div> </div>
 </div>
 <script>
 …
 }, "JS Attributes are valid for element 6");
 test(function() {
   test_prop('child7', 'width', '200px');
   test_prop('child7', '--my-custom-prop', '100px');
   test_prop('child7', '--my-custom-prop2', '200px');
+  test_prop('child7', 'width', '300px');
+  test_prop('child7', '--my-custom-prop', '');
+  test_prop('child7', '--my-custom-prop2', '');
 }, "JS Attributes are valid for element 7");
 test(function() {
   test_prop('child8', 'width', '200px');
   test_prop('child8', '--my-custom-prop', '200px');
   test_prop('child8', '--my-custom-prop2', '200px');
+  test_prop('child8', 'width', '300px');
+  test_prop('child8', '--my-custom-prop', '');
+  test_prop('child8', '--my-custom-prop2', '');
 }, "JS Attributes are valid for element 8");
 test(function() {
   test_prop('child9', 'width', '200px');
   test_prop('child9', '--my-custom-prop', '100px');
   test_prop('child9', '--my-custom-prop2', '200px');
+  test_prop('child9', 'width', '300px');
+  test_prop('child9', '--my-custom-prop', '');
+  test_prop('child9', '--my-custom-prop2', '');
 }, "JS Attributes are valid for element 9");
 test(function() {

trunk/LayoutTests/css-custom-properties-api/registerProperty-expected.txt

r236379	r239365
4	4	PASS registerProperty always allows omitting initialValue and syntax, requires name and inherits
5	5	PASS registerProperty requires inherits and name
	6	PASS registerProperty requires initialValue to be computationally independent
6	7

trunk/LayoutTests/css-custom-properties-api/registerProperty.html

-                      r236379
+                      r239365
 <script src="../resources/testharness.js"></script>
 <script src="../resources/testharnessreport.js"></script>
+<div id="el"></div>
 <script>
 // Tests for error checking during property registration
 …
     CSS.registerProperty({name: ['--name', 3], inherits: false});
     // Invalid property names
     //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}));
+    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-5', inherits: false, syntax: ' * '});
 }, "registerProperty requires inherits and name");
+test(function() {
+  CSS.registerProperty({name: '--initialvalue-test-0', inherits: false, syntax: '<length>', initialValue: 'calc(10px + 10in)'});
+  assert_equals(window.getComputedStyle(el).getPropertyValue('--initialvalue-test-0').toString(), '970px');
+  assert_throws(new SyntaxError(),
+    () => CSS.registerProperty({name: '--initialvalue-test-1', inherits: false, syntax: '<length>', initialValue: '10em'}));
+  assert_throws(new SyntaxError(),
+    () => CSS.registerProperty({name: '--initialvalue-test-2', inherits: false, syntax: '<length>', initialValue: 'calc(10px + 10em)'}));
+  assert_throws(new SyntaxError(),
+    () => CSS.registerProperty({name: '--initialvalue-test-3', inherits: false, syntax: '<length>', initialValue: 'calc(10px + 10%)'}));
+}, "registerProperty requires initialValue to be computationally independent");
 </script>

trunk/LayoutTests/imported/w3c/ChangeLog

-                      r239341
+                      r239365
+-12-18  Justin Michaud  <justin_michaud@apple.com>
+        Update CSS Properties and Values API to use new cycle fallback behaviour
+        https://bugs.webkit.org/show_bug.cgi?id=192800
+        Reviewed by Antti Koivisto.
+        Re-import tests and adjust expected results. Some of the tests go from pass to fail because
+        this patch adds some extra dependency checking to property registrations to fix a crash, but
+        now unsupported syntaxes like <length-percentage> do not register properly.
+        * web-platform-tests/css/css-properties-values-api/register-property-expected.txt:
+        * web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing-expected.txt:
+        * web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing.html:
+        * web-platform-tests/css/css-properties-values-api/register-property.html:
+        * web-platform-tests/css/css-properties-values-api/registered-properties-inheritance-expected.txt:
+        * web-platform-tests/css/css-properties-values-api/registered-properties-inheritance.html:
+        * web-platform-tests/css/css-properties-values-api/registered-property-computation-expected.txt:
+        * web-platform-tests/css/css-properties-values-api/registered-property-computation.html:
+        * web-platform-tests/css/css-properties-values-api/registered-property-cssom-expected.txt:
+        * web-platform-tests/css/css-properties-values-api/registered-property-cssom.html:
+        * web-platform-tests/css/css-properties-values-api/registered-property-initial-expected.txt:
+        * web-platform-tests/css/css-properties-values-api/registered-property-initial.html:
+        * web-platform-tests/css/css-properties-values-api/resources/utils.js: Added.
+        (generate_name):
+        (any_initial_value):
+        (generate_property):
+        (all_syntaxes):
+        * web-platform-tests/css/css-properties-values-api/resources/w3c-import.log: Added.
+        * web-platform-tests/css/css-properties-values-api/self-utils-expected.txt: Added.
+        * web-platform-tests/css/css-properties-values-api/self-utils.html: Added.
+        * web-platform-tests/css/css-properties-values-api/typedom.tentative-expected.txt:
+        * web-platform-tests/css/css-properties-values-api/typedom.tentative.html:
+        * web-platform-tests/css/css-properties-values-api/unit-cycles-expected.txt:
+        * web-platform-tests/css/css-properties-values-api/unit-cycles.html:
+        * web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html:
+        * web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-expected.txt:
+        * web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html:
+        * web-platform-tests/css/css-properties-values-api/w3c-import.log:
 -12-18  Justin Michaud  <justin_michaud@apple.com>

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-expected.txt

-                      r236444
+                      r239365
 PASS registerProperty requires a Dictionary type
+FAIL registerProperty requires a name matching <custom-property-name> assert_throws: function "() => CSS.registerProperty({name: 'no-leading-dash', inherits: false})" did not throw
+PASS registerProperty requires a name matching <custom-property-name>
 FAIL registerProperty only allows omitting initialValue if syntax is '*' assert_throws: function "() => CSS.registerProperty({name: '--syntax-test-3', syntax: 'length', inherits: false})" did not throw
+PASS registerProperty fails for an already registered property
+FAIL registerProperty fails for an already registered property assert_throws: function "() => CSS.registerProperty({name: '--re-register', syntax: '<percentage>', initialValue: '0%', inherits: false})" threw object "SyntaxError: The given initial value does not parse for the given syntax." ("SyntaxError") expected object "[object Object]" ("InvalidModificationError")
 PASS registerProperty requires inherits
+FAIL Registering a property should not cause a transition The given initial value does not parse for the given syntax.

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing-expected.txt

-                      r237697
+                      r239365
 PASS syntax:'<length>', initialValue:'2px' is valid
 FAIL syntax:' <number>', initialValue:'5' is valid The given initial value does not parse for the given syntax.
+PASS syntax:'<percentage> ', initialValue:'10%' is valid
+FAIL syntax:'<percentage> ', initialValue:'10%' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:'<color>+', initialValue:'red' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:' <length>+ | <percentage>', initialValue:'2px 8px' is valid The given initial value does not parse for the given syntax.
 …
 PASS syntax:'<length>', initialValue:'calc(7in - 12px)' is valid
 FAIL syntax:'<length>+', initialValue:'2px 7px calc(8px)' is valid The given initial value does not parse for the given syntax.
+FAIL syntax:'<length>#', initialValue:'2px, 7px, calc(8px)' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:'<percentage>', initialValue:'-9.3e3%' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:'<length-percentage>', initialValue:'-54%' is valid The given initial value does not parse for the given syntax.
 PASS syntax:'<length-percentage>', initialValue:'0' is valid
+PASS syntax:'<length-percentage>', initialValue:'calc(-11px + 10.4%)' is valid
+FAIL syntax:'<length-percentage>', initialValue:'calc(-11px + 10.4%)' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:'<number>', initialValue:'-109' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:'<number>', initialValue:'2.3e4' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:'<integer>', initialValue:'-109' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:'<integer>', initialValue:'19' is valid The given initial value does not parse for the given syntax.
+FAIL syntax:'<integer>', initialValue:'calc(1)' is valid The given initial value does not parse for the given syntax.
+FAIL syntax:'<integer>', initialValue:'calc(1 + 2)' is valid The given initial value does not parse for the given syntax.
+FAIL syntax:'<integer>', initialValue:'calc(3.1415)' is valid The given initial value does not parse for the given syntax.
+FAIL syntax:'<integer>', initialValue:'calc(3.1415 + 3.1415)' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:'<angle>', initialValue:'10deg' is valid The given initial value does not parse for the given syntax.
 FAIL syntax:'<angle>', initialValue:'20.5rad' is valid The given initial value does not parse for the given syntax.
 …
 FAIL syntax:'<length>|initial', initialValue:'10px' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
 FAIL syntax:'<length>|INHERIT', initialValue:'10px' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<percentage>|unsEt', initialValue:'2%' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+PASS syntax:'<percentage>|unsEt', initialValue:'2%' is invalid
 FAIL syntax:'*', initialValue:'initial' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
 FAIL syntax:'*', initialValue:'inherit' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
 …
 PASS syntax:'<length>', initialValue:'var(--moo)' is invalid
 PASS syntax:'<length>', initialValue:'10' is invalid
+FAIL syntax:'<length>', initialValue:'10%' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>', initialValue:'calc(5px + 10%)' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+PASS syntax:'<length>', initialValue:'10%' is invalid
+PASS syntax:'<length>', initialValue:'calc(5px + 10%)' is invalid
 PASS syntax:'<length>', initialValue:'calc(5px * 3px / 6px)' is invalid
+FAIL syntax:'<length>', initialValue:'10em' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+PASS syntax:'<length>', initialValue:'10em' is invalid
 FAIL syntax:'<length>', initialValue:'10vmin' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>', initialValue:'calc(4px + 3em)' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>', initialValue:'calc(4px + calc(8 * 2em))' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>+', initialValue:'calc(2ex + 16px)' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+PASS syntax:'<length>', initialValue:'calc(4px + 3em)' is invalid
+PASS syntax:'<length>', initialValue:'calc(4px + calc(8 * 2em))' is invalid
+PASS syntax:'<length>+', initialValue:'calc(2ex + 16px)' is invalid
 PASS syntax:'<length>+', initialValue:'10px calc(20px + 4rem)' is invalid
+FAIL syntax:'<length>+', initialValue:'' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>#', initialValue:'' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
 PASS syntax:'<percentage> | <length>+', initialValue:'calc(100vh - 10px) 30px' is invalid
 PASS syntax:'<length>', initialValue:'10px;' is invalid
+FAIL syntax:'<length-percentage>', initialValue:'calc(2px + 10% + 7ex)' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+PASS syntax:'<length-percentage>', initialValue:'calc(2px + 10% + 7ex)' is invalid
 FAIL syntax:'<percentage>', initialValue:'0' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
 PASS syntax:'<integer>', initialValue:'1.0' is invalid
 …
 PASS syntax:'<number>|foo', initialValue:'foo var(--foo, bla)' is invalid
 FAIL syntax:'<angle>', initialValue:'0' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<angle>', initialValue:'10%' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+PASS syntax:'<angle>', initialValue:'10%' is invalid
 FAIL syntax:'<time>', initialValue:'2px' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
 PASS syntax:'<resolution>', initialValue:'10' is invalid

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing.html

-                      r236444
+                      r239365
 assert_valid("<length>", "calc(7in - 12px)");
 assert_valid("<length>+", "2px 7px calc(8px)");
+assert_valid("<length>#", "2px, 7px, calc(8px)");
 assert_valid("<percentage>", "-9.3e3%");
 assert_valid("<length-percentage>", "-54%");
 …
 assert_valid("<integer>", "-109");
 assert_valid("<integer>", "19");
+assert_valid("<integer>", "calc(1)");
+assert_valid("<integer>", "calc(1 + 2)");
+assert_valid("<integer>", "calc(3.1415)");
+assert_valid("<integer>", "calc(3.1415 + 3.1415)");
 assert_valid("<angle>", "10deg");
 …
 assert_invalid("<length>+", "calc(2ex + 16px)");
 assert_invalid("<length>+", "10px calc(20px + 4rem)");
+assert_invalid("<length>+", "");
+assert_invalid("<length>#", "");
 assert_invalid("<percentage> | <length>+", "calc(100vh - 10px) 30px");
 assert_invalid("<length>", "10px;");

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property.html

-                      r236444
+                      r239365
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="./resources/utils.js"></script>
+<div id=target></div>
 <script>
 // Tests for error checking during property registration
 …
     assert_throws(new TypeError(), () => CSS.registerProperty({name: '--inherit-test-3', syntax: '<length>', initialValue: '0px'}));
 }, "registerProperty requires inherits");
+test(function(){
+    try {
+        let name = generate_name();
+        target.style.setProperty(name, 'green');
+        target.style.transitionProperty = name;
+        target.style.transitionDuration = '1s';
+        target.style.transitionTimingFunction = 'steps(1, end)';
+        assert_equals(getComputedStyle(target).getPropertyValue(name), 'green');
+        CSS.registerProperty({
+            name: name,
+            syntax: '<color>',
+            initialValue: 'red',
+            inherits: false
+        });
+        assert_equals(getComputedStyle(target).getPropertyValue(name), 'rgb(0, 128, 0)');
+    } finally {
+        target.style = '';
+    }
+}, 'Registering a property should not cause a transition');
 </script>

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance-expected.txt

r237697	r239365
5	5	PASS Reference to undefined variable results in inherited value
6	6	PASS Reference to syntax-incompatible variable results in inherited value
	7	PASS Font-relative units are absolutized before before inheritance
	8	PASS Calc expressions are resolved before inheritance
7	9

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance.html

-                      r236444
+                      r239365
 }, "Reference to syntax-incompatible variable results in inherited value");
+test(function(){
+    CSS.registerProperty({name: '--inherited-em', syntax: '<length>', initialValue: '0px', inherits: true});
+    outer.style = 'font-size: 11px; --inherited-em: 10em;';
+    inner.style = 'font-size: 22px; --unregistered:var(--inherited-em);';
+    assert_equals(getComputedStyle(inner).getPropertyValue('--unregistered'), '110px');
+}, "Font-relative units are absolutized before before inheritance");
+test(function(){
+    CSS.registerProperty({name: '--calc-length', syntax: '<length>', initialValue: '0px', inherits: true});
+    outer.style = '--calc-length: calc(10px + 10px);';
+    inner.style = '--unregistered:var(--calc-length);';
+    assert_equals(getComputedStyle(inner).getPropertyValue('--unregistered'), '20px');
+}, "Calc expressions are resolved before inheritance");
 </script>

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-computation-expected.txt

-                      r236895
+                      r239365
+FAIL CSS.registerProperty The given initial value does not parse for the given syntax.
+PASS <length> values are computed correctly for divWithFontSizeSet
+FAIL <length-percentage> values are computed correctly for divWithFontSizeSet assert_equals: expected "calc(190px + -2%)" but got "calc(190px - 2%)"
+FAIL <length># values are computed correctly for divWithFontSizeSet assert_equals: expected "10px, 30px" but got "0px"
+FAIL <length-percentage># values are computed correctly for divWithFontSizeSet assert_equals: expected "3%, 80px, 22px" but got "0px"
+FAIL <length>+ values are computed correctly for divWithFontSizeSet assert_equals: expected "10px 30px" but got "0px"
+FAIL <length-percentage>+ values are computed correctly for divWithFontSizeSet assert_equals: expected "3% 80px 22px" but got "0px"
+FAIL <transform-function> values are computed correctly for divWithFontSizeSet assert_equals: expected "translateX(2px)" but got " translateX(2px)"
+PASS <length> values are computed correctly for divWithFontSizeInherited
+FAIL <length-percentage> values are computed correctly for divWithFontSizeInherited assert_equals: expected "calc(190px + -2%)" but got "calc(190px - 2%)"
+FAIL <length># values are computed correctly for divWithFontSizeInherited assert_equals: expected "10px, 30px" but got "0px"
+FAIL <length-percentage># values are computed correctly for divWithFontSizeInherited assert_equals: expected "3%, 80px, 22px" but got "0px"
+FAIL <length>+ values are computed correctly for divWithFontSizeInherited assert_equals: expected "10px 30px" but got "0px"
+FAIL <length-percentage>+ values are computed correctly for divWithFontSizeInherited assert_equals: expected "3% 80px 22px" but got "0px"
+FAIL <transform-function> values are computed correctly for divWithFontSizeInherited assert_equals: expected "translateX(2px)" but got " translateX(2px)"
+PASS <length> values computed are correctly via var()-reference
+PASS <length> values computed are correctly via var()-reference when font-size is inherited
+PASS <length> values are computed correctly when font-size is inherited [14em]
+PASS <length> values are computed correctly when font-size is inherited [calc(14em + 10px)]
+PASS <length> values are computed correctly [12px]
+PASS <length> values are computed correctly [13vw]
+PASS <length> values are computed correctly [14em]
+PASS <length> values are computed correctly [15vmin]
+PASS <length> values are computed correctly [calc(16px - 7em + 10vh)]
+PASS <length-percentage> values are computed correctly [17em]
+FAIL <length-percentage> values are computed correctly [18%] assert_equals: expected "18%" but got "0px"
+FAIL <length-percentage> values are computed correctly [calc(19em - 2%)] assert_equals: expected "calc(-2% + 190px)" but got "0px"
+FAIL <length># values are computed correctly [10px, 3em] assert_equals: expected "10px, 30px" but got "0px"
+FAIL <length># values are computed correctly [4em ,9px] assert_equals: expected "40px, 9px" but got "0px"
+PASS <length># values are computed correctly [8em]
+FAIL <length-percentage># values are computed correctly [3% , 10vmax  , 22px] assert_equals: expected "3%, 80px, 22px" but got "0px"
+FAIL <length-percentage># values are computed correctly [calc(50% + 1em), 4px] assert_equals: expected "calc(50% + 10px), 4px" but got "0px"
+FAIL <length-percentage># values are computed correctly [calc(13% + 37px)] assert_equals: expected "calc(13% + 37px)" but got "0px"
+FAIL <length>+ values are computed correctly [10px 3em] assert_equals: expected "10px 30px" but got "0px"
+FAIL <length>+ values are computed correctly [4em 9px] assert_equals: expected "40px 9px" but got "0px"
+FAIL <length-percentage>+ values are computed correctly [3% 10vmax 22px] assert_equals: expected "3% 80px 22px" but got "0px"
+FAIL <length-percentage>+ values are computed correctly [calc(50% + 1em) 4px] assert_equals: expected "calc(50% + 10px) 4px" but got "0px"
+FAIL <transform-function> values are computed correctly [translateX(2px)] The given initial value does not parse for the given syntax.
+FAIL <transform-function> values are computed correctly [translateX(10em)] The given initial value does not parse for the given syntax.
+FAIL <transform-function> values are computed correctly [translateX(calc(11em + 10%))] The given initial value does not parse for the given syntax.
+FAIL <transform-function>+ values are computed correctly [translateX(10%) scale(2)] The given initial value does not parse for the given syntax.
+FAIL <integer> values are computed correctly [15] assert_equals: expected "15" but got "0px"
+FAIL <integer> values are computed correctly [calc(15 + 15)] assert_equals: expected "30" but got "0px"
+FAIL <integer> values are computed correctly [calc(2.4)] assert_equals: expected "2" but got "0px"
+FAIL <integer> values are computed correctly [calc(2.6)] assert_equals: expected "3" but got "0px"
+FAIL <integer> values are computed correctly [calc(2.6 + 3.1)] assert_equals: expected "6" but got "0px"
+FAIL <integer>+ values are computed correctly [15 calc(2.4) calc(2.6)] assert_equals: expected "15 2 3" but got "0px"
+FAIL <color> values are computed correctly [#ff0000] The given initial value does not parse for the given syntax.
+FAIL <color> values are computed correctly [#000f00] The given initial value does not parse for the given syntax.
+FAIL <color> values are computed correctly [#00000a] The given initial value does not parse for the given syntax.
+FAIL <color> values are computed correctly [#badbee] The given initial value does not parse for the given syntax.
+FAIL <color> values are computed correctly [#badbee33] The given initial value does not parse for the given syntax.
+FAIL <color> values are computed correctly [tomato] The given initial value does not parse for the given syntax.
+FAIL <color> values are computed correctly [plum] The given initial value does not parse for the given syntax.
+FAIL <color> values are computed correctly [currentcolor] The given initial value does not parse for the given syntax.
+PASS * values are computed correctly [tomato]
+FAIL tomato | plum values are computed correctly [plum] The given initial value does not parse for the given syntax.
+FAIL tomato | plum | <color> values are computed correctly [plum] The given initial value does not parse for the given syntax.
+PASS * values are computed correctly [-50grad]
+FAIL <angle> values are computed correctly [180deg] The given initial value does not parse for the given syntax.
+FAIL <angle> values are computed correctly [400grad] The given initial value does not parse for the given syntax.
+FAIL <angle> values are computed correctly [calc(360deg + 400grad)] The given initial value does not parse for the given syntax.
+PASS * values are computed correctly [50s]
+FAIL <time> values are computed correctly [1s] The given initial value does not parse for the given syntax.
+FAIL <time> values are computed correctly [1000ms] The given initial value does not parse for the given syntax.
+FAIL <time> values are computed correctly [calc(1000ms + 1s)] The given initial value does not parse for the given syntax.
+PASS * values are computed correctly [50dpi]
+FAIL <resolution> values are computed correctly [1dppx] The given initial value does not parse for the given syntax.
+FAIL <resolution> values are computed correctly [96dpi] The given initial value does not parse for the given syntax.
+FAIL <resolution> values are computed correctly [calc(1dppx + 96dpi)] The given initial value does not parse for the given syntax.

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-computation.html

-                      r236444
+                      r239365
 <!DOCTYPE HTML>
+<!DOCTYPE html>
 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#calculation-of-computed-values" />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="./resources/utils.js"></script>
 <style>
 #divWithFontSizeSet, #parentDiv {
     font-size: 10px;
+}
-#divWithFontSizeSet, #divWithFontSizeInherited {
-    --length-1: 12px;
-    --length-2: 13vw;
-    --length-3: 14em;
-    --length-4: 15vmin;
-    --length-5: calc(16px - 7em + 10vh);
-    --length-6: var(--length-3);
-    --length-percentage-1: 17em;
-    --length-percentage-2: 18%;
-    --length-percentage-3: calc(19em - 2%);
-    --csv-1: 10px, 3em;
-    --csv-2: 4em ,9px;
-    --csv-3: 8em;
-    --csv-4: 3% , 10vmax  , 22px;
-    --csv-5: calc(50% + 1em), 4px;
-    --csv-6: calc(13% + 37px);
-    --list-1: 10px 3em;
-    --list-2: 4em 9px;
-    --list-3: 3% 10vmax 22px;
-    --list-4: calc(50% + 1em) 4px;
-    --transform-function-1: translateX(2px);
-    --transform-function-2: translateX(10em);
-    --transform-function-3: translateX(calc(11em + 10%));
-    --transform-function-4: translateX(10%) scale(2);
+}
 </style>
 …
     <div id=divWithFontSizeInherited></div>
 </div>
+<div id="ref"></div>
 <script>
-test(() => {
-    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: '--csv-1', syntax: '<length>#', initialValue: '0px', inherits: false});
-    CSS.registerProperty({name: '--csv-2', syntax: '<length>#', initialValue: '0px', inherits: false});
-    CSS.registerProperty({name: '--csv-3', syntax: '<length>#', initialValue: '0px', inherits: false});
-    CSS.registerProperty({name: '--csv-4', syntax: '<length-percentage>#', initialValue: '0px', inherits: false});
-    CSS.registerProperty({name: '--csv-5', syntax: '<length-percentage>#', initialValue: '0px', inherits: false});
-    CSS.registerProperty({name: '--csv-6', 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: '--transform-function-1', syntax: '<transform-function>', initialValue: 'translateX(0px)', inherits: false});
-    CSS.registerProperty({name: '--transform-function-2', syntax: '<transform-function>', initialValue: 'translateX(0px)', inherits: false});
-    CSS.registerProperty({name: '--transform-function-3', syntax: '<transform-function>', initialValue: 'translateX(0px)', inherits: false});
-    CSS.registerProperty({name: '--transform-function-4', syntax: '<transform-function>+', initialValue: 'translateX(0px)', inherits: false});
-}, "CSS.registerProperty");
+for (var element of [divWithFontSizeSet, divWithFontSizeInherited]) {
+    var id = element.id;
+    var computedStyle = getComputedStyle(element);
+// Generate a property and temporarily set its value. Then call 'fn' with
+// the name of the generated property.
+function with_custom_property(element, reg, value, fn) {
+    if (element.id.length == 0)
+        throw 'The specified element must have an ID';
+    let name = generate_property(reg);
+    // Because we want to include the parsing step, insert a stylesheet
+    // node with textContent.
+    let node = document.createElement('style');
+    node.textContent = `#${element.id} { ${name}:${value}; }`;
+    document.body.append(node);
+    try {
+        fn(name);
+    } finally {
+        node.remove();
+    }
+}
+function assert_computed_value(element, syntax, value, expected) {
+    with_custom_property(element, syntax, value, (name) => {
+        let actual = getComputedStyle(element).getPropertyValue(name);
+        assert_equals(actual, expected);
+    });
+}
+// Computes an absolute reference value for some length.
+//
+// E.g. to figure out how many pixels '10vh' is, do length_ref('10vh').
+function length_ref(value, refnode = ref) {
+    try {
+        // The reference property 'min-height' is chosen arbitrarily, but
+        // avoid properties with "resolved value is used value"-behavior
+        // [1], as it may affect rounding, and custom properties do not
+        // have this behavior.
+        //
+        // [1] https://drafts.csswg.org/cssom/#resolved-values
+        const ref_property = 'min-height';
+        refnode.style = `${ref_property}: ${value}`;
+        return getComputedStyle(refnode).getPropertyValue(ref_property);
+    } finally {
+        refnode.style = '';
+    }
+}
+function test_computed_value(syntax, value, expected) {
     test(function() {
+        assert_equals(computedStyle.getPropertyValue('--length-1'), '12px');
+        assert_equals(computedStyle.getPropertyValue('--length-2'), '104px');
+        assert_equals(computedStyle.getPropertyValue('--length-3'), '140px');
+        assert_equals(computedStyle.getPropertyValue('--length-4'), '90px');
+        assert_equals(computedStyle.getPropertyValue('--length-5'), '6px');
+        assert_equals(computedStyle.getPropertyValue('--length-6'), '140px');
+    }, "<length> values are computed correctly for " + id);
+        assert_computed_value(divWithFontSizeSet, syntax, value, expected);
+    }, `${syntax} values are computed correctly [${value}]`);
+}
+    test(function() {
+        assert_equals(computedStyle.getPropertyValue('--length-percentage-1'), '170px');
+        assert_equals(computedStyle.getPropertyValue('--length-percentage-2'), '18%');
+        assert_equals(computedStyle.getPropertyValue('--length-percentage-3'), 'calc(190px + -2%)');
+    }, "<length-percentage> values are computed correctly for " + id);
+test(function(){
+    const element = divWithFontSizeSet;
+    with_custom_property(element, '<length>', '14em', (name) => {
+        assert_computed_value(element, '<length>', `var(${name})`, '140px');
+    });
+}, '<length> values computed are correctly via var()-reference');
+    test(function() {
+        assert_equals(computedStyle.getPropertyValue('--csv-1'), '10px, 30px');
+        assert_equals(computedStyle.getPropertyValue('--csv-2'), '40px, 9px');
+        assert_equals(computedStyle.getPropertyValue('--csv-3'), '80px');
+    }, "<length># values are computed correctly for " + id);
+test(function(){
+    const element = divWithFontSizeInherited;
+    with_custom_property(element, '<length>', '14em', (name) => {
+        assert_computed_value(element, '<length>', `var(${name})`, '140px');
+    });
+}, '<length> values computed are correctly via var()-reference when font-size is inherited');
+    test(function() {
+        assert_equals(computedStyle.getPropertyValue('--csv-4'), '3%, 80px, 22px');
+        assert_equals(computedStyle.getPropertyValue('--csv-5'), 'calc(10px + 50%), 4px');
+        assert_equals(computedStyle.getPropertyValue('--csv-6'), 'calc(37px + 13%)');
+    }, "<length-percentage># values are computed correctly for " + id);
+test(function(){
+    const element = divWithFontSizeInherited;
+    assert_computed_value(element, '<length>', '14em', '140px');
+}, '<length> values are computed correctly when font-size is inherited [14em]');
     test(function() {
         assert_equals(computedStyle.getPropertyValue('--list-1'), '10px 30px');
         assert_equals(computedStyle.getPropertyValue('--list-2'), '40px 9px');
     }, "<length>+ values are computed correctly for " + id);
+test(function(){
+    const element = divWithFontSizeInherited;
+    assert_computed_value(element, '<length>', 'calc(14em + 10px)', '150px');
+}, '<length> values are computed correctly when font-size is inherited [calc(14em + 10px)]');
+    test(function() {
+        assert_equals(computedStyle.getPropertyValue('--list-3'), '3% 80px 22px');
+        assert_equals(computedStyle.getPropertyValue('--list-4'), 'calc(10px + 50%) 4px');
+    }, "<length-percentage>+ values are computed correctly for " + id);
+test_computed_value('<length>', '12px', '12px');
+test_computed_value('<length>', '13vw', length_ref('13vw'));
+test_computed_value('<length>', '14em', '140px');
+test_computed_value('<length>', '15vmin', length_ref('15vmin'));
+test_computed_value('<length>', 'calc(16px - 7em + 10vh)', length_ref('calc(10vh - 54px)'));
+    test(function() {
+        assert_equals(computedStyle.getPropertyValue('--transform-function-1'), 'translateX(2px)');
+        assert_equals(computedStyle.getPropertyValue('--transform-function-2'), 'translateX(100px)');
+        assert_equals(computedStyle.getPropertyValue('--transform-function-3'), 'translateX(calc(110px + 10%))');
+        assert_equals(computedStyle.getPropertyValue('--transform-function-4'), 'translateX(10%) scale(2)');
+    }, "<transform-function> values are computed correctly for " + id);
+}
+test_computed_value('<length-percentage>', '17em', '170px');
+test_computed_value('<length-percentage>', '18%', '18%');
+test_computed_value('<length-percentage>', 'calc(19em - 2%)', 'calc(-2% + 190px)');
+test_computed_value('<length>#', '10px, 3em', '10px, 30px');
+test_computed_value('<length>#', '4em ,9px', '40px, 9px');
+test_computed_value('<length>#', '8em', '80px');
+test_computed_value('<length-percentage>#', '3% , 10vmax  , 22px', ['3%', length_ref('10vmax'), '22px'].join(', '));
+test_computed_value('<length-percentage>#', 'calc(50% + 1em), 4px', 'calc(50% + 10px), 4px');
+test_computed_value('<length-percentage>#', 'calc(13% + 37px)', 'calc(13% + 37px)');
+test_computed_value('<length>+', '10px 3em', '10px 30px');
+test_computed_value('<length>+', '4em 9px', '40px 9px');
+test_computed_value('<length-percentage>+', '3% 10vmax 22px', ['3%', length_ref('10vmax'), '22px'].join(' '));
+test_computed_value('<length-percentage>+', 'calc(50% + 1em) 4px', 'calc(50% + 10px) 4px');
+test_computed_value('<transform-function>', 'translateX(2px)', 'translateX(2px)');
+test_computed_value('<transform-function>', 'translateX(10em)', 'translateX(100px)');
+test_computed_value('<transform-function>', 'translateX(calc(11em + 10%))', 'translateX(calc(10% + 110px))');
+test_computed_value('<transform-function>+', 'translateX(10%) scale(2)', 'translateX(10%) scale(2)');
+test_computed_value('<integer>', '15', '15');
+test_computed_value('<integer>', 'calc(15 + 15)', '30');
+test_computed_value('<integer>', 'calc(2.4)', '2');
+test_computed_value('<integer>', 'calc(2.6)', '3');
+test_computed_value('<integer>', 'calc(2.6 + 3.1)', '6');
+test_computed_value('<integer>+', '15 calc(2.4) calc(2.6)', '15 2 3');
+test_computed_value('<color>', '#ff0000', 'rgb(255, 0, 0)');
+test_computed_value('<color>', '#000f00', 'rgb(0, 15, 0)');
+test_computed_value('<color>', '#00000a', 'rgb(0, 0, 10)');
+test_computed_value('<color>', '#badbee', 'rgb(186, 219, 238)');
+test_computed_value('<color>', '#badbee33', 'rgba(186, 219, 238, 0.2)');
+test_computed_value('<color>', 'tomato', 'rgb(255, 99, 71)');
+test_computed_value('<color>', 'plum', 'rgb(221, 160, 221)');
+test_computed_value('<color>', 'currentcolor', 'currentcolor');
+// Custom ident values that look like color keywords should not be converted.
+test_computed_value('*', 'tomato', 'tomato');
+test_computed_value('tomato | plum', 'plum', 'plum');
+test_computed_value('tomato | plum | <color>', 'plum', 'plum');
+test_computed_value('*', '-50grad', '-50grad');
+test_computed_value('<angle>', '180deg', '180deg');
+test_computed_value('<angle>', '400grad', '360deg');
+test_computed_value('<angle>', 'calc(360deg + 400grad)', '720deg');
+test_computed_value('*', '50s', '50s');
+test_computed_value('<time>', '1s', '1s');
+test_computed_value('<time>', '1000ms', '1s');
+test_computed_value('<time>', 'calc(1000ms + 1s)', '2s');
+test_computed_value('*', '50dpi', '50dpi');
+test_computed_value('<resolution>', '1dppx', '1dppx');
+test_computed_value('<resolution>', '96dpi', '1dppx');
+test_computed_value('<resolution>', 'calc(1dppx + 96dpi)', '2dppx');
 </script>

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-cssom-expected.txt

-                      r237697
+                      r239365
 PASS CSSOM setters function as expected for unregistered properties
 FAIL CSS.registerProperty The given initial value does not parse for the given syntax.
 FAIL Formerly valid values are still readable from inline styles but are computed as the unset value assert_equals: expected "blue" but got "hello"
+FAIL Formerly valid values are still readable from inline styles but are computed as the unset value assert_equals: expected "rgb(0, 0, 255)" but got "hello"
 FAIL Values not matching the registered type can't be set assert_equals: expected "hello" but got "20"
 FAIL Values can be removed from inline styles assert_equals: expected "red" but got " red"
+FAIL Values can be removed from inline styles assert_equals: expected "rgb(255, 0, 0)" but got " red"
 PASS Stylesheets can be modified by CSSOM
 FAIL Valid values can be set on inline styles assert_equals: expected "blue" but got " blue"
+FAIL Valid values can be set on inline styles assert_equals: expected "rgb(255, 192, 203)" but got "pink"

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-cssom.html

-                      r236444
+                      r239365
   assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');
   assert_equals(computedStyle.getPropertyValue('--length'), '0px');
   assert_equals(computedStyle.getPropertyValue('--color'), 'blue');
+  assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(0, 0, 255)');
 }, "Formerly valid values are still readable from inline styles but are computed as the unset value");
 …
   assert_equals(inlineStyle.getPropertyValue('--color'), '');
   assert_equals(computedStyle.getPropertyValue('--length'), '10px');
   assert_equals(computedStyle.getPropertyValue('--color'), 'red');
+  assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(255, 0, 0)');
 }, "Values can be removed from inline styles");
 …
   assert_equals(inlineStyle.getPropertyValue('--color'), 'pink');
   assert_equals(computedStyle.getPropertyValue('--length'), '30px');
   assert_equals(computedStyle.getPropertyValue('--color'), 'pink');
+  assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(255, 192, 203)');
   inlineStyle.setProperty('--color', 'inherit');
   assert_equals(inlineStyle.getPropertyValue('--color'), 'inherit');
   assert_equals(computedStyle.getPropertyValue('--color'), 'blue');
+  assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(0, 0, 255)');
 }, "Valid values can be set on inline styles");
 </script>

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-initial-expected.txt

-                      r236828
+                      r239365
+FAIL Initial values of registered properties can be referenced when no custom properties are explicitly set. The given initial value does not parse for the given syntax.
+PASS Initial value for <length> correctly computed [calc(10px + 15px)]
+FAIL Initial value for <length-percentage> correctly computed [calc(1in + 10% + 4px)] The given initial value does not parse for the given syntax.
+FAIL Initial value for <color> correctly computed [pink, inherits] The given initial value does not parse for the given syntax.
+FAIL Initial value for <color> correctly computed [purple] The given initial value does not parse for the given syntax.
+FAIL Initial value for <transform-function> correctly computed [rotate(42deg)] The given initial value does not parse for the given syntax.
+FAIL Initial value for <transform-list> correctly computed [scale(calc(2 + 2))] The given initial value does not parse for the given syntax.
+FAIL Initial value for <transform-list> correctly computed [scale(calc(2 + 1)) translateX(calc(3px + 1px))] The given initial value does not parse for the given syntax.
+FAIL Initial inherited value can be substituted [purple, color] The given initial value does not parse for the given syntax.
+FAIL Initial non-inherited value can be substituted [pink, background-color] The given initial value does not parse for the given syntax.

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-initial.html

-                      r236444
+                      r239365
 <!DOCTYPE HTML>
+<!DOCTYPE html>
 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-propertydescriptor-initialvalue" />
 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#register-a-custom-property" />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<style>
+#target {
+  background: var(--inherited-color);
+  color: var(--non-inherited-color);
+}
+</style>
+<script src="./resources/utils.js"></script>
 <div id=target></div>
 <script>
-test(function() {
-    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', inherits: false});
-    CSS.registerProperty({name: '--transform-function', syntax: '<transform-function>', initialValue: 'rotate(42deg)', 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('--transform-function'), 'rotate(42deg)');
     assert_equals(computedStyle.getPropertyValue('--single-transform-list'), 'scale(4)');
+    assert_equals(computedStyle.getPropertyValue('--multiple-transform-list'), 'scale(3) translateX(4px)');
+function test_initial_value(reg, expected) {
+    let suffix = reg.inherits === true ? ', inherits' : '';
+    test(function(){
+        let name = generate_property(reg);
+        let actual = getComputedStyle(target).getPropertyValue(name);
+        assert_equals(actual, expected);
+    }, `Initial value for ${reg.syntax} correctly computed [${reg.initialValue}${suffix}]`);
+}
+    assert_equals(computedStyle.backgroundColor, 'rgb(255, 192, 203)');
+    assert_equals(computedStyle.color, 'rgb(128, 0, 128)');
+}, "Initial values of registered properties can be referenced when no custom properties are explicitly set.");
+test_initial_value({ syntax: '<length>', initialValue: 'calc(10px + 15px)' }, '25px');
+test_initial_value({ syntax: '<length-percentage>', initialValue: 'calc(1in + 10% + 4px)' }, 'calc(10% + 100px)');
+test_initial_value({ syntax: '<color>', initialValue: 'pink', inherits: true }, 'rgb(255, 192, 203)');
+test_initial_value({ syntax: '<color>', initialValue: 'purple' }, 'rgb(128, 0, 128)');
+test_initial_value({ syntax: '<transform-function>', initialValue: 'rotate(42deg)' }, 'rotate(42deg)');
+test_initial_value({ syntax: '<transform-list>', initialValue: 'scale(calc(2 + 2))' }, 'scale(4)');
+test_initial_value({ syntax: '<transform-list>', initialValue: 'scale(calc(2 + 1)) translateX(calc(3px + 1px))' }, 'scale(3) translateX(4px)');
+// Test that the initial value of the custom property 'reg' is successfully
+// substituted into 'property'.
+function test_substituted_value(reg, property, expected) {
+    let inherits_text = reg.inherits === true ? 'inherited' : 'non-inherited';
+    test(function(){
+        try {
+            let name = generate_property(reg);
+            target.style = `${property}:var(${name});`;
+            assert_equals(getComputedStyle(target).getPropertyValue(property), expected);
+        } finally {
+            target.style = '';
+        }
+    }, `Initial ${inherits_text} value can be substituted [${reg.initialValue}, ${property}]`);
+}
+test_substituted_value({ syntax: '<color>', initialValue: 'purple', inherits: true }, 'color', 'rgb(128, 0, 128)');
+test_substituted_value({ syntax: '<color>', initialValue: 'pink' }, 'background-color', 'rgb(255, 192, 203)');
 </script>

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/typedom.tentative-expected.txt

-                      r239341
+                      r239365
 CONSOLE MESSAGE: line 349: TypeError: CSS.px is not a function. (In 'CSS.px(15)', 'CSS.px' is undefined)
+CONSOLE MESSAGE: line 38: TypeError: target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
 Harness Error (FAIL), message = TypeError: CSS.px is not a function. (In 'CSS.px(15)', 'CSS.px' is undefined)
+Harness Error (FAIL), message = TypeError: target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
 FAIL Computed * is reified as CSSUnparsedValue target.computedStyleMap is not a function. (In 'target.computedStyleMap()', 'target.computedStyleMap' is undefined)
-FAIL Computed <angle> is reified as CSSUnitValue The given initial value does not parse for the given syntax.
-FAIL Computed <color> is reified as CSSStyleValue The given initial value does not parse for the given syntax.
-FAIL Computed <custom-ident> is reified as CSSKeywordValue The given initial value does not parse for the given syntax.
-FAIL Computed <image> [url] is reified as CSSImageValue The given initial value does not parse for the given syntax.
-FAIL Computed <integer> is reified as CSSUnitValue The given initial value does not parse for the given syntax.
-FAIL Computed <length-percentage> [%] is reified as CSSUnitValue target.computedStyleMap is not a function. (In 'target.computedStyleMap()', 'target.computedStyleMap' is undefined)
-FAIL Computed <length-percentage> [px] is reified as CSSUnitValue target.computedStyleMap is not a function. (In 'target.computedStyleMap()', 'target.computedStyleMap' is undefined)
-FAIL Computed <length-percentage> [px + %] is reified as CSSMathSum Can't find variable: CSSMathSum
-FAIL Computed <length> is reified as CSSUnitValue target.computedStyleMap is not a function. (In 'target.computedStyleMap()', 'target.computedStyleMap' is undefined)
-FAIL Computed <number> is reified as CSSUnitValue The given initial value does not parse for the given syntax.
-FAIL Computed <percentage> is reified as CSSUnitValue target.computedStyleMap is not a function. (In 'target.computedStyleMap()', 'target.computedStyleMap' is undefined)
-FAIL Computed <resolution> is reified as CSSUnitValue The given initial value does not parse for the given syntax.
-FAIL Computed <time> is reified as CSSUnitValue The given initial value does not parse for the given syntax.
-FAIL Computed <url> is reified as CSSStyleValue The given initial value does not parse for the given syntax.
-FAIL Computed ident is reified as CSSKeywordValue The given initial value does not parse for the given syntax.
-FAIL First computed value correctly reified in space-separated list The given initial value does not parse for the given syntax.
-FAIL First computed value correctly reified in comma-separated list The given initial value does not parse for the given syntax.
-FAIL All computed values correctly reified in space-separated list The given initial value does not parse for the given syntax.
-FAIL All computed values correctly reified in comma-separated list The given initial value does not parse for the given syntax.
-FAIL attributeStyleMap.get returns CSSUnparsedValue for value with var references target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSUnparsedValue for value with var references undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSUnparsedValue for value with var references in list target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSUnparsedValue for value with var references in list undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSUnparsedValue for * target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSUnparsedValue for * undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSUnitValue for <angle> target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSUnitValue for <angle> undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSStyleValue for <color> target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSStyleValue for <color> undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSKeywordValue for <custom-ident> target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSKeywordValue for <custom-ident> undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSImageValue for <image> target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSImageValue for <image> undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSUnitValue for <integer> target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSUnitValue for <integer> undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSUnitValue for <length-percentage> [10%] target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSUnitValue for <length-percentage> [10%] undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSUnitValue for <length-percentage> [10px] target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSUnitValue for <length-percentage> [10px] undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSMathSum for <length-percentage> [calc(10px + 10%)] target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSMathSum for <length-percentage> [calc(10px + 10%)] undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSUnitValue for <length> target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSUnitValue for <length> undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSUnitValue for <number> target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSUnitValue for <number> undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSUnitValue for <percentage> target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSUnitValue for <percentage> undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSUnitValue for <resolution> target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSUnitValue for <resolution> undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSUnitValue for <time> target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSUnitValue for <time> undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSStyleValue for <url> target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSStyleValue for <url> undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSKeywordValue for thing1 | THING2 target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSKeywordValue for thing1 | THING2 undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSUnitValue for <length>+ target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSUnitValue for <length>+ undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.get returns CSSUnitValue for <length># target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.get returns CSSUnitValue for <length># undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.getAll returns a list of CSSUnitValues for <length>+ target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.getAll returns a list of CSSUnitValues for <length>+ undefined is not an object (evaluating 'rule.styleMap.clear')
-FAIL attributeStyleMap.getAll returns a list of CSSUnitValues for <length># target.attributeStyleMap.clear is not a function. (In 'target.attributeStyleMap.clear()', 'target.attributeStyleMap.clear' is undefined)
-FAIL styleMap.getAll returns a list of CSSUnitValues for <length># undefined is not an object (evaluating 'rule.styleMap.clear')

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/typedom.tentative.html

-                      r236444
+                      r239365
+}
+// Cleans style rules used for testing between every test.
+add_result_callback(function(){
+    target.attributeStyleMap.clear();
+    // Clears 'div' rule in #style:
+    style.sheet.rules[0].styleMap.clear();
+});
 // On the target element, verify that computed value of 'name' is an instance
 // of 'expected' and not an instance of CSSUnparsedValue.
 …
     styleDecl.setProperty(name2, `var(${name1})`);
     assert_true(propertyMap.get(name2) instanceof CSSUnparsedValue);
 }, name => `${name}.get returns CSSUnparsedValue for value with var references`);
+}, name => `StylePropertyMap.get returns CSSUnparsedValue for value with var references (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
 …
     styleDecl.setProperty(name2, `1px, var(${name1}), 3px`);
     assert_true(propertyMap.get(name2) instanceof CSSUnparsedValue);
 }, name => `${name}.get returns CSSUnparsedValue for value with var references in list`);
+}, name => `StylePropertyMap.get returns CSSUnparsedValue for value with var references in list (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '*', 'if(){}', CSSUnparsedValue);
 }, name => `${name}.get returns CSSUnparsedValue for *`);
+}, name => `StylePropertyMap.get returns CSSUnparsedValue for * (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<angle>', '42deg', CSSUnitValue);
 }, name => `${name}.get returns CSSUnitValue for <angle>`);
+}, name => `StylePropertyMap.get returns CSSUnitValue for <angle> (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<color>', '#fefefe', CSSStyleValue);
 }, name => `${name}.get returns CSSStyleValue for <color>`);
+}, name => `StylePropertyMap.get returns CSSStyleValue for <color> (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<custom-ident>', 'none', CSSKeywordValue);
 }, name => `${name}.get returns CSSKeywordValue for <custom-ident>`);
+}, name => `StylePropertyMap.get returns CSSKeywordValue for <custom-ident> (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<image>', 'url(thing.png)', CSSImageValue);
 }, name => `${name}.get returns CSSImageValue for <image>`);
+}, name => `StylePropertyMap.get returns CSSImageValue for <image> (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<integer>', '100', CSSUnitValue);
 }, name => `${name}.get returns CSSUnitValue for <integer>`);
+}, name => `StylePropertyMap.get returns CSSUnitValue for <integer> (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<length-percentage>', '10%', CSSUnitValue);
 }, name => `${name}.get returns CSSUnitValue for <length-percentage> [10%]`);
+}, name => `StylePropertyMap.get returns CSSUnitValue for <length-percentage> [10%] (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<length-percentage>', '10px', CSSUnitValue);
 }, name => `${name}.get returns CSSUnitValue for <length-percentage> [10px]`);
+}, name => `StylePropertyMap.get returns CSSUnitValue for <length-percentage> [10px] (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<length-percentage>', 'calc(10px + 10%)', CSSMathSum);
 }, name => `${name}.get returns CSSMathSum for <length-percentage> [calc(10px + 10%)]`);
+}, name => `StylePropertyMap.get returns CSSMathSum for <length-percentage> [calc(10px + 10%)] (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<length>', '10px', CSSUnitValue);
 }, name => `${name}.get returns CSSUnitValue for <length>`);
+}, name => `StylePropertyMap.get returns CSSUnitValue for <length> (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<number>', '42', CSSUnitValue);
 }, name => `${name}.get returns CSSUnitValue for <number>`);
+}, name => `StylePropertyMap.get returns CSSUnitValue for <number> (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<percentage>', '10%', CSSUnitValue);
 }, name => `${name}.get returns CSSUnitValue for <percentage>`);
+}, name => `StylePropertyMap.get returns CSSUnitValue for <percentage> (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<resolution>', '300dpi', CSSUnitValue);
 }, name => `${name}.get returns CSSUnitValue for <resolution>`);
+}, name => `StylePropertyMap.get returns CSSUnitValue for <resolution> (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<time>', '42s', CSSUnitValue);
 }, name => `${name}.get returns CSSUnitValue for <time>`);
+}, name => `StylePropertyMap.get returns CSSUnitValue for <time> (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<url>', 'url(a)', CSSStyleValue);
 }, name => `${name}.get returns CSSStyleValue for <url>`);
+}, name => `StylePropertyMap.get returns CSSStyleValue for <url> (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, 'thing1 | THING2', 'thing1', CSSKeywordValue);
 }, name => `${name}.get returns CSSKeywordValue for thing1 | THING2`);
+}, name => `StylePropertyMap.get returns CSSKeywordValue for thing1 | THING2 (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<length>+', '10px 20px', CSSUnitValue);
 }, name => `${name}.get returns CSSUnitValue for <length>+`);
+}, name => `StylePropertyMap.get returns CSSUnitValue for <length>+ (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
     assert_attribute_get_type(styleDecl, propertyMap, '<length>#', '10px 20px', CSSUnitValue);
 }, name => `${name}.get returns CSSUnitValue for <length>#`);
+}, name => `StylePropertyMap.get returns CSSUnitValue for <length># (${name})`);
 // attributeStyleMap.getAll
 …
     assert_equals(propertyMap.getAll(name).length, 3);
     assert_true(propertyMap.getAll(name).every(x => x instanceof CSSUnitValue));
 }, name => `${name}.getAll returns a list of CSSUnitValues for <length>+`);
+}, name => `StylePropertyMap.getAll returns a list of CSSUnitValues for <length>+ (${name})`);
 test_style_property_map_get(function(styleDecl, propertyMap){
 …
     assert_equals(propertyMap.getAll(name).length, 3);
     assert_true(propertyMap.getAll(name).every(x => x instanceof CSSUnitValue));
 }, name => `${name}.getAll returns a list of CSSUnitValues for <length>#`);
+}, name => `StylePropertyMap.getAll returns a list of CSSUnitValues for <length># (${name})`);
 // StylePropertyMap.set
 …
         propertyMap.clear();
+        let ensureArray = v => v.constructor === Array ? v : [v];
         for (let value of options.shouldAccept)
             propertyMap.set(name, value);
+            propertyMap.set(name, ...ensureArray(value));
         for (let value of options.shouldReject) {
             assert_throws(new TypeError(), () => propertyMap.set(name, value));
+            assert_throws(new TypeError(), () => propertyMap.set(name, ...ensureArray(value)));
+        }
     }, `${propertyMapName}.set accepts correct CSSUnitValues for ${options.syntax}`);
+    }, `StylePropertyMap.set accepts correct CSSStyleValues for ${options.syntax} (${propertyMapName})`);
+}
 …
     initialValue: '0deg',
     shouldAccept: [CSS.deg(42), CSS.turn(2), '42deg'],
     shouldReject: [unparsed('42deg'), CSS.px(15), '50px'],
+    shouldReject: [unparsed('42deg'), CSS.px(15), '50px', [CSS.deg(15), '10deg']],
 });
 …
     initialValue: 'none',
     shouldAccept: [keyword('foo'), 'foo'],
     shouldReject: [unparsed('foo'), CSS.px(15), '15px'],
+    shouldReject: [unparsed('foo'), CSS.px(15), '15px', [keyword('foo'), 'foo']],
 });
 …
     initialValue: 'url(a)',
     shouldAccept: [url_image('url(b)'), 'url(b)'],
     shouldReject: [unparsed('url(b)'), CSS.px(100), '50px'],
+    shouldReject: [unparsed('url(b)'), CSS.px(100), '50px', [url_image('url(1)'), 'url(2)']],
 });
 …
     syntax: '<integer>',
     initialValue: '0',
     shouldAccept: [CSS.number(1), CSS.number(-42), '1', '-42'],
     shouldReject: [unparsed('42'), CSS.px(100), '50px'],
+    shouldAccept: [CSS.number(1), CSS.number(-42), '1', '-42', 'calc(2.4)'],
+    shouldReject: [unparsed('42'), CSS.px(100), '50px', [CSS.number(42), '42'], 'calc(2px + 1px)'],
 });
 …
     initialValue: '0px',
     shouldAccept: [CSS.percent(10), CSS.px(1), CSS.em(1), '10px', '10%'],
     shouldReject: [unparsed('10%'), unparsed('10px'), CSS.dpi(1), 'url(b)'],
+    shouldReject: [unparsed('10%'), unparsed('10px'), CSS.dpi(1), 'url(b)', [CSS.percent(10), '10%']],
 });
 …
     initialValue: '0px',
     shouldAccept: [CSS.px(10), CSS.em(10), CSS.vh(200), sum(CSS.px(10), CSS.em(20)), '10em', 'calc(10px + 10em)'],
     shouldReject: [unparsed('10px'), CSS.percent(1), 'url(b)'],
+    shouldReject: [unparsed('10px'), CSS.percent(1), 'url(b)', [CSS.em(10), '10px']],
 });
 …
     initialValue: '0',
     shouldAccept: [CSS.number(1337), CSS.number(-42.5), '1337', '-42.5'],
     shouldReject: [unparsed('42'), CSS.px(15), '#fef'],
+    shouldReject: [unparsed('42'), CSS.px(15), '#fef', [CSS.number(-42.5), '42.5']],
 });
 …
     initialValue: '0%',
     shouldAccept: [CSS.percent(10), '10%'],
     shouldReject: [unparsed('10%'), CSS.px(1), '#fef'],
+    shouldReject: [unparsed('10%'), CSS.px(1), '#fef', [CSS.percent(10), '1%']],
 });
 …
     initialValue: '0dpi',
     shouldAccept: [CSS.dpi(100), CSS.dpcm(10), CSS.dppx(50), '100dpi'],
     shouldReject: [unparsed('42'), CSS.px(15), '#fef'],
+    shouldReject: [unparsed('42'), CSS.px(15), '#fef', [CSS.dpi(1), '2dpi']],
 });
 …
     initialValue: '0s',
     shouldAccept: [CSS.s(42), CSS.ms(16), '16ms'],
     shouldReject: [unparsed('42s'), CSS.px(15), '#fef'],
+    shouldReject: [unparsed('42s'), CSS.px(15), '#fef', [CSS.s(5), '6s']],
 });
 …
     initialValue: 'url(a)',
     shouldAccept: [url_image('url(b)')],
     shouldReject: [unparsed('url(b)'), CSS.px(100), '#fef'],
+    shouldReject: [unparsed('url(b)'), CSS.px(100), '#fef', [url_image('url(1)'), 'url(2)']],
 });
 …
     initialValue: 'none',
     shouldAccept: [keyword('thing'), keyword('THING'), 'thing'],
     shouldReject: [unparsed('thing'), CSS.px(15), keyword('notathing'), 'notathing'],
+    shouldReject: [unparsed('thing'), CSS.px(15), keyword('notathing'), 'notathing', [keyword('thing'), keyword('thing')]],
 });
 …
     initialValue: '0deg',
     shouldAccept: [CSS.deg(42), CSS.turn(2), CSS.px(10), CSS.em(10), '10deg', '10px'],
+    shouldReject: [unparsed('42deg'), unparsed('20px'), CSS.s(1), '#fef'],
+    shouldReject: [unparsed('42deg'), unparsed('20px'), CSS.s(1), '#fef', [CSS.deg(42), '21deg']],
+});
+// StylePropertyMap.set for list-valued properties:
+test_style_property_map_set({
+    syntax: '<angle>+',
+    initialValue: '0deg',
+    shouldAccept: [CSS.deg(15), [CSS.deg(15), '10deg'], '15deg 10deg'],
+    shouldReject: [[CSS.deg(15), CSS.px(10)], '15deg 10px'],
+});
+test_style_property_map_set({
+    syntax: '<custom-ident>+',
+    initialValue: 'none',
+    shouldAccept: [keyword('foo'), [keyword('foo'), 'bar'], 'foo bar'],
+    shouldReject: [[keyword('foo'), CSS.px(10)], 'foo 10px'],
+});
+test_style_property_map_set({
+    syntax: '<image>+',
+    initialValue: 'url(a)',
+    shouldAccept: [url_image('url(1)'), [url_image('url(1)'), 'url(2)'], 'url(1) url(2)'],
+    shouldReject: [[url_image('url(1)'), CSS.px(10)], 'url(1) 10px'],
+});
+test_style_property_map_set({
+    syntax: '<integer>+',
+    initialValue: '0',
+    shouldAccept: [CSS.number(42), [CSS.number(42), '42'], '42 42', 'calc(2.4) calc(2.6)'],
+    shouldReject: [[CSS.number(42), keyword('noint')], '42 noint', 'calc(2px + 2px)'],
+});
+test_style_property_map_set({
+    syntax: '<length-percentage>+',
+    initialValue: '0px',
+    shouldAccept: [CSS.percent(10), [CSS.percent(10), '10%']],
+    shouldReject: [[CSS.percent(10), keyword('nolength')], '10% nolength'],
+});
+test_style_property_map_set({
+    syntax: '<length>+',
+    initialValue: '0px',
+    shouldAccept: [CSS.em(10), [CSS.em(10), '10px']],
+    shouldReject: [[CSS.em(10), keyword('nolength'), '10em nolength']],
+});
+test_style_property_map_set({
+    syntax: '<number>+',
+    initialValue: '0',
+    shouldAccept: [CSS.number(-42.5), [CSS.number(-42.5), '42.5'], '-42.5 42.5'],
+    shouldReject: [[CSS.number(-42.5), CSS.px(10)], '-42.5 10px'],
+});
+test_style_property_map_set({
+    syntax: '<percentage>+',
+    initialValue: '0%',
+    shouldAccept: [CSS.percent(10), [CSS.percent(10), '1%'], '10% 1%'],
+    shouldReject: [[CSS.percent(10), keyword('foo')], '10% foo'],
+});
+test_style_property_map_set({
+    syntax: '<resolution>+',
+    initialValue: '0dpi',
+    shouldAccept: [CSS.dpi(1), [CSS.dpi(1), '2dpi'], '1dpi 2dpi'],
+    shouldReject: [[CSS.dpi(1), keyword('foo')], '1dpi foo'],
+});
+test_style_property_map_set({
+    syntax: '<time>+',
+    initialValue: '0s',
+    shouldAccept: [CSS.s(5), [CSS.s(5), '6s'], '5s 6s'],
+    shouldReject: [[CSS.s(5), keyword('foo')], '5s foo'],
+});
+test_style_property_map_set({
+    syntax: '<url>+',
+    initialValue: 'url(a)',
+    shouldAccept: [url_image('url(1)'), [url_image('url(1)'), 'url(2)'], 'url(1) url(2)'],
+    shouldReject: [[url_image('url(1)'), CSS.px(10)], 'url(1) 10px'],
+});
+test_style_property_map_set({
+    syntax: 'thing+',
+    initialValue: 'thing',
+    shouldAccept: [keyword('thing'), [keyword('thing'), 'thing'], 'thing thing'],
+    shouldReject: [[keyword('thing'), CSS.px(10)], 'thing 10px'],
+});
+test_style_property_map_set({
+    syntax: '<length>#',
+    initialValue: '0px',
+    shouldAccept: [CSS.em(10), [CSS.em(10), '10px']],
+    shouldReject: [[CSS.em(10), keyword('nolength'), '10em nolength']],
+});
+function test_append_for_property_map(propertyMapName, propertyMap, options) {
+    test(function(){
+        let name = gen_prop(options.syntax, options.initialValue);
+        let ensureArray = v => v.constructor === Array ? v : [v];
+        for (let value of options.values) {
+            propertyMap.clear();
+            if (value.base !== null)
+                propertyMap.set(name, ...ensureArray(value.base));
+            // If 'null' is expected, it means we expect the append to fail.
+            if (value.expect !== null) {
+                propertyMap.append(name, ...ensureArray(value.append));
+                let actual = Array.from(propertyMap.getAll(name)).join(' ');
+                assert_equals(actual, value.expect);
+            } else {
+                assert_throws(new TypeError(), () => propertyMap.append(name, ...ensureArray(value.append)));
+            }
+        }
+    }, `StylePropertyMap.append accepts correct CSSStyleValues for ${options.syntax} (${propertyMapName})`);
+}
+// Verify that the correct CSSStyleValues are accepted/rejected when
+// appending values to list-valued properties.
+//
+// The same test is performed twice: once for attributeStyleMap, and once
+// for styleMap.
+function test_append(options) {
+    test_append_for_property_map('attributeStyleMap', target.attributeStyleMap, options);
+    test_append_for_property_map('styleMap', style.sheet.rules[0].styleMap, options);
+}
+test_append({
+    syntax: '<angle>+',
+    initialValue: '0deg',
+    values: [
+        { base: [CSS.deg(1)], append: [CSS.px(1)], expect: null },
+        { base: [CSS.deg(1)], append: [CSS.deg(2), CSS.px(1)], expect: null },
+        { base: [CSS.deg(1)], append: [CSS.deg(2), '1px'], expect: null },
+        { base: [CSS.deg(1)], append: [CSS.turn(2), CSS.deg(3)], expect: '1deg 2turn 3deg' },
+        { base: [CSS.deg(1), CSS.deg(2)], append: [CSS.deg(3)], expect: '1deg 2deg 3deg' },
+        { base: [CSS.deg(1)], append: [CSS.deg(2), '3deg'], expect: '1deg 2deg 3deg' },
+        { base: [CSS.deg(1)], append: [CSS.deg(2), '3turn 4deg'], expect: '1deg 2deg 3turn 4deg' },
+        { base: null, append: [CSS.deg(1), '2deg'], expect: '1deg 2deg' },
+    ],
+});
+test_append({
+    syntax: '<custom-ident>+',
+    initialValue: 'none',
+    values: [
+        { base: [keyword('foo')], append: [CSS.px(1)], expect: null },
+        { base: [keyword('foo')], append: [keyword('bar'), CSS.px(1)], expect: null },
+        { base: [keyword('foo')], append: [keyword('bar'), '1px'], expect: null },
+        { base: [keyword('foo')], append: [keyword('bar'), keyword('baz')], expect: 'foo bar baz' },
+        { base: [keyword('foo'), keyword('bar')], append: [keyword('baz')], expect: 'foo bar baz' },
+        { base: [keyword('foo')], append: [keyword('bar'), 'baz'], expect: 'foo bar baz' },
+        { base: [keyword('foo')], append: [keyword('bar'), 'baz zim'], expect: 'foo bar baz zim' },
+        { base: null, append: [keyword('foo'), 'bar'], expect: 'foo bar' },
+    ],
+});
+['<image>+', '<url>+'].forEach((syntax) => {
+    test_append({
+        syntax: syntax,
+        initialValue: 'url(0)',
+        values: [
+            { base: [url_image('url("1")')], append: [CSS.px(1)], expect: null },
+            { base: [url_image('url("1")')], append: [url_image('url("2")'), CSS.px(1)], expect: null },
+            { base: [url_image('url("1")')], append: [url_image('url("2")'), '1px'], expect: null },
+            { base: [url_image('url("1")')], append: [url_image('url("2")'), url_image('url("3")')], expect: 'url("1") url("2") url("3")' },
+            { base: [url_image('url("1")'), url_image('url("2")')], append: [url_image('url("3")')], expect: 'url("1") url("2") url("3")' },
+            { base: [url_image('url("1")')], append: [url_image('url("2")'), 'url("3")'], expect: 'url("1") url("2") url("3")' },
+            { base: [url_image('url("1")')], append: [url_image('url("2")'), 'url("3") url("4")'], expect: 'url("1") url("2") url("3") url("4")' },
+            { base: null, append: [url_image('url("1")'), 'url("2")'], expect: 'url("1") url("2")' },
+        ],
+    });
+});
+test_append({
+    syntax: '<integer>+',
+    initialValue: '0',
+    values: [
+        { base: [CSS.number(1)], append: [CSS.px(1)], expect: null },
+        { base: [CSS.number(1)], append: [CSS.number(2), CSS.px(1)], expect: null },
+        { base: [CSS.number(1)], append: [CSS.number(2), 'noint'], expect: null },
+        { base: [CSS.number(1)], append: [CSS.number(2), CSS.number(3)], expect: '1 2 3' },
+        { base: [CSS.number(1), CSS.number(2)], append: [CSS.number(3)], expect: '1 2 3' },
+        { base: [CSS.number(1)], append: [CSS.number(2), '3'], expect: '1 2 3' },
+        { base: [CSS.number(1)], append: [CSS.number(2), '3 4'], expect: '1 2 3 4' },
+        { base: null, append: [CSS.number(1), '2'], expect: '1 2' },
+    ],
+});
+test_append({
+    syntax: '<length-percentage>+',
+    initialValue: '0px',
+    values: [
+        { base: [CSS.px(1)], append: [keyword('nolength')], expect: null },
+        { base: [CSS.px(1)], append: [CSS.px(2), keyword('nolength')], expect: null },
+        { base: [CSS.px(1)], append: [CSS.px(2), 'nolength'], expect: null },
+        { base: [CSS.px(1)], append: [CSS.px(2), CSS.percent(3)], expect: '1px 2px 3%' },
+        { base: [CSS.px(1), CSS.px(2)], append: [CSS.percent(3)], expect: '1px 2px 3%' },
+        { base: [CSS.px(1)], append: [CSS.percent(2), '3px'], expect: '1px 2% 3px' },
+        { base: [CSS.px(1)], append: [CSS.px(2), '3% 4px'], expect: '1px 2px 3% 4px' },
+        { base: null, append: [CSS.px(1), '2%'], expect: '1px 2%' },
+    ],
+});
+test_append({
+    syntax: '<length>+',
+    initialValue: '0',
+    values: [
+        { base: [CSS.px(1)], append: [keyword('nolength')], expect: null },
+        { base: [CSS.px(1)], append: [CSS.px(2), keyword('nolength')], expect: null },
+        { base: [CSS.px(1)], append: [CSS.px(2), 'nolength'], expect: null },
+        { base: [CSS.px(1)], append: [CSS.em(2), CSS.px(3)], expect: '1px 2em 3px' },
+        { base: [CSS.px(1), CSS.em(2)], append: [CSS.vh(3)], expect: '1px 2em 3vh' },
+        { base: [CSS.px(1)], append: [CSS.em(2), '3px'], expect: '1px 2em 3px' },
+        { base: [CSS.px(1)], append: [CSS.px(2), '3em 4cm'], expect: '1px 2px 3em 4cm' },
+        { base: null, append: [CSS.vh(1), '2px'], expect: '1vh 2px' },
+    ],
+});
+test_append({
+    syntax: '<number>+',
+    initialValue: '0',
+    values: [
+        { base: [CSS.number(-1)], append: [keyword('NaN')], expect: null },
+        { base: [CSS.number(-1)], append: [CSS.number(2.5), keyword('NaN')], expect: null },
+        { base: [CSS.number(-1)], append: [CSS.number(2.5), '1px'], expect: null },
+        { base: [CSS.number(-1)], append: [CSS.number(2.5), CSS.number(3.2)], expect: '-1 2.5 3.2' },
+        { base: [CSS.number(-1), CSS.number(2.5)], append: [CSS.number(3.2)], expect: '-1 2.5 3.2' },
+        { base: [CSS.number(-1)], append: [CSS.number(2.5), '3.2'], expect: '-1 2.5 3.2' },
+        { base: [CSS.number(-1)], append: [CSS.number(2.5), '3.2 4'], expect: '-1 2.5 3.2 4' },
+        { base: null, append: [CSS.number(-1), '2.5'], expect: '-1 2.5' },
+    ],
+});
+test_append({
+    syntax: '<percentage>+',
+    initialValue: '0%',
+    values: [
+        { base: [CSS.percent(1)], append: [CSS.px(1)], expect: null },
+        { base: [CSS.percent(1)], append: [CSS.percent(2), CSS.px(1)], expect: null },
+        { base: [CSS.percent(1)], append: [CSS.percent(2), '1px'], expect: null },
+        { base: [CSS.percent(1)], append: [CSS.percent(2), CSS.percent(3)], expect: '1% 2% 3%' },
+        { base: [CSS.percent(1), CSS.percent(2)], append: [CSS.percent(3)], expect: '1% 2% 3%' },
+        { base: [CSS.percent(1)], append: [CSS.percent(2), '3%'], expect: '1% 2% 3%' },
+        { base: [CSS.percent(1)], append: [CSS.percent(2), '3% 4%'], expect: '1% 2% 3% 4%' },
+        { base: null, append: [CSS.percent(1), '2%'], expect: '1% 2%' },
+    ],
+});
+test_append({
+    syntax: '<resolution>+',
+    initialValue: '0dpi',
+    values: [
+        { base: [CSS.dpi(1)], append: [CSS.px(1)], expect: null },
+        { base: [CSS.dpi(1)], append: [CSS.dpi(2), CSS.px(1)], expect: null },
+        { base: [CSS.dpi(1)], append: [CSS.dpi(2), '1px'], expect: null },
+        { base: [CSS.dpi(1)], append: [CSS.dpi(2), CSS.dpi(3)], expect: '1dpi 2dpi 3dpi' },
+        { base: [CSS.dpi(1), CSS.dpi(2)], append: [CSS.dpi(3)], expect: '1dpi 2dpi 3dpi' },
+        { base: [CSS.dpi(1)], append: [CSS.dpi(2), '3dpi'], expect: '1dpi 2dpi 3dpi' },
+        { base: [CSS.dpi(1)], append: [CSS.dpi(2), '3dpi 4dpi'], expect: '1dpi 2dpi 3dpi 4dpi' },
+        { base: null, append: [CSS.dpi(1), '2dpi'], expect: '1dpi 2dpi' },
+    ],
+});
+test_append({
+    syntax: '<time>+',
+    initialValue: '0s',
+    values: [
+        { base: [CSS.s(1)], append: [CSS.px(1)], expect: null },
+        { base: [CSS.s(1)], append: [CSS.s(2), CSS.px(1)], expect: null },
+        { base: [CSS.s(1)], append: [CSS.ms(2), '1px'], expect: null },
+        { base: [CSS.s(1)], append: [CSS.ms(2), CSS.s(3)], expect: '1s 2ms 3s' },
+        { base: [CSS.s(1), CSS.s(2)], append: [CSS.s(3)], expect: '1s 2s 3s' },
+        { base: [CSS.s(1)], append: [CSS.s(2), '3s'], expect: '1s 2s 3s' },
+        { base: [CSS.s(1)], append: [CSS.s(2), '3ms 4s'], expect: '1s 2s 3ms 4s' },
+        { base: null, append: [CSS.s(1), '2s'], expect: '1s 2s' },
+    ],
+});
+test_append({
+    syntax: 'foo+',
+    initialValue: 'foo',
+    values: [
+        { base: [keyword('foo')], append: [CSS.px(1)], expect: null },
+        { base: [keyword('foo')], append: [keyword('foo'), CSS.px(1)], expect: null },
+        { base: [keyword('foo')], append: [keyword('foo'), '1px'], expect: null },
+        { base: [keyword('foo')], append: [keyword('foo'), keyword('foo')], expect: 'foo foo foo' },
+        { base: [keyword('foo'), keyword('foo')], append: [keyword('foo')], expect: 'foo foo foo' },
+        { base: [keyword('foo')], append: [keyword('foo'), 'foo'], expect: 'foo foo foo' },
+        { base: [keyword('foo')], append: [keyword('foo'), 'foo foo'], expect: 'foo foo foo foo' },
+        { base: null, append: [keyword('foo'), keyword('foo')], expect: 'foo foo' },
+    ],
 });
 …
 }, 'CSSStyleValue.parse[All] returns list of CSSUnitValues for <length>#');
+// Direct CSSStyleValue objects:
+function gen_all_props() {
+    return [
+        gen_prop('*', 'foo'),
+        gen_prop('foo', 'foo'),
+        gen_prop('<angle>', '0deg'),
+        gen_prop('<color>', 'rgb(1, 2, 3)'),
+        gen_prop('<custom-ident>', 'thing'),
+        gen_prop('<image>', 'url(a)'),
+        gen_prop('<integer>', '0'),
+        gen_prop('<length-percentage>', 'calc(10px + 10%)'),
+        gen_prop('<length>', '0px'),
+        gen_prop('<number>', '0.5'),
+        gen_prop('<percentage>', '0%'),
+        gen_prop('<resolution>', '0dpi'),
+        gen_prop('<time>', '0s'),
+        gen_prop('<transform-function>', 'rotateX(0deg)'),
+        gen_prop('<transform-list>', 'rotateX(0deg)'),
+        gen_prop('<url>', 'url(a)')
+    ];
+}
+test(function(){
+    let props0 = gen_all_props();
+    let props1 = gen_all_props();
+    for (let i = 0; i < props0.length; i++) {
+        let prop0 = props0[i];
+        let prop1 = props1[i];
+        // Abuse computedStyleMap to get the initialValue (just to get some
+        // value that will parse for prop0/1's syntax).
+        let initialValue = target.computedStyleMap().get(prop0);
+        // We only care about direct CSSStyleValue instances in this test.
+        // Ultimately, in some future version of CSS TypedOM, we may have no
+        // direct CSSStyleValue instances at all, which is fine.
+        if (initialValue.constructor !== CSSStyleValue) {
+            continue;
+        }
+        let value = CSSStyleValue.parse(prop0, initialValue.toString());
+        // A value parsed for prop0 must be assignable to prop0.
+        target.attributeStyleMap.clear();
+        target.attributeStyleMap.set(prop0, value); // Don't throw.
+        // A value parsed for prop0 must not be assignable to prop1, even if
+        // the properties have compatible syntaxes.
+        assert_throws(new TypeError(), () => {
+            target.attributeStyleMap.clear();
+            target.attributeStyleMap.set(prop1, value);
+        });
+    }
+}, 'Direct CSSStyleValue instances are tied to their associated property');
+// StylePropertyMapReadOnly iteration
+test(function(){
+    let name = gen_prop('<length>', '10px');
+    let result = Array.from(target.computedStyleMap()).filter(e => e[0] == name)[0];
+    assert_true(typeof(result) !== 'undefined');
+}, 'Registered property with initial value show up on iteration of computedStyleMap');
+// Verifies that iterating a StylePropertyMap[ReadOnly] yields correctly
+// typed objects for a given syntax/value.
+function test_iteration_type_for_property_map(propertyMapName, propertyMap, options) {
+    test(function(){
+        let name = gen_prop(options.syntax, options.initialValue);
+        if (propertyMap instanceof StylePropertyMap) {
+            // Only set the value if the propertyMap is mutable.
+            propertyMap.set(name, options.value);
+        }
+        let result = Array.from(propertyMap).filter(e => e[0] == name)[0];
+        let value = result[1];
+        assert_true(options.expect(value));
+    }, `Iteration on ${propertyMapName} produces correct type for ${options.syntax}`);
+}
+function test_iteration_type(options) {
+    test_iteration_type_for_property_map('computedStyleMap', target.computedStyleMap(), options);
+    test_iteration_type_for_property_map('attributeStyleMap', target.attributeStyleMap, options);
+    test_iteration_type_for_property_map('styleMap', style.sheet.rules[0].styleMap, options);
+}
+test_iteration_type({
+    syntax: '*',
+    initialValue: 'none',
+    value: 'thing',
+    expect: v => v.length == 1 && v[0] instanceof CSSUnparsedValue,
+});
+test_iteration_type({
+    syntax: '<angle>',
+    initialValue: '0deg',
+    value: '42deg',
+    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
+});
+test_iteration_type({
+    syntax: '<custom-ident>',
+    initialValue: 'none',
+    value: 'thing',
+    expect: v => v.length == 1 && v[0] instanceof CSSKeywordValue,
+});
+test_iteration_type({
+    syntax: '<image>',
+    initialValue: 'url(a)',
+    value: 'url(b)',
+    expect: v => v.length == 1 && v[0] instanceof CSSImageValue,
+});
+test_iteration_type({
+    syntax: '<integer>',
+    initialValue: '0',
+    value: '100',
+    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
+});
+test_iteration_type({
+    syntax: '<length>',
+    initialValue: '0px',
+    value: '10px',
+    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
+});
+test_iteration_type({
+    syntax: '<number>',
+    initialValue: '0',
+    value: '42',
+    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
+});
+test_iteration_type({
+    syntax: '<percentage>',
+    initialValue: '0%',
+    value: '10%',
+    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
+});
+test_iteration_type({
+    syntax: '<resolution>',
+    initialValue: '0dpi',
+    value: '300dpi',
+    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
+});
+test_iteration_type({
+    syntax: '<time>',
+    initialValue: '0s',
+    value: '10s',
+    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
+});
+test_iteration_type({
+    syntax: '<url>',
+    initialValue: 'url(a)',
+    value: 'url(b)',
+    expect: v => v.length == 1 && v[0].constructor === CSSStyleValue,
+});
+test_iteration_type({
+    syntax: 'none | thing | THING',
+    initialValue: 'none',
+    value: 'THING',
+    expect: v => v.length == 1 && v[0] instanceof CSSKeywordValue,
+});
+test_iteration_type({
+    syntax: '<angle> | <length>',
+    initialValue: '0deg',
+    value: '10px',
+    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
+});
 </script>

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/unit-cycles-expected.txt

r239341	r239365
1		CONSOLE MESSAGE: line 63: TypeError: element.attributeStyleMap.clear is not a function. (In 'element.attributeStyleMap.clear()', 'element.attributeStyleMap.clear' is undefined)
	1	CONSOLE MESSAGE: line 74: TypeError: element.attributeStyleMap.clear is not a function. (In 'element.attributeStyleMap.clear()', 'element.attributeStyleMap.clear' is undefined)
2	2
3	3	FAIL Untitled TypeError: element.attributeStyleMap.clear is not a function. (In 'element.attributeStyleMap.clear()', 'element.attributeStyleMap.clear' is undefined)

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/unit-cycles.html

-                      r236444
+                      r239365
 <script src="/resources/testharnessreport.js"></script>
 <script>
     function register_length(name) {
+    function register_length(name, inherits=true) {
         CSS.registerProperty({
             name: name,
             syntax: '<length>',
             initialValue: '0px',
             inherits: false
+            inherits: inherits
         });
+    }
 …
     register_length('--font-size-ex-via-var');
     register_length('--font-size-ch-via-var');
+    register_length('--font-size-em-inherited', true);
+    register_length('--font-size-ex-inherited', true);
+    register_length('--font-size-ch-inherited', true);
 </script>
 <style>
 …
+    }
+    #parent {
+        --font-size-em-inherited: 4em;
+        --font-size-ex-inherited: 4ex;
+        --font-size-ch-inherited: 4ch;
+    }
     #target {
         font-size: 11px;
 …
 </style>
+<div id=target></div>
+<div id=parent>
+    <div id=target></div>
+</div>
 <div id=ref></div>
 …
     }, 'Lengths with rem units are detected via var references');
+    test(function() {
+        let expected4em = compute_dimension('4em', 'unset');
+        target.style = 'font-size: var(--font-size-em-inherited);';
+        assert_property_equals('font-size', expected4em);
+        assert_property_equals('--font-size-em-inherited', expected4em);
+    }, 'Inherited lengths with em units may be used');
+    test(function() {
+        let expected4ex = compute_dimension('4ex', 'unset');
+        target.style = 'font-size: var(--font-size-ex-inherited);';
+        assert_property_equals('font-size', expected4ex);
+        assert_property_equals('--font-size-ex-inherited', expected4ex);
+    }, 'Inherited lengths with ex units may be used');
+    test(function() {
+        let expected4ch = compute_dimension('4ch', 'unset');
+        target.style = 'font-size: var(--font-size-ch-inherited);';
+        assert_property_equals('font-size', expected4ch);
+        assert_property_equals('--font-size-ch-inherited', expected4ch);
+    }, 'Inherited lengths with ch units may be used');
 </script>

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html

-                      r236444
+                      r239365
     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');
+    assert_equals(computedStyle.left, '1px');
+    assert_equals(computedStyle.top, '2px');
+    assert_equals(computedStyle.getPropertyValue('--registered-1-a'), '');
+    assert_equals(computedStyle.getPropertyValue('--registered-1-b'), '');
+    assert_equals(computedStyle.getPropertyValue('--registered-1-c'), '30px');
+    assert_equals(computedStyle.getPropertyValue('--registered-1-d'), '4px');
+    assert_equals(computedStyle.getPropertyValue('--unregistered-1-a'), '');
+    assert_equals(computedStyle.left, '50px');
+    assert_equals(computedStyle.top, '60px');
 }, "A var() cycle between two registered properties is handled correctly.");
 </script>
 …
     computedStyle = getComputedStyle(test2);
     assert_equals(computedStyle.getPropertyValue('--registered-2-a'), '1px');
+    assert_equals(computedStyle.getPropertyValue('--registered-2-a'), '');
     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-b'), '30px');
+    assert_equals(computedStyle.getPropertyValue('--registered-2-c'), '3px');
     assert_equals(computedStyle.getPropertyValue('--registered-2-d'), '40px');
     assert_equals(computedStyle.getPropertyValue('--registered-2-e'), '5px');
     assert_equals(computedStyle.getPropertyValue('--unregistered-2-b'), '1px');
     assert_equals(computedStyle.getPropertyValue('--unregistered-2-c'), '1px');
+    assert_equals(computedStyle.getPropertyValue('--unregistered-2-b'), '50px');
+    assert_equals(computedStyle.getPropertyValue('--unregistered-2-c'), '');
     assert_equals(computedStyle.getPropertyValue('--unregistered-2-d'), '60px');
     assert_equals(computedStyle.getPropertyValue('--unregistered-2-e'), '');
     assert_equals(computedStyle.left, '1px');
+    assert_equals(computedStyle.left, '70px');
     assert_equals(computedStyle.top, '80px');
 }, "A var() cycle between a registered properties and an unregistered property is handled correctly.");

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-expected.txt

-                      r237697
+                      r239365
+FAIL var() references work with registered properties assert_equals: expected "  10px" but got " 10px"
+PASS var() references work with registered properties
 FAIL References to registered var()-properties work in registered lists assert_equals: expected "1px, 10px, 2px" but got "0px"
 FAIL References to mixed registered and unregistered var()-properties work in registered lists assert_equals: expected "1px, 20px, 10px, 2px" but got "0px"
 FAIL Registered lists may be concatenated assert_equals: expected "1px, 10px, 2px, 1px, 20px, 10px, 2px" but got "0px"
+PASS Font-relative units are absolutized when substituting
+PASS Calc expressions are resolved when substituting
+FAIL Lists with relative units are absolutized when substituting assert_equals: expected "110px, 120px" but got "0px"
+PASS Valid fallback does not invalidate var()-reference [<length>, 10px]
+PASS Valid fallback does not invalidate var()-reference [<length> | <color>, red]
+PASS Valid fallback does not invalidate var()-reference [<length> | none, none]
+FAIL Invalid fallback invalidates var()-reference [<length>, red] assert_equals: expected "" but got "40px"
+FAIL Invalid fallback invalidates var()-reference [<length> | none, nolength] assert_equals: expected "" but got "40px"
+FAIL Invalid fallback invalidates var()-reference [<length>, var(--novar)] assert_equals: expected "" but got "40px"

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html

-                      r236444
+                      r239365
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="./resources/utils.js"></script>
 <style>
 div {
 …
     assert_equals(computedStyle.getPropertyValue('--registered-length-7'), '123px');
     assert_equals(computedStyle.getPropertyValue('--length-1'), ' 20px');
     assert_equals(computedStyle.getPropertyValue('--length-2'), '  10px');
+    assert_equals(computedStyle.getPropertyValue('--length-2'), ' 10px');
     assert_equals(computedStyle.getPropertyValue('--length-3'), ' calc(123px + 123px)');
     assert_equals(computedStyle.getPropertyValue('--registered-length-invalid'), '15px');
 …
 }, 'Registered lists may be concatenated');
+test(function(){
+    CSS.registerProperty({
+        name: '--length-em',
+        syntax: '<length>',
+        initialValue: '0px',
+        inherits: false
+    });
+    element.style = 'font-size: 11px; --length-em: 10em; --unregistered:var(--length-em);';
+    let computedStyle = getComputedStyle(element);
+    assert_equals(computedStyle.getPropertyValue('--unregistered'), '110px');
+    element.style = '';
+}, 'Font-relative units are absolutized when substituting');
+test(function(){
+    CSS.registerProperty({
+        name: '--length-calc',
+        syntax: '<length>',
+        initialValue: '0px',
+        inherits: false
+    });
+    element.style = 'font-size: 11px; --length-calc: calc(10em + 10px); --unregistered:var(--length-calc);';
+    let computedStyle = getComputedStyle(element);
+    assert_equals(computedStyle.getPropertyValue('--unregistered'), '120px');
+    element.style = '';
+}, 'Calc expressions are resolved when substituting');
+test(function(){
+    CSS.registerProperty({
+        name: '--length-calc-list',
+        syntax: '<length>#',
+        initialValue: '0px',
+        inherits: false
+    });
+    element.style = 'font-size: 11px; --length-calc-list: 10em, calc(10em + 10px); --unregistered:var(--length-calc-list);';
+    let computedStyle = getComputedStyle(element);
+    assert_equals(computedStyle.getPropertyValue('--unregistered'), '110px, 120px');
+    element.style = '';
+}, 'Lists with relative units are absolutized when substituting');
+function test_valid_fallback(syntax, value, fallback) {
+    test(function(){
+        let name = generate_property(syntax);
+        try {
+            element.style = `${name}: ${value}; --x:var(${name},${fallback})`;
+            let computedStyle = getComputedStyle(element);
+            assert_equals(computedStyle.getPropertyValue('--x'), value);
+        } finally {
+            element.style = '';
+        }
+    }, `Valid fallback does not invalidate var()-reference [${syntax}, ${fallback}]`);
+}
+function test_invalid_fallback(syntax, value, fallback) {
+    test(function(){
+        let name = generate_property(syntax);
+        try {
+            element.style = `${name}: ${value}; --x:var(${name},${fallback})`;
+            let computedStyle = getComputedStyle(element);
+            assert_equals(computedStyle.getPropertyValue('--x'), '');
+        } finally {
+            element.style = '';
+        }
+    }, `Invalid fallback invalidates var()-reference [${syntax}, ${fallback}]`);
+}
+test_valid_fallback('<length>', '40px', '10px');
+test_valid_fallback('<length> | <color>', '40px', 'red');
+test_valid_fallback('<length> | none', '40px', 'none');
+test_invalid_fallback('<length>', '40px', 'red');
+test_invalid_fallback('<length> | none', '40px', 'nolength');
+test_invalid_fallback('<length>', '40px', 'var(--novar)');
 </script>

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/w3c-import.log

r236444	r239365
24	24	/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-cssom.html
25	25	/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-initial.html
	26	/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/self-utils.html
26	27	/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/typedom.tentative.html
27	28	/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/unit-cycles.html

trunk/Source/WebCore/ChangeLog

-                      r239361
+                      r239365
+-12-18  Justin Michaud  <justin_michaud@apple.com>
+        Update CSS Properties and Values API to use new cycle fallback behaviour
+        https://bugs.webkit.org/show_bug.cgi?id=192800
+        Reviewed by Antti Koivisto.
+        Make CSS variables that are registered and involved in a cycle be treated as invalid. This also fixes a crash in the
+        wpt tests where relative units and calc() in a registered property's initial value would break things instead of failing.
+        * css/CSSCustomPropertyValue.h:
+        * css/CSSVariableReferenceValue.cpp:
+        (WebCore::resolveVariableReference):
+        * css/DOMCSSRegisterCustomProperty.cpp:
+        (WebCore::DOMCSSRegisterCustomProperty::registerProperty):
+        * css/StyleResolver.cpp:
+        (WebCore::StyleResolver::applyCascadedCustomProperty):
+        * css/parser/CSSPropertyParser.cpp:
+        (WebCore::CSSPropertyParser::parseTypedCustomPropertyValue):
 -12-18  Daniel Bates  <dabates@apple.com>

trunk/Source/WebCore/css/CSSCustomPropertyValue.h

r238872	r239365
68	68	static Ref<CSSCustomPropertyValue> createSyntaxLength(const AtomicString& name, Length value)
69	69	{
	70	ASSERT(!value.isUndefined());
	71	ASSERT(!value.isCalculated());
70	72	return adoptRef(*new CSSCustomPropertyValue(name, { WTFMove(value) }));
71	73	}

trunk/Source/WebCore/css/CSSVariableReferenceValue.cpp

-                      r237697
+                      r239365
     // Apply fallback to detect cycles
     Vector<CSSParserToken> fallbackResult;
     resolveVariableFallback(CSSParserTokenRange(range), fallbackResult, state);
+    bool fallbackReturn = resolveVariableFallback(CSSParserTokenRange(range), fallbackResult, state);
     auto* property = style.getCustomProperty(variableName);
     if (!property || property->isUnset() || property->isInvalid()) {
+    if (!property || property->isUnset()) {
         auto* registered = registeredProperties.get(variableName);
         if (registered && registered->initialValue())
             property = registered->initialValue();
+        else
+            return resolveVariableFallback(range, result, state);
+    }
+    if (!property || property->isInvalid()) {
+        if (fallbackReturn)
+            result.appendVector(fallbackResult);
+        return fallbackReturn;
+    }

trunk/Source/WebCore/css/DOMCSSRegisterCustomProperty.cpp

-                      r237697
+                      r239365
 ExceptionOr<void> DOMCSSRegisterCustomProperty::registerProperty(Document& document, const DOMCSSCustomPropertyDescriptor& descriptor)
+{
+    if (!isCustomPropertyName(descriptor.name))
+        return Exception { SyntaxError, "The name of this property is not a custom property name." };
     RefPtr<CSSCustomPropertyValue> initialValue;
     if (!descriptor.initialValue.isEmpty()) {
 …
         styleResolver.updateFont();
+        HashSet<CSSPropertyID> dependencies;
+        CSSPropertyParser::collectParsedCustomPropertyValueDependencies(descriptor.syntax, false, dependencies, tokenizer.tokenRange(), strictCSSParserContext());
+        if (!dependencies.isEmpty())
+            return Exception { SyntaxError, "The given initial value must be computationally independent." };
         initialValue = CSSPropertyParser::parseTypedCustomPropertyValue(descriptor.name, descriptor.syntax, tokenizer.tokenRange(), styleResolver, strictCSSParserContext());
 …
             return Exception { SyntaxError, "The given initial value does not parse for the given syntax." };
-        HashSet<CSSPropertyID> dependencies;
         initialValue->collectDirectComputationalDependencies(dependencies);
         initialValue->collectDirectRootComputationalDependencies(dependencies);

trunk/Source/WebCore/css/StyleResolver.cpp

-                      r239173
+                      r239365
     auto property = state.cascade->customProperties().get(name);
+    bool inCycle = state.inProgressPropertiesCustom.contains(name);
     for (auto index : { SelectorChecker::MatchDefault, SelectorChecker::MatchLink, SelectorChecker::MatchVisited }) {
 …
         Ref<CSSCustomPropertyValue> valueToApply = CSSCustomPropertyValue::create(downcast<CSSCustomPropertyValue>(*property.cssValue[index]));
+        if (state.inProgressPropertiesCustom.contains(name)) {
+            // We are in a cycle, so reset the value.
+            state.appliedCustomProperties.add(name);
+            // Resolve this value so that we reset its dependencies
+            if (WTF::holds_alternative<Ref<CSSVariableReferenceValue>>(valueToApply->value()))
+                resolvedVariableValue(CSSPropertyCustom, valueToApply.get(), state);
+            valueToApply = CSSCustomPropertyValue::createWithID(name, CSSValueUnset);
+        if (inCycle) {
+            state.appliedCustomProperties.add(name); // Make sure we do not try to apply this property again while resolving it.
+            valueToApply = CSSCustomPropertyValue::createWithID(name, CSSValueInvalid);
+        }
 …
         if (WTF::holds_alternative<Ref<CSSVariableReferenceValue>>(valueToApply->value())) {
             RefPtr<CSSValue> parsedValue = resolvedVariableValue(CSSPropertyCustom, valueToApply.get(), state);
+            if (state.appliedCustomProperties.contains(name))
+                return; // There was a cycle and the value was reset, so bail.
             if (!parsedValue)
 …
             applyProperty(CSSPropertyCustom, valueToApply.ptr(), state, index);
+        }
+        state.inProgressPropertiesCustom.remove(name);
+        state.appliedCustomProperties.add(name);
+    }
+    state.inProgressPropertiesCustom.remove(name);
+    state.appliedCustomProperties.add(name);
+    for (auto index : { SelectorChecker::MatchDefault, SelectorChecker::MatchLink, SelectorChecker::MatchVisited }) {
+        if (!property.cssValue[index])
+            continue;
+        if (index != SelectorChecker::MatchDefault && this->state().style()->insideLink() == InsideLink::NotInside)
+            continue;
+        Ref<CSSCustomPropertyValue> valueToApply = CSSCustomPropertyValue::create(downcast<CSSCustomPropertyValue>(*property.cssValue[index]));
+        if (inCycle && WTF::holds_alternative<Ref<CSSVariableReferenceValue>>(valueToApply->value())) {
+            // Resolve this value so that we reset its dependencies.
+            resolvedVariableValue(CSSPropertyCustom, valueToApply.get(), state);
+        }
+    }
+}

trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp

-                      r238698
+                      r239365
         m_range.consumeWhitespace();
         auto primitiveVal = consumeWidthOrHeight(m_range, m_context);
+        if (primitiveVal && primitiveVal->isPrimitiveValue())
+            return CSSCustomPropertyValue::createSyntaxLength(name, StyleBuilderConverter::convertLength(styleResolver, *primitiveVal));
+        if (primitiveVal && primitiveVal->isPrimitiveValue() && downcast<CSSPrimitiveValue>(*primitiveVal).isLength()) {
+            auto length = StyleBuilderConverter::convertLength(styleResolver, *primitiveVal);
+            if (!length.isCalculated() && !length.isUndefined())
+                return CSSCustomPropertyValue::createSyntaxLength(name, WTFMove(length));
+        }
     } else {
         auto propertyValue = CSSCustomPropertyValue::createSyntaxAll(name, CSSVariableData::create(m_range));

Context Navigation

Changeset 239365 in webkit

Legend:

trunk/LayoutTests/ChangeLog

trunk/LayoutTests/css-custom-properties-api/crash.html

trunk/LayoutTests/css-custom-properties-api/inherits-expected.txt

trunk/LayoutTests/css-custom-properties-api/inherits.html

trunk/LayoutTests/css-custom-properties-api/registerProperty-expected.txt

trunk/LayoutTests/css-custom-properties-api/registerProperty.html

trunk/LayoutTests/imported/w3c/ChangeLog

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-expected.txt

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing-expected.txt

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing.html

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property.html

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance-expected.txt

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance.html

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-computation-expected.txt

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-computation.html

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-cssom-expected.txt

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-cssom.html

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-initial-expected.txt

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-initial.html

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/typedom.tentative-expected.txt

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/typedom.tentative.html

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/unit-cycles-expected.txt

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/unit-cycles.html

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-expected.txt

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/w3c-import.log

trunk/Source/WebCore/ChangeLog

trunk/Source/WebCore/css/CSSCustomPropertyValue.h

trunk/Source/WebCore/css/CSSVariableReferenceValue.cpp

trunk/Source/WebCore/css/DOMCSSRegisterCustomProperty.cpp

trunk/Source/WebCore/css/StyleResolver.cpp

trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp

Download in other formats: