LayoutTests/transitions/transition-end-event-helpers.js

   1 var _recordedEvents = new Array();
   2 // Number of events we're supposed to receive.
   3 var _expectedEventCount = 0;
   4 // Function invoked when we've received _expectedEventCount events.
   5 var _endFunction;
   6 // Have we processed the events? This is used to make sure we process the
   7 // events only once.
   8 var _processedEvents = false;
   9
  10 /* Call this function to record manually transition end events:
  11
  12 Function parameters:
  13     event [required]: the event passed with "webkitTransitionEnd"
  14
  15 */
  16 function recordTransitionEndEvent(event)
  17 {
  18   if (event.type != "webkitTransitionEnd")
  19     throw("Invalid transition end event!");
  20
  21   _recordedEvents.push([
  22     event.propertyName,
  23     event.target.id,
  24     Math.round(event.elapsedTime * 1000) / 1000 // round to ms to avoid floating point imprecision
  25     ]);
  26   if (_recordedEvents.length == _expectedEventCount)
  27     _endFunction();
  28 }
  29
  30 /* This is the helper function to run transition end event tests:
  31
  32 Test page requirements:
  33 - The body must contain an empty div with id "result"
  34 - The body must contain a div with with id "container"
  35 - Call this function directly from the <script> inside the test page
  36
  37 Function parameters:
  38     expected [required]: an array of arrays defining the expected parameter values for the recorded transition end events (see below)
  39     timeout [required]:
  40     callback [optional]: a function to be executed just before the test starts (none by default)
  41
  42     Each sub-array must contain these items in this order:
  43     - the name of the CSS property that was transitioning
  44     - the id of the element on which the CSS property was transitioning
  45     - the elapsed time in seconds at which the CSS property finished transitioning
  46     - a boolean indicating if an event listener should be automatically added to the element to record the transition end event or if the script calls recordTransitionEndEvent() directly
  47
  48 */
  49 function runTransitionTest(expected, timeout, callback)
  50 {
  51   _expectedEventCount = expected.length;
  52
  53   if (window.layoutTestController) {
  54     layoutTestController.dumpAsText();
  55     layoutTestController.waitUntilDone();
  56   }
  57
  58   function processEndEvents(expected)
  59   {
  60     if (_processedEvents)
  61       return;  // Only need to process events once
  62
  63     _processedEvents = true;
  64
  65     function compareEventInfo(e1, e2)
  66     {
  67       // Sort by property name then event target id
  68
  69       // Index 0 is the property name
  70       if (e1[0]<e2[0]) return -1;
  71       if (e1[0]>e2[0]) return +1;
  72
  73       // Index 1 is the target id
  74       if (e1[1]<e2[1]) return -1;
  75       if (e1[1]>e2[1]) return +1;
  76
  77       return 0;
  78     }
  79
  80     function examineResults(results, expected)
  81     {
  82       // Sort recorded and expected events arrays so they have the same ordering
  83       expected.sort(compareEventInfo);
  84       results.sort(compareEventInfo);
  85
  86       var result = '<p>';
  87       for (var i=0; i < results.length && i < expected.length; ++i) {
  88         var pass = expected[i][0] == results[i][0] && expected[i][1] == results[i][1] && expected[i][2] == results[i][2];
  89
  90         if (pass)
  91           result += "PASS --- ";
  92         else
  93           result += "FAIL --- ";
  94
  95         result += "[Expected] Property: " + expected[i][0] + " ";
  96         result += "Target: " + expected[i][1] + " ";
  97         result += "Elapsed Time: " + expected[i][2];
  98
  99         if (!pass) {
 100           result += " --- ";
 101           result += "[Received] Property: " + results[i][0] + " ";
 102           result += "Target: " + results[i][1] + " ";
 103           result += "Elapsed Time: " + results[i][2];
 104         }
 105
 106         result += "<br>";
 107       }
 108       result += "</p>";
 109
 110       if (expected.length > results.length) {
 111         result += "<p>FAIL - Missing events<br>";
 112         for (i=results.length; i < expected.length; ++i) {
 113           result += "[Missing] Property: " + expected[i][0] + " ";
 114           result += "Target: " + expected[i][1] + " ";
 115           result += "Elapsed Time: " + expected[i][2] + "<br>";
 116         }
 117         result += "</p>";
 118       } else if (expected.length < results.length) {
 119         result += "<p>FAIL - Unexpected events<br>";
 120         for (i=expected.length; i < results.length; ++i) {
 121           result += "[Unexpected] Property: " + results[i][0] + " ";
 122           result += "Target: " + results[i][1] + " ";
 123           result += "Elapsed Time: " + results[i][2] + "<br>";
 124         }
 125         result += "</p>";
 126       }
 127
 128       return result;
 129     }
 130
 131     document.body.removeChild(document.getElementById('container'));
 132     document.getElementById('result').innerHTML = examineResults(_recordedEvents, expected);
 133
 134     if (window.layoutTestController)
 135         layoutTestController.notifyDone();
 136   }
 137
 138   function startTest(expected, timeout, callback)
 139   {
 140     if (callback)
 141       callback();
 142
 143     for (var i=0; i < expected.length; ++i) {
 144       if (expected[i][3]) {
 145         var box = document.getElementById(expected[i][1]);
 146         box.addEventListener("webkitTransitionEnd", recordTransitionEndEvent, false);
 147       }
 148     }
 149
 150     _endFunction = function() { processEndEvents(expected); };
 151     window.setTimeout(_endFunction, timeout * 1000);
 152   }
 153
 154   window.addEventListener('load', function() { startTest(expected, timeout, callback) }, false);
 155 }