third_party/WebKit/LayoutTests/fast/css-generated-content/pseudo-transition-event.html

   1 <!DOCTYPE html>
   2
   3 <script src="../../resources/js-test.js"></script>
   4
   5 <style>
   6 #before:before,
   7 #after:after {
   8     content: "";
   9     display: block;
  10     height: 50px;
  11     width: 50px;
  12     -webkit-transition: width 1ms;
  13     transition: width 1ms;
  14 }
  15
  16 #before.transition:before,
  17 #after.transition:after {
  18     height: 10px;
  19     width: 10px;
  20 }
  21
  22 #before,
  23 #after {
  24     display: inline-block;
  25     border: 1px solid black;
  26     background: red;
  27 }
  28
  29 #after.transition,
  30 #before.transition {
  31     background: green;
  32 }
  33 </style>
  34
  35 <div id="before"></div>
  36 <div id="after"></div>
  37
  38 <script>
  39 description('Transitions on :before and :after pseudo elements should run and fire DOM events');
  40
  41 if (window.testRunner) {
  42     testRunner.dumpAsText();
  43     testRunner.waitUntilDone();
  44 }
  45
  46 var expectedEvents = [ ["width", "before", "::before"] , ["width", "after", "::after"] ];
  47 var currentEvent = 0;
  48
  49 function recordTransitionEvent()
  50 {
  51     shouldBe("event.propertyName", "expectedEvents[currentEvent][0]");
  52     shouldBe("event.target.id", "expectedEvents[currentEvent][1]");
  53     shouldBe("event.pseudoElement", "expectedEvents[currentEvent][2]");
  54     if (currentEvent == 1) {
  55         isSuccessfullyParsed();
  56         if (window.testRunner)
  57             testRunner.notifyDone();
  58     } else {
  59         currentEvent++;
  60         testTransition('after');
  61     }
  62 }
  63
  64 function testTransition(id)
  65 {
  66     var div = document.getElementById(id);
  67     div.className = 'transition';
  68 }
  69
  70 onload = function() {
  71     document.addEventListener( 'transitionend', recordTransitionEvent);
  72     testTransition('before');
  73 };
  74 </script>