Bug 1842929 [wpt PR 40975] - CSSTransitionDiscrete: add transition-an…

…imation-type to transition shorthand, a=testonly

Automatic update from web-platform-tests
CSSTransitionDiscrete: add transition-animation-type to transition shorthand

This patch implements the proposed transition shorthand for
transition-animation-type:
w3c/csswg-drafts#8857 (comment)

Bug: 1453112
Change-Id: I2f15592de8d9b74be864bd0e0c0eec9d2de77b73
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4679218
Reviewed-by: David Baron <dbaron@chromium.org>
Commit-Queue: David Baron <dbaron@chromium.org>
Auto-Submit: Joey Arhar <jarhar@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1176392}

--

wpt-commits: 777bad789677c93a78ac65101d618d2c9e4ac998
wpt-pr: 40975

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

@@ -35,146 +35,167 @@
   from: 'rgb(100, 100, 100) rgb(150, 150, 150)',
   to: 'rgb(200, 200, 200)',
   expected: 'rgb(200, 200, 200)',
+  animationType: 'discrete',
 }, 'A custom property of type <color>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<custom-ident>#",
   from: 'foo, bar',
   to: 'baz',
   expected: 'baz',
+  animationType: 'discrete',
 }, 'A custom property of type <custom-ident># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<custom-ident>+",
   from: 'foo bar',
   to: 'baz',
   expected: 'baz',
+  animationType: 'discrete',
 }, 'A custom property of type <custom-ident>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<image>#",
   from: 'url("https://example.com/foo"), url("https://example.com/bar")',
   to: 'url("https://example.com/to")',
   expected: 'url("https://example.com/to")',
+  animationType: 'discrete',
 }, 'A custom property of type <image># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<image>+",
   from: 'url("https://example.com/foo") url("https://example.com/bar")',
   to: 'url("https://example.com/to")',
   expected: 'url("https://example.com/to")',
+  animationType: 'discrete',
 }, 'A custom property of type <image>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<integer>#",
   from: '100, 200',
   to: '300',
   expected: '300',
+  animationType: 'discrete',
 }, 'A custom property of type <integer># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<integer>+",
   from: '100 200',
   to: '300',
   expected: '300',
+  animationType: 'discrete',
 }, 'A custom property of type <integer>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<length-percentage>#",
   from: '100px, 200px',
   to: '300%',
   expected: '300%',
+  animationType: 'discrete',
 }, 'A custom property of type <length-percentage># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<length-percentage>+",
   from: '100px 200px',
   to: '300%',
   expected: '300%',
+  animationType: 'discrete',
 }, 'A custom property of type <length-percentage>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<length>#",
   from: '100px, 200px',
   to: '300px',
   expected: '300px',
+  animationType: 'discrete',
 }, 'A custom property of type <length># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<length>+",
   from: '100px 200px',
   to: '300px',
   expected: '300px',
+  animationType: 'discrete',
 }, 'A custom property of type <length>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<number>#",
   from: '100, 200',
   to: '300',
   expected: '300',
+  animationType: 'discrete',
 }, 'A custom property of type <number># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<number>+",
   from: '100 200',
   to: '300',
   expected: '300',
+  animationType: 'discrete',
 }, 'A custom property of type <number>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<percentage>#",
   from: '100%, 200%',
   to: '300%',
   expected: '300%',
+  animationType: 'discrete',
 }, 'A custom property of type <percentage># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<percentage>+",
   from: '100% 200%',
   to: '300%',
   expected: '300%',
+  animationType: 'discrete',
 }, 'A custom property of type <percentage>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<resolution>#",
   from: '100dppx, 200dppx',
   to: '300dppx',
   expected: '300dppx',
+  animationType: 'discrete',
 }, 'A custom property of type <resolution># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<resolution>+",
   from: '100dppx 200dppx',
   to: '300dppx',
   expected: '300dppx',
+  animationType: 'discrete',
 }, 'A custom property of type <resolution>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<time>#",
   from: '100s, 200s',
   to: '300s',
   expected: '300s',
+  animationType: 'discrete',
 }, 'A custom property of type <time># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<time>+",
   from: '100s 200s',
   to: '300s',
   expected: '300s',
+  animationType: 'discrete',
 }, 'A custom property of type <time>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<url>#",
   from: 'url("https://example.com/foo"), url("https://example.com/bar")',
   to: 'url("https://example.com/to")',
   expected: 'url("https://example.com/to")',
+  animationType: 'discrete',
 }, 'A custom property of type <url># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<url>+",
   from: 'url("https://example.com/foo") url("https://example.com/bar")',
   to: 'url("https://example.com/to")',
   expected: 'url("https://example.com/to")',
+  animationType: 'discrete',
 }, '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-transitions/all-with-discrete.tentative.html

