Bug 1634118 [wpt PR 23321] - Add transition generation to CSS Transition, a=testonly
authorhaozhe <haozhes@chromium.org>
Wed, 13 May 2020 09:39:32 +0000
changeset 531056 526af2b81b9d46d5880e937e460f832894c53390
parent 531055 19a7b343525ff50af27134cf96e315dffa2f9394
child 531057 0e9670eb7c24790164571677a52a2b20532b6102
push id37435
push userapavel@mozilla.com
push dateWed, 20 May 2020 15:28:23 +0000
treeherdermozilla-central@5415da14ec9a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1634118, 23321, 1072480, 1068740, 2157682, 765305
milestone78.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1634118 [wpt PR 23321] - Add transition generation to CSS Transition, a=testonly Automatic update from web-platform-tests Add transition generation to CSS Transition This patch added the transition generation which described in the spec: https://drafts.csswg.org/css-transitions-2/#current-transition-generation-section For two transitions with the same owning element (including the pseudo-element selector), this patch will sort animation1 and animation2 first by their transition generations, then in ascending order by the Unicode codepoints that make up the expanded transition property name of each transition The spec: https://drafts.csswg.org/css-transitions-2/#animation-composite-order Bug: 1072480, 1068740 Change-Id: I0f54f676befd250082b2323723ba2b71e2931b14 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2157682 Commit-Queue: Hao Sheng <haozhes@chromium.org> Reviewed-by: Majid Valipour <majidvp@chromium.org> Reviewed-by: Kevin Ellis <kevers@chromium.org> Cr-Commit-Position: refs/heads/master@{#765305} -- wpt-commits: 3e0da6635e95c8c1161b9837c3d4acf9dbb42f30 wpt-pr: 23321
testing/web-platform/tests/css/css-transitions/Document-getAnimations.tentative.html
--- a/testing/web-platform/tests/css/css-transitions/Document-getAnimations.tentative.html
+++ b/testing/web-platform/tests/css/css-transitions/Document-getAnimations.tentative.html
@@ -30,16 +30,66 @@ test(t => {
                 'getAnimations returns two running CSS Transitions');
 
   // Remove both
   div.style.transitionProperty = 'none';
   assert_equals(document.getAnimations().length, 0,
                 'getAnimations returns no running CSS Transitions');
 }, 'getAnimations for CSS Transitions');
 
+test(t => {
+  const div = addDiv(t);
+
+  // Add a couple of transitions
+  div.style.top = '0px';
+  div.style.left = '0px';
+  getComputedStyle(div).transitionProperty;
+
+  div.style.transition = 'all 100s';
+  div.style.top = '100px';
+  div.style.left = '100px';
+
+  var animations = document.getAnimations();
+  assert_equals(animations.length, 2,
+                'getAnimations returns two running CSS Transitions');
+  assert_equals(animations[0].transitionProperty, 'left');
+  assert_equals(animations[1].transitionProperty, 'top');
+}, 'getAnimations for CSS Transitions sort by property name');
+
+promise_test(async t => {
+  const div = addDiv(t);
+
+  // Add a couple of transitions
+  div.style.top = '0px';
+  div.style.left = '0px';
+  getComputedStyle(div).transitionProperty;
+
+  div.style.transition = 'all 100s';
+  div.style.top = '100px';
+  div.style.left = '100px';
+
+  var animations = document.getAnimations();
+  assert_equals(animations.length, 2,
+                'getAnimations returns two running CSS Transitions');
+  assert_equals(animations[0].transitionProperty, 'left');
+  assert_equals(animations[1].transitionProperty, 'top');
+
+  await waitForAnimationFrames(2);
+
+  div.style.opacity = '1'
+  div.style.transition = 'all 100s';
+  div.style.opacity = '0'
+  animations = document.getAnimations();
+  assert_equals(animations.length, 3,
+                'getAnimations returns two running CSS Transitions');
+  assert_equals(animations[0].transitionProperty, 'left', '1');
+  assert_equals(animations[1].transitionProperty, 'top', '2');
+  assert_equals(animations[2].transitionProperty, 'opacity', '3');
+}, 'getAnimations for CSS Transitions sort by transition generation');
+
 function pseudoTest(description, testMarkerPseudos) {
   test(t => {
     // Create two divs with the following arrangement:
     //
     //       parent
     //    (::marker,) // Optionally
     //     ::before,
     //     ::after