Bug 1503649 [wpt PR 13816] - [css-properties-values-api] Store initial variables on ComputedStyle., a=testonly

Automatic update from web-platform-tests[css-properties-values-api] Store initial variables on ComputedStyle.

Initial values are currently not stored at all on ComputedStyle, and we
must refer to the PropertyRegistration to figure out what the initial value
for a given property is.

The problem with this, is that registering a property also has the effect
of giving all styles that are already computed new values (effectively).
For example, if a property '--x' is not registered (and not applied on any
style), the computed value of that property is the "empty value" as
described in css-variables. If the property then becomes registered,
the initial value suddenly becomes whatever is specified by the
registration, even on the ComputedStyle objects that already exist.

This causes problems for calculating transitions, because we incorrectly
consider the previous computed value to be "initialValue" from the
registration rather than what it really was: "empty value".

This CL adds a StyleInitialData class which contains the initial values
for all registered variables. This class is instantiated for the initial
style, and then referenced by all ComputedStyles that inherit from that
style.

This makes it possible to know what the initial value was for a certain
property at the time style calculation took place.

R=futhark@chromium.org

Bug: 848250
Change-Id: I0a44e06608738aab15cb35fbc448a47188932600
Reviewed-on: https://chromium-review.googlesource.com/c/1309736
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Anders Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#604580}

--

wpt-commits: bce35cc67fe84021df94dc52e60522b1f1b46e8b
wpt-pr: 13816

testing/web-platform/tests/css/css-properties-values-api/register-property.html

@@ -2,6 +2,8 @@
 <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>
+<script src="./resources/utils.js"></script>
+<div id=target></div>
 <script>
 // Tests for error checking during property registration
 
@@ -45,4 +47,29 @@ test(function(){
     CSS.registerProperty({name: '--inherit-test-2', syntax: '<length>', initialValue: '0px', inherits: false});
     assert_throws(new TypeError(), () => CSS.registerProperty({name: '--inherit-test-3', syntax: '<length>', initialValue: '0px'}));
 }, "registerProperty requires inherits");
+
+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>