@@ -12,8 +12,8 @@
   float: left;
   width: 100px;
   height: 100px;
-  transition-animation-type: discrete;
   transition: all 1s;
+  transition-animation-type: discrete;
 }
 #target.animated {
   float: right;

testing/web-platform/tests/css/css-transitions/parsing/transition-behavior.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/8857">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="target"></div>
+<script>
+test_valid_value('transition-animation-type', 'normal');
+test_computed_value('transition-animation-type', 'normal');
+
+test_valid_value('transition-animation-type', 'discrete');
+test_computed_value('transition-animation-type', 'discrete');
+
+test_valid_value('transition', 'discrete display', 'display 0s ease 0s discrete');
+test_computed_value('transition', 'discrete display', 'display 0s ease 0s discrete');
+
+test_valid_value('transition', 'discrete display 3s', 'display 3s ease 0s discrete');
+test_computed_value('transition', 'discrete display 3s', 'display 3s ease 0s discrete');
+
+test_valid_value('transition', 'discrete display 3s 1s', 'display 3s ease 1s discrete');
+test_computed_value('transition', 'discrete display 3s 1s', 'display 3s ease 1s discrete');
+
+test_valid_value('transition', 'discrete display 3s ease-in-out', 'display 3s ease-in-out 0s discrete');
+test_computed_value('transition', 'discrete display 3s ease-in-out', 'display 3s ease-in-out 0s discrete');
+
+test_valid_value('transition', 'discrete display 3s ease-in-out 1s', 'display 3s ease-in-out 1s discrete');
+test_computed_value('transition', 'discrete display 3s ease-in-out 1s', 'display 3s ease-in-out 1s discrete');
+
+test_invalid_value('transition', 'asdf display');
+test_invalid_value('transition', 'display asdf');
+
+// Putting "discrete" anywhere in the shorthand should still work
+test_valid_value('transition', 'display discrete 3s ease-in-out 1s', 'display 3s ease-in-out 1s discrete');
+test_valid_value('transition', 'display 3s discrete ease-in-out 1s', 'display 3s ease-in-out 1s discrete');
+test_valid_value('transition', 'display 3s ease-in-out discrete 1s', 'display 3s ease-in-out 1s discrete');
+test_valid_value('transition', 'display 3s ease-in-out 1s discrete', 'display 3s ease-in-out 1s discrete');
+test_computed_value('transition', 'display discrete 3s ease-in-out 1s', 'display 3s ease-in-out 1s discrete');
+test_computed_value('transition', 'display 3s discrete ease-in-out 1s', 'display 3s ease-in-out 1s discrete');
+test_computed_value('transition', 'display 3s ease-in-out discrete 1s', 'display 3s ease-in-out 1s discrete');
+test_computed_value('transition', 'display 3s ease-in-out 1s discrete', 'display 3s ease-in-out 1s discrete');
+
+// Serialization with multiple shorthands, including different order
+test_valid_value('transition',
+  'discrete display, normal opacity, color',
+  'display 0s ease 0s discrete, opacity 0s ease 0s, color 0s ease 0s');
+test_computed_value('transition',
+  'discrete display, normal opacity, color',
+  'display 0s ease 0s discrete, opacity 0s ease 0s, color 0s ease 0s');
+test_valid_value('transition',
+  'normal opacity, color, discrete display',
+  'opacity 0s ease 0s, color 0s ease 0s, display 0s ease 0s discrete');
+test_computed_value('transition',
+  'normal opacity, color, discrete display',
+  'opacity 0s ease 0s, color 0s ease 0s, display 0s ease 0s discrete');
+</script>

testing/web-platform/tests/css/css-transitions/parsing/transition-shorthand.html

@@ -15,21 +15,24 @@
   'transition-property': 'top',
   'transition-duration': '1s',
   'transition-timing-function': 'cubic-bezier(0, -2, 1, 3)',
-  'transition-delay': '-3s'
+  'transition-delay': '-3s',
+  'transition-animation-type': 'normal'
 });
 
 test_shorthand_value('transition', '1s -3s, cubic-bezier(0, -2, 1, 3) top', {
   'transition-property': 'all, top',
   'transition-duration': '1s, 0s',
   'transition-timing-function': 'ease, cubic-bezier(0, -2, 1, 3)',
-  'transition-delay': '-3s, 0s'
+  'transition-delay': '-3s, 0s',
+  'transition-animation-type': 'normal, normal'
 });
 
 test_shorthand_value('transition', 'cubic-bezier(0, -2, 1, 3) top, 1s -3s', {
   'transition-property': 'top, all',
   'transition-duration': '0s, 1s',
   'transition-timing-function': 'cubic-bezier(0, -2, 1, 3), ease',
-  'transition-delay': '0s, -3s'
+  'transition-delay': '0s, -3s',
+  'transition-animation-type': 'normal, normal'
 });
 </script>
 </body>