Bug 1176969 followup - Reorganize the timing of the reftest to make it more reliable.

I confirmed that animate-preserve3d-child.html still fails without the
original patch in the bug.

--HG--
extra : transplant_source : %2Bqq%E3%28f%BC%CF%E0%02%205.%14V%ABX%F1%87%1B

layout/reftests/transform-3d/animate-preserve3d-child.html

@@ -8,8 +8,8 @@ body { padding: 50px }
 #grandparent { perspective: 400px }
 
 @keyframes spin {
-  0% { transform: rotateX(-30deg) rotateY(-30deg) rotateZ(-30deg); }
-  0.01%, 100% { transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); }
+  0%, 85% { transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); }
+  90%, 100% { transform: rotateX(-30deg) rotateY(-30deg) rotateZ(-30deg); }
 }
 
 #parent {
@@ -17,7 +17,8 @@ body { padding: 50px }
   height: 200px; width: 200px;
   border: 1px solid black;
   transform-style: preserve-3d;
-  animation: spin 100s linear;
+  /* use a -99.9s delay to start at 99.9% and then move to 0% */
+  animation: spin 100s -99.9s linear 2;
 }
 
 @keyframes noop {
@@ -42,11 +43,10 @@ body { padding: 50px }
 
 <script>
 
-document.getElementById("parent").addEventListener("animationstart", StartListener, false);
+document.getElementById("parent").addEventListener("animationiteration", IterationListener, false);
 
-function StartListener(event) {
-  // Animation should be at final state after 10ms; give it longer.
-  setTimeout(RemoveReftestWait, 100);
+function IterationListener(event) {
+  setTimeout(RemoveReftestWait, 0);
 }
 
 function RemoveReftestWait() {

layout/reftests/transform-3d/animate-preserve3d-parent.html

@@ -8,8 +8,8 @@ body { padding: 50px }
 #grandparent { perspective: 400px }
 
 @keyframes spin {
-  0% { transform: rotateX(-30deg) rotateY(-30deg) rotateZ(-30deg); }
-  0.01%, 100% { transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); }
+  0%, 85% { transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); }
+  90%, 100% { transform: rotateX(-30deg) rotateY(-30deg) rotateZ(-30deg); }
 }
 
 #parent {
@@ -17,7 +17,8 @@ body { padding: 50px }
   height: 200px; width: 200px;
   border: 1px solid black;
   transform-style: preserve-3d;
-  animation: spin 100s linear;
+  /* use a -99.9s delay to start at 99.9% and then move to 0% */
+  animation: spin 100s -99.9s linear 2;
 }
 
 #child {
@@ -38,11 +39,10 @@ body { padding: 50px }
 
 <script>
 
-document.getElementById("parent").addEventListener("animationstart", StartListener, false);
+document.getElementById("parent").addEventListener("animationiteration", IterationListener, false);
 
-function StartListener(event) {
-  // Animation should be at final state after 10ms; give it longer.
-  setTimeout(RemoveReftestWait, 100);
+function IterationListener(event) {
+  setTimeout(RemoveReftestWait, 0);
 }
 
 function RemoveReftestWait() {

layout/reftests/transform-3d/reftest.list

@@ -63,5 +63,5 @@ fuzzy(3,99) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccele
 fuzzy(3,99) == animate-cube-degrees.html animate-cube-degrees-ref.html # subpixel AA
 == animate-cube-degrees-zoom.html animate-cube-degrees-zoom-ref.html
 != animate-cube-degrees-ref.html animate-cube-degrees-zoom-ref.html
-fuzzy-if(cocoaWidget,128,4) random == animate-preserve3d-parent.html animate-preserve3d-ref.html # intermittently fuzzy on Mac; needs to be rewritten for timing issues
-fuzzy-if(cocoaWidget,128,4) random == animate-preserve3d-child.html animate-preserve3d-ref.html # intermittently fuzzy on Mac; needs to be rewritten for timing issues
+fuzzy-if(cocoaWidget,128,9) == animate-preserve3d-parent.html animate-preserve3d-ref.html # intermittently fuzzy on Mac
+fuzzy-if(cocoaWidget,128,9) == animate-preserve3d-child.html animate-preserve3d-ref.html # intermittently fuzzy on Mac