Implement CSSTransitionDiscrete which enables transitions on discrete…

… properties. This feature enables transitioning discrete properties. This is based on the resolved CSSWG issue: - Transition discrete properties: w3c/csswg-drafts#4441 You can test display transitions with this CL on: https://output.jsbin.com/buquher/quiet Original patch: http://crrev.com/c/4182089 Bug: 1399631, 1413556 Change-Id: Icf5364b970233186794fa9faaa016e0e6542ec2b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4219315 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1112645}
web-platform-tests · Mar 3, 2023 · 005d050 · 005d050
1 parent ad172b1
commit 005d050
Show file tree

Hide file tree

Showing 5 changed files with 997 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>