Bug 1823087 [wpt PR 39051] - [CSSTransitionDiscrete] Fix custom property issues, a=testonly

Automatic update from web-platform-tests
[CSSTransitionDiscrete] Fix custom property issues

When attempting to transition a custom property with universal syntax,
we hit a DCHECK in StyleBuilder::ApplyProperty because we send
a CSSVariableReferenceValue, which is normally expected to be resolved
at this point. However, such custom properties represent their
computed values as CSSVariableReferenceValues, and the discrete
transitions machinery sends those computed values to ApplyProperty
without "transformations". This is expected behavior as of CL:4315803.

Representing the computed value of universal custom properties with
CSSVariableReferenceValue is a bit suspicious and might warrant further
investigation, but this CL does not attempt to address that. Instead
we alter the DCHECK to expect CSSVariableReferenceValues for relevant
custom properties.

Also:

 - Fixed usage of irrelevant custom property in the WPT
   token-stream-type-type-interpolation.html.
 - Fixed accumulation of "transitionrun" event listeners when
   testing multiple transitions in the same .html file
   (e.g. custom-property-transition-mismatched-list.html).

WPTs related to <transform-function> and <transform-list> are still
failing, because we don't implement interpolation for those syntaxes
yet.

Bug: 1399631
Change-Id: I22f0766921061216421839def84bc305edda2a41
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4334509
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1118779}

--

wpt-commits: e6c2d4cacfa621bc2656b577c1fb63f080bac2f5
wpt-pr: 39051

testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-custom-ident.html

@@ -6,10 +6,11 @@
 <div id="target"></div>
 <script>
 
-no_transition_test({
+transition_test({
   syntax: "<custom-ident>",
   from: "from",
   to: "to",
-}, 'A custom property of type <custom-ident> cannot yield a CSS Transition');
+  expected: "to",
+}, 'A custom property of type <custom-ident> can yield a discrete CSS Transition');
 
 </script>

testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-image.html

@@ -6,10 +6,11 @@
 <div id="target"></div>
 <script>
 
-no_transition_test({
+transition_test({
   syntax: "<image>",
   from: 'url("https://example.com/from")',
   to: 'url("https://example.com/to")',
-}, 'A custom property of type <image> cannot yield a CSS Transition');
+  expected: 'url("https://example.com/to")',
+}, 'A custom property of type <image> can yield a CSS Transition');
 
 </script>

testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-list.html

@@ -6,148 +6,172 @@
 <div id="target"></div>
 <script>
 
-no_transition_test({
+transition_test({
   syntax: "<angle>#",
   from: '100deg, 200deg',
   to: '300deg',
-}, 'A custom property of type <angle># does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300deg',
+}, 'A custom property of type <angle># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<angle>+",
   from: '100deg 200deg',
   to: '300deg',
-}, 'A custom property of type <angle>+ does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300deg',
+}, 'A custom property of type <angle>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<color>#",
   from: 'rgb(100, 100, 100), rgb(150, 150, 150)',
   to: 'rgb(200, 200, 200)',
-}, 'A custom property of type <color># does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: 'rgb(200, 200, 200)',
+}, 'A custom property of type <color># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<color>+",
   from: 'rgb(100, 100, 100) rgb(150, 150, 150)',
   to: 'rgb(200, 200, 200)',
-}, 'A custom property of type <color>+ does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: 'rgb(200, 200, 200)',
+}, 'A custom property of type <color>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<custom-ident>#",
   from: 'foo, bar',
   to: 'baz',
-}, 'A custom property of type <custom-ident># does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: 'baz',
+}, 'A custom property of type <custom-ident># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<custom-ident>+",
   from: 'foo bar',
   to: 'baz',
-}, 'A custom property of type <custom-ident>+ does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: 'baz',
+}, 'A custom property of type <custom-ident>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<image>#",
   from: 'url("https://example.com/foo"), url("https://example.com/bar")',
   to: 'url("https://example.com/to")',
-}, 'A custom property of type <image># does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: 'url("https://example.com/to")',
+}, 'A custom property of type <image># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<image>+",
   from: 'url("https://example.com/foo") url("https://example.com/bar")',
   to: 'url("https://example.com/to")',
