Revert "Revert "Reland #2 "Implement CSSTransitionDiscrete which enab…

…les transitions on discrete properties.""" (web-platform-tests#38936) This reverts commit 78f70fd.
mrego · Mar 10, 2023 · 6f8302d · 6f8302d
1 parent 4af24bc
commit 6f8302d
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 7 deletions.
diff --git a/css/css-transitions/all-with-discrete.tentative.html b/css/css-transitions/all-with-discrete.tentative.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id=target1 class=target>hello</div>
+<div id=target2 class=target>hello</div>
+
+<style>
+.target {
+  float: left;
+  width: 100px;
+  height: 100px;
+}
+.target.animated {
+  float: right;
+}
+
+#target1 {
+  transition: all 1s, float 1s;
+}
+
+#target2 {
+  transition: all 1s;
+}
+</style>
+
+<script>
+promise_test(async () => {
+  let transitionstartFired = false;
+  target1.addEventListener('transitionstart', () => {
+    transitionstartFired = true;
+  });
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  target1.classList.add('animated');
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  assert_true(transitionstartFired);
+}, 'all with an explicit discrete property should animate.');
+
+promise_test(async () => {
+  let transitionstartFired = false;
+  target2.addEventListener('transitionstart', () => {
+    transitionstartFired = true;
+  });
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  target2.classList.add('animated');
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  assert_false(transitionstartFired);
+}, 'all without an explicit discrete property should not animate.');
+</script>
diff --git a/css/css-transitions/display-none-no-animations.html b/css/css-transitions/display-none-no-animations.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel=help href="mailto:jarhar@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id=target>target</div>
+<style>
+#target {
+  display: none;
+  transition: 1s;
+  color: red;
+}
+#target.animated {
+  transition: 1s;
+  color: green;
+}
+</style>
+
+<script>
+test(() => {
+  target.addEventListener('transitionstart', () => {
+    assert_unreached('transitionstart should not be fired.');
+  });
+  target.classList.add('animated');
+  assert_equals(target.getAnimations().length, 0,
+    'There should not be any animations running.');
+}, 'Transitions and animations should not occur on display:none elements.');
+</script>
diff --git a/css/motion/animation/offset-interpolation.html b/css/motion/animation/offset-interpolation.html
@@ -15,9 +15,9 @@
         to: 'path("M0 300H 700 Z") 600px 900deg',
         method: 'CSS Transitions',
       }, [
-        {at: -0.3, expect: 'path("M0 300H 700 Z") 470px 770deg'},
-        {at: 0, expect: 'path("M0 300H 700 Z") 500px 800deg'},
-        {at: 0.3, expect: 'path("M0 300H 700 Z") 530px 830deg'},
+        {at: -0.3, expect: 'path("M0 200H 700") 470px 770deg'},
+        {at: 0, expect: 'path("M0 200H 700") 500px 800deg'},
+        {at: 0.3, expect: 'path("M0 200H 700") 530px 830deg'},
         {at: 0.6, expect: 'path("M0 300H 700 Z") 560px 860deg'},
         {at: 1, expect: 'path("M0 300H 700 Z") 600px 900deg'},
         {at: 1.5, expect: 'path("M0 300H 700 Z") 650px 950deg'},
@@ -29,9 +29,9 @@
         to: 'path("M0 0H 300") 600px 0deg',
         method: 'CSS Transitions',
       }, [
-        {at: -0.3, expect: 'path("M0 0H 170") 470px 0deg'},
-        {at: 0, expect: 'path("M0 0H 200") 500px 0deg'},
-        {at: 0.3, expect: 'path("M0 0H 230") 530px 0deg'},
+        {at: -0.3, expect: 'path("M0 0H 170") 470px auto 0deg'},
+        {at: 0, expect: 'path("M0 0H 200") 500px auto 0deg'},
+        {at: 0.3, expect: 'path("M0 0H 230") 530px auto 0deg'},
         {at: 0.6, expect: 'path("M0 0H 260") 560px 0deg'},
         {at: 1, expect: 'path("M0 0H 300") 600px 0deg'},
         {at: 1.5, expect: 'path("M0 0H 350") 650px 0deg'},

diff --git a/css/support/interpolation-testcommon.js b/css/support/interpolation-testcommon.js
@@ -56,7 +56,7 @@
       target.style.setProperty(property, isNeutralKeyframe(from) ? '' : from);
     },
     nonInterpolationExpectations: function(from, to) {
-      return expectFlip(from, to, -Infinity);
+      return expectFlip(from, to, 0.5);
     },
     notAnimatableExpectations: function(from, to, underlying) {
       return expectFlip(from, to, -Infinity);