CSS Transitions: Fix flaky move-after-transition.html

We force a style recalc at the start, so a transition occurs.

We wait for the compositor before declaring the test complete.

BUG=248938

Review-Url: https://codereview.chromium.org/2614883005
Cr-Commit-Position: refs/heads/master@{#441867}

third_party/WebKit/LayoutTests/TestExpectations

@@ -770,7 +770,6 @@ crbug.com/248938 [ Win Debug ] virtual/threaded/animations/transition-and-animat
 crbug.com/248938 virtual/threaded/animations/change-one-anim.html [ Failure Pass ]
 crbug.com/326139 crbug.com/390125 media/video-frame-accurate-seek.html [ Failure Pass ]
 crbug.com/248938 virtual/threaded/transitions/cancel-transition.html [ Pass Failure ]
-crbug.com/248938 [ Linux ] virtual/threaded/transitions/move-after-transition.html [ Pass Timeout ]
 crbug.com/248938 virtual/threaded/transitions/start-transform-transition.html [ Pass Failure ]
 crbug.com/248938 virtual/threaded/animations/animation-iteration-event-destroy-renderer.html [ Pass Timeout ]
 crbug.com/248938 virtual/threaded/animations/transition-and-animation-3.html [ Pass Timeout ]

third_party/WebKit/LayoutTests/platform/linux/transitions/move-after-transition-expected.txt

-layer at (0,0) size 800x600
-  LayoutView at (0,0) size 800x600
-layer at (0,0) size 800x162
-  LayoutBlockFlow {HTML} at (0,0) size 800x162
-    LayoutBlockFlow {BODY} at (8,16) size 784x138
-      LayoutBlockFlow {P} at (0,0) size 784x20
-        LayoutText {#text} at (0,0) size 384x19
-          text run at (0,0) width 384: "At the end of the test the green box should obscure the red box."
-      LayoutBlockFlow {DIV} at (0,138) size 784x0
-layer at (8,52) size 402x102
-  LayoutBlockFlow (relative positioned) {DIV} at (0,36) size 402x102 [border: (1px solid #000000)]
-layer at (159,53) size 100x100
-  LayoutBlockFlow (positioned) {DIV} at (151,1) size 100x100 [bgcolor=#FF0000]
-layer at (9,53) size 100x100
-  LayoutBlockFlow (positioned) {DIV} at (1,1) size 100x100 [bgcolor=#008000]

third_party/WebKit/LayoutTests/platform/linux/virtual/threaded/transitions/move-after-transition-expected.txt

-layer at (0,0) size 800x600
-  LayoutView at (0,0) size 800x600
-layer at (0,0) size 800x162
-  LayoutBlockFlow {HTML} at (0,0) size 800x162
-    LayoutBlockFlow {BODY} at (8,16) size 784x138
-      LayoutBlockFlow {P} at (0,0) size 784x20
-        LayoutText {#text} at (0,0) size 384x19
-          text run at (0,0) width 384: "At the end of the test the green box should obscure the red box."
-      LayoutBlockFlow {DIV} at (0,138) size 784x0
-layer at (8,52) size 402x102
-  LayoutBlockFlow (relative positioned) {DIV} at (0,36) size 402x102 [border: (1px solid #000000)]
-layer at (159,53) size 100x100
-  LayoutBlockFlow (positioned) {DIV} at (151,1) size 100x100 [bgcolor=#FF0000]
-layer at (9,53) size 100x100
-  LayoutBlockFlow (positioned) {DIV} at (1,1) size 100x100 [bgcolor=#008000]

third_party/WebKit/LayoutTests/platform/mac/transitions/move-after-transition-expected.txt

-layer at (0,0) size 800x600
-  LayoutView at (0,0) size 800x600
-layer at (0,0) size 800x160
-  LayoutBlockFlow {HTML} at (0,0) size 800x160
-    LayoutBlockFlow {BODY} at (8,16) size 784x136
-      LayoutBlockFlow {P} at (0,0) size 784x18
-        LayoutText {#text} at (0,0) size 406x18
-          text run at (0,0) width 406: "At the end of the test the green box should obscure the red box."
-      LayoutBlockFlow {DIV} at (0,136) size 784x0
-layer at (8,50) size 402x102
-  LayoutBlockFlow (relative positioned) {DIV} at (0,34) size 402x102 [border: (1px solid #000000)]
-layer at (159,51) size 100x100
-  LayoutBlockFlow (positioned) {DIV} at (151,1) size 100x100 [bgcolor=#FF0000]
-layer at (9,51) size 100x100
-  LayoutBlockFlow (positioned) {DIV} at (1,1) size 100x100 [bgcolor=#008000]

third_party/WebKit/LayoutTests/platform/mac/virtual/threaded/transitions/move-after-transition-expected.txt

-layer at (0,0) size 800x600
-  LayoutView at (0,0) size 800x600
-layer at (0,0) size 800x160
-  LayoutBlockFlow {HTML} at (0,0) size 800x160
-    LayoutBlockFlow {BODY} at (8,16) size 784x136
-      LayoutBlockFlow {P} at (0,0) size 784x18
-        LayoutText {#text} at (0,0) size 406x18
-          text run at (0,0) width 406: "At the end of the test the green box should obscure the red box."
-      LayoutBlockFlow {DIV} at (0,136) size 784x0
-layer at (8,50) size 402x102
-  LayoutBlockFlow (relative positioned) {DIV} at (0,34) size 402x102 [border: (1px solid #000000)]
-layer at (159,51) size 100x100
-  LayoutBlockFlow (positioned) {DIV} at (151,1) size 100x100 [bgcolor=#FF0000]
-layer at (9,51) size 100x100
-  LayoutBlockFlow (positioned) {DIV} at (1,1) size 100x100 [bgcolor=#008000]

third_party/WebKit/LayoutTests/platform/win/transitions/move-after-transition-expected.txt

-layer at (0,0) size 800x600
-  LayoutView at (0,0) size 800x600
-layer at (0,0) size 800x160
-  LayoutBlockFlow {HTML} at (0,0) size 800x160
-    LayoutBlockFlow {BODY} at (8,16) size 784x136
-      LayoutBlockFlow {P} at (0,0) size 784x18
-        LayoutText {#text} at (0,0) size 406x17
-          text run at (0,0) width 406: "At the end of the test the green box should obscure the red box."
-      LayoutBlockFlow {DIV} at (0,136) size 784x0
-layer at (8,50) size 402x102
-  LayoutBlockFlow (relative positioned) {DIV} at (0,34) size 402x102 [border: (1px solid #000000)]
-layer at (159,51) size 100x100
-  LayoutBlockFlow (positioned) {DIV} at (151,1) size 100x100 [bgcolor=#FF0000]
-layer at (9,51) size 100x100
-  LayoutBlockFlow (positioned) {DIV} at (1,1) size 100x100 [bgcolor=#008000]

third_party/WebKit/LayoutTests/transitions/move-after-transition-expected.html

+<!DOCTYPE html>
+
+<html>
+<head>
+  <style>
+    #container {
+      position: relative;
+      width: 400px;
+      height: 100px;
+      border: 1px solid  black;
+    }
+    .box {
+      position: absolute;
+      width: 100px;
+      height: 100px;
+      background-color: green;
+    }
+    .indicator {
+      left: 150px;
+      top: 0;
+      background-color: red;
+    }
+    #tester {
+      transform-style: preserve-3d;
+      transform: translateX(150px);
+    }
+   </style>
+</head>
+<body>
+
+  <p>At the end of the test the green box should obscure the red box.</p>
+  <div id="container">
+    <div class="indicator box"></div>
+    <div id="tester" class="hardware box"></div>
+  </div>
+
+  <div id="result">
+  </div>
+
+</body>
+</html>

third_party/WebKit/LayoutTests/transitions/move-after-transition.html

@@ -9,14 +9,12 @@
       height: 100px;
       border: 1px solid  black;
     }
-    
     .box {
       position: absolute;
       width: 100px;
       height: 100px;
       background-color: green;
     }
-    
     .indicator {
       left: 150px;
       top: 0;
@@ -25,30 +23,33 @@
     #container.moved .software {
       left: 300px;
     }
-
     #container.moved .hardware {
       transform: translateX(300px);
     }
-
     .hardware {
       transform-style: preserve-3d;
-      -webkit-transition: transform 300ms linear;
+      transition: transform 300ms linear;
       transform: translateX(0);
     }
-
    </style>
-   <script src="../animations/resources/animation-test-helpers.js"></script>
    <script type="text/javascript">
+    'use strict';
+    function waitForCompositor() {
+      var container = document.getElementById('container');
+      return container.animate({opacity: [1, 1]}, 1).ready;
+    }
 
     function testEnded()
     {
       var testDiv = document.getElementById('tester');
-      testDiv.style.webkitTransitionProperty = 'none';
-      testDiv.style.webkitTransitionDuration = '0';
+      testDiv.style.transitionProperty = 'none';
+      testDiv.style.transitionDuration = '0';
 
-      testDiv.style.webkitTransform = 'translateX(150px)';
-      if (window.testRunner)
-        testRunner.notifyDone();
+      testDiv.style.transform = 'translateX(150px)';
+      waitForCompositor().then(() => {
+        if (window.testRunner)
+          testRunner.notifyDone();
+      });
     }
     
     function startTest()
@@ -56,7 +57,8 @@
       if (window.testRunner)
         testRunner.waitUntilDone();
 
-      document.getElementById('tester').addEventListener('webkitTransitionEnd', testEnded, false);
+      document.body.offsetHeight; // Force style recalc
+      document.getElementById('tester').addEventListener('transitionend', testEnded, false);
       document.getElementById('container').className = 'moved';
     }