CSSTransitionDiscrete: Rename transition-animation-type to transition…

…-behavior This patch also renames the "discrete" value to "allow-discrete" This was resolved in the csswg: w3c/csswg-drafts#8857 (comment) Bug: 1453112 Change-Id: I9b9aad124376d5e7bf532d891b7a0e25b651ce2d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4718633 Reviewed-by: David Baron <[email protected]> Commit-Queue: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1176694}
Lightning00Blade · Dec 11, 2023 · bd86ab5 · bd86ab5
1 parent 20b5dd4
commit bd86ab5
Show file tree

Hide file tree

Showing 19 changed files with 86 additions and 86 deletions.
diff --git a/css/css-animations/display-interpolation.html b/css/css-animations/display-interpolation.html
@@ -26,7 +26,7 @@
 
 test_interpolation({
   property: 'display',
-  animationType: 'discrete',
+  behavior: 'allow-discrete',
   from: 'block',
   to: 'none',
 }, [
@@ -43,7 +43,7 @@
 // can be worked around by using @initial.
 test_interpolation({
   property: 'display',
-  animationType: 'discrete',
+  behavior: 'allow-discrete',
   from: 'none',
   to: 'block',
   'CSS Transitions with transition: all': alwaysBlock,
@@ -65,14 +65,14 @@
 
 test_interpolation({
   property: 'display',
-  animationType: 'discrete',
+  behavior: 'allow-discrete',
   from: 'block',
   to: 'block'
 }, alwaysBlock);
 
 test_interpolation({
   property: 'display',
-  animationType: 'discrete',
+  behavior: 'allow-discrete',
   from: 'none',
   to: 'none'
 }, alwaysNone);

diff --git a/css/css-contain/content-visibility/content-visibility-interpolation.html b/css/css-contain/content-visibility/content-visibility-interpolation.html
@@ -26,7 +26,7 @@
 
 test_interpolation({
   property: 'content-visibility',
-  animationType: 'discrete',
+  behavior: 'allow-discrete',
   from: 'visible',
   to: 'hidden',
 }, [
@@ -40,7 +40,7 @@
 
 test_interpolation({
   property: 'content-visibility',
-  animationType: 'discrete',
+  behavior: 'allow-discrete',
   from: 'hidden',
   to: 'visible',
 }, [

diff --git a/css/css-position/overlay/overlay-transition-backdrop-entry.html b/css/css-position/overlay/overlay-transition-backdrop-entry.html
@@ -13,7 +13,7 @@
     transition-delay: 2s;
     transition-property: overlay;
     transition-duration: 2s;
-    transition-animation-type: discrete;
+    transition-behavior: allow-discrete;
   }
   [popover]::backdrop {
     background-color: blue;

diff --git a/css/css-position/overlay/overlay-transition-backdrop.html b/css/css-position/overlay/overlay-transition-backdrop.html
@@ -8,7 +8,7 @@
     display: block;
     visibility: hidden;
     transition: overlay 60s step-end;
-    transition-animation-type: discrete;
+    transition-behavior: allow-discrete;
   }
   [popover]::backdrop {
     background-color: green;

diff --git a/css/css-position/overlay/overlay-transition-finished.html b/css/css-position/overlay/overlay-transition-finished.html
@@ -20,7 +20,7 @@
   }
   #transition-in {
     transition: overlay 0.1s step-end;
-    transition-animation-type: discrete;
+    transition-behavior: allow-discrete;
     background-color: green;
   }
 </style>

diff --git a/css/css-position/overlay/overlay-transition-in-rendering.html b/css/css-position/overlay/overlay-transition-in-rendering.html
@@ -17,7 +17,7 @@
   }
   #transition-in {
     transition: overlay 60s step-end;
-    transition-animation-type: discrete;
+    transition-behavior: allow-discrete;
     background-color: red;
   }
 </style>

diff --git a/css/css-position/overlay/overlay-transition-out-rendering.html b/css/css-position/overlay/overlay-transition-out-rendering.html
@@ -20,7 +20,7 @@
   }
   #green.transition-enabled {
     transition: overlay 60s step-end;
-    transition-animation-type: discrete;
+    transition-behavior: allow-discrete;
   }
 </style>
 <div id="red" popover="manual"></div>

diff --git a/css/css-position/overlay/overlay-transition.html b/css/css-position/overlay/overlay-transition.html
@@ -12,7 +12,7 @@
   }
   .enable-transitions :is(#transition-in, #transition-out) {
     transition: overlay 60s step-end;
-    transition-animation-type: discrete;
+    transition-behavior: allow-discrete;
   }
 </style>
 <div id="container">

diff --git a/css/css-properties-values-api/animation/custom-property-transition-custom-ident.html b/css/css-properties-values-api/animation/custom-property-transition-custom-ident.html
@@ -11,7 +11,7 @@
   from: "from",
   to: "to",
   expected: "to",
-  animationType: "discrete",
+  behavior: "allow-discrete",
 }, 'A custom property of type <custom-ident> can yield a discrete CSS Transition');
 
 </script>
diff --git a/css/css-properties-values-api/animation/custom-property-transition-image.html b/css/css-properties-values-api/animation/custom-property-transition-image.html
@@ -11,7 +11,7 @@
   from: 'url("https://example.com/from")',
   to: 'url("https://example.com/to")',
   expected: 'url("https://example.com/to")',
-  animationType: 'discrete',
+  behavior: 'allow-discrete',
 }, 'A custom property of type <image> can yield a CSS Transition');
 
 </script>
diff --git a/css/css-properties-values-api/animation/custom-property-transition-mismatched-list.html b/css/css-properties-values-api/animation/custom-property-transition-mismatched-list.html
@@ -11,191 +11,191 @@
   from: '100deg, 200deg',
   to: '300deg',
   expected: '300deg',
-  animationType: 'discrete',
+  behavior: 'allow-discrete',
 }, 'A custom property of type <angle># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<angle>+",
   from: '100deg 200deg',
   to: '300deg',
   expected: '300deg',
-  animationType: 'discrete',
+  behavior: 'allow-discrete',
 }, 'A custom property of type <angle>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<color>#",
   from: 'rgb(100, 100, 100), rgb(150, 150, 150)',
   to: 'rgb(200, 200, 200)',
   expected: 'rgb(200, 200, 200)',
-  animationType: 'discrete',
+  behavior: 'allow-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: "<color>+",
   from: 'rgb(100, 100, 100) rgb(150, 150, 150)',
   to: 'rgb(200, 200, 200)',
   expected: 'rgb(200, 200, 200)',
-  animationType: 'discrete',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-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',
+  behavior: 'allow-discrete',
 }, 'A custom property of type <url>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 </script>
diff --git a/css/css-properties-values-api/animation/custom-property-transition-transform-function.html b/css/css-properties-values-api/animation/custom-property-transition-transform-function.html
@@ -11,7 +11,7 @@
   from: "translateX(100px)",
   to: "translateX(200px)",
   expected: "translateX(150px)",
-  animationType: 'discrete',
+  behavior: 'allow-discrete',
 }, 'A custom property of type <transform-function> can yield a CSS Transition');
 
 </script>
diff --git a/css/css-properties-values-api/animation/custom-property-transition-transform-list.html b/css/css-properties-values-api/animation/custom-property-transition-transform-list.html
@@ -11,7 +11,7 @@
   from: "translateX(100px) scale(2)",
   to: "translateX(200px) scale(4)",
   expected: "translateX(150px) scale(3)",
-  animationType: 'discrete',
+  behavior: 'allow-discrete',
 }, 'A custom property of type <transform-list> can yield a CSS Transition');
 
 </script>
diff --git a/css/css-properties-values-api/animation/custom-property-transition-url.html b/css/css-properties-values-api/animation/custom-property-transition-url.html
@@ -11,7 +11,7 @@
   from: 'url("https://example.com/from")',
   to: 'url("https://example.com/to")',
   expected: 'url("https://example.com/to")',
-  animationType: 'discrete',
+  behavior: 'allow-discrete',
 }, 'A custom property of type <url> can yield a discrete CSS Transition');
 
 </script>
diff --git a/css/css-properties-values-api/resources/utils.js b/css/css-properties-values-api/resources/utils.js
@@ -204,8 +204,8 @@ function transition_test(options, description) {
     });
 
     target.style.transition = `${options.transitionProperty} 1s -500ms linear`;
-    if (options.animationType) {
-      target.style.transitionAnimationType = options.animationType;
+    if (options.behavior) {
+      target.style.transitionBehavior = options.behavior;
     }
     target.style.setProperty(customProperty, options.to);
 

diff --git a/css/css-transitions/all-with-discrete.tentative.html b/css/css-transitions/all-with-discrete.tentative.html
@@ -13,7 +13,7 @@
   width: 100px;
   height: 100px;
   transition: all 1s;
-  transition-animation-type: discrete;
+  transition-behavior: allow-discrete;
 }
 #target.animated {
   float: right;
@@ -30,5 +30,5 @@
   target.classList.add('animated');
   await waitForAnimationFrames(1);
   assert_true(transitionstartFired);
-}, 'transition:all with transition-animation-type:discrete should animate discrete properties.');
+}, 'transition:all with transition-behavior:allow-discrete should animate discrete properties.');
 </script>