-}, 'A custom property of type <image>+ does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: 'url("https://example.com/to")',
+}, 'A custom property of type <image>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<integer>#",
   from: '100, 200',
   to: '300',
-}, 'A custom property of type <integer># does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300',
+}, 'A custom property of type <integer># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<integer>+",
   from: '100 200',
   to: '300',
-}, 'A custom property of type <integer>+ does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300',
+}, 'A custom property of type <integer>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<length-percentage>#",
   from: '100px, 200px',
   to: '300%',
-}, 'A custom property of type <length-percentage># does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300%',
+}, 'A custom property of type <length-percentage># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<length-percentage>+",
   from: '100px 200px',
   to: '300%',
-}, 'A custom property of type <length-percentage>+ does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300%',
+}, 'A custom property of type <length-percentage>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<length>#",
   from: '100px, 200px',
   to: '300px',
-}, 'A custom property of type <length># does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300px',
+}, 'A custom property of type <length># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<length>+",
   from: '100px 200px',
   to: '300px',
-}, 'A custom property of type <length>+ does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300px',
+}, 'A custom property of type <length>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<number>#",
   from: '100, 200',
   to: '300',
-}, 'A custom property of type <number># does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300',
+}, 'A custom property of type <number># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<number>+",
   from: '100 200',
   to: '300',
-}, 'A custom property of type <number>+ does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300',
+}, 'A custom property of type <number>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<percentage>#",
   from: '100%, 200%',
   to: '300%',
-}, 'A custom property of type <percentage># does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300%',
+}, 'A custom property of type <percentage># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<percentage>+",
   from: '100% 200%',
   to: '300%',
-}, 'A custom property of type <percentage>+ does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300%',
+}, 'A custom property of type <percentage>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<resolution>#",
   from: '100dppx, 200dppx',
   to: '300dppx',
-}, 'A custom property of type <resolution># does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300dppx',
+}, 'A custom property of type <resolution># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<resolution>+",
   from: '100dppx 200dppx',
   to: '300dppx',
-}, 'A custom property of type <resolution>+ does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300dppx',
+}, 'A custom property of type <resolution>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<time>#",
   from: '100s, 200s',
   to: '300s',
-}, 'A custom property of type <time># does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300s',
+}, 'A custom property of type <time># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<time>+",
   from: '100s 200s',
   to: '300s',
-}, 'A custom property of type <time>+ does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: '300s',
+}, 'A custom property of type <time>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<url>#",
   from: 'url("https://example.com/foo"), url("https://example.com/bar")',
   to: 'url("https://example.com/to")',
-}, 'A custom property of type <url># does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: 'url("https://example.com/to")',
+}, 'A custom property of type <url># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-no_transition_test({
+transition_test({
   syntax: "<url>+",
   from: 'url("https://example.com/foo") url("https://example.com/bar")',
   to: 'url("https://example.com/to")',
-}, 'A custom property of type <url>+ does not yield a CSS Transition if the lists do not contain the same number of values');
+  expected: 'url("https://example.com/to")',
+}, 'A custom property of type <url>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 </script>

testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-url.html

@@ -6,10 +6,11 @@
 <div id="target"></div>
 <script>
 
-no_transition_test({
+transition_test({
   syntax: "<url>",
   from: 'url("https://example.com/from")',
   to: 'url("https://example.com/to")',
-}, 'A custom property of type <url> cannot yield a CSS Transition');
+  expected: 'url("https://example.com/to")',
+}, 'A custom property of type <url> can yield a discrete CSS Transition');
 
 </script>

testing/web-platform/tests/css/css-properties-values-api/resources/utils.js

@@ -195,10 +195,12 @@ function transition_test(options, description) {
     assert_equals(getComputedStyle(target).getPropertyValue(customProperty), options.from, "Element has the expected initial value");
 
     const transitionEventPromise = new Promise(resolve => {
-      target.addEventListener("transitionrun", event => {
+      let listener = event => {
+          target.removeEventListener("transitionrun", listener);
           assert_equals(event.propertyName, customProperty, "TransitionEvent has the expected property name");
           resolve();
-      });
+      };
+      target.addEventListener("transitionrun", listener);
     });
 
     target.style.transition = `${options.transitionProperty} 1s -500ms linear`;