Reland #2 "Implement CSSTransitionDiscrete which enables transitions …

…on discrete properties." Original patch: https://crrev.com/c/4219315 Revert 1: https://crrev.com/c/4305045 Reland 1: https://crrev.com/c/4304846 Revert 2: https://crrev.com/c/4307944 Despite the most relaxed value in TestExpectations for discrete-no-interpolation.tentative.html, some bots are still breaking for reasons I don't understand. I am going to remove the test completely until it stops crashing or failing. This patch will still be useful despite the lack of tests because other people are doing prototyping work that builds on this change. Bug: 1399631, 1413556 Change-Id: Ic08f16d6436e37acc8947a94ca699c1735fe221f
web-platform-tests · Mar 4, 2023 · a7cff21 · a7cff21
1 parent 7234cea
commit a7cff21
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);