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

   1 <!DOCTYPE html>
   2
   3 <script src="../../resources/js-test.js"></script>
   4
   5 <style>
   6 @-webkit-keyframes example {
   7   from {
   8     width: 50px;
   9     height: 50px;
  10     top: 50px;
  11   }
  12   to {
  13     width: 10px;
  14     height: 10px;
  15     top: 200px;
  16   }
  17 }
  18
  19 @keyframes example {
  20   from {
  21     width: 50px;
  22     height: 50px;
  23     top: 50px;
  24   }
  25   to {
  26     width: 10px;
  27     height: 10px;
  28     top: 200px;
  29   }
  30 }
  31
  32 #after:after,
  33 #before:before {
  34     content: "";
  35     display: block;
  36     height: 50px;
  37     width: 50px;
  38     position: relative;
  39 }
  40
  41 #after.animate:after,
  42 #before.animate:before {
  43     top: 200px;
  44     width: 10px;
  45     height: 10px;
  46     -webkit-animation: example 2s;
  47     -moz-animation: example 2s;
  48     animation: example 2s;
  49 }
  50
  51 #before,
  52 #after {
  53     display: inline-block;
  54     border: 1px solid black;
  55     background: red;
  56 }
  57
  58 #before.animate,
  59 #after.animate {
  60     background: green;
  61 }
  62 </style>
  63
  64 <div id="before"></div>
  65 <div id="after"></div>
  66
  67 <script>
  68 description('Animations on :before and :after pseudo elements should run');
  69
  70 if (window.testRunner)
  71     testRunner.dumpAsText();
  72
  73 function getPseudoComputedTop(id)
  74 {
  75     return Math.round(parseFloat(getComputedStyle(document.getElementById(id), ':' + id).top));
  76 }
  77
  78 // FIXME: This test should be modified so subpixel doesn't cause off by one
  79 // below and it no longer needs shouldBeCloseTo.
  80
  81 function testAnimation(id)
  82 {
  83     var div = document.getElementById(id);
  84     div.className = 'animate';
  85     window.div = div;
  86     shouldBe('div.offsetWidth', '52');
  87     if (window.internals) {
  88         internals.pauseAnimations(1);
  89         shouldBeCloseTo('div.offsetWidth', 20, 1);
  90         computedTop = getPseudoComputedTop(id);
  91         shouldBeCloseTo('computedTop', 170, 1);
  92         internals.pauseAnimations(2);
  93         shouldBeCloseTo('div.offsetWidth', 12, 1);
  94         computedTop = getPseudoComputedTop(id);
  95         shouldBeCloseTo('computedTop', 200, 1);
  96     } else {
  97         // This will be flaky, but it's a reasonable approximation for testing
  98         // in a browser instead of DRT.
  99         setTimeout(function() {
 100             window.div = div;
 101             shouldBeCloseTo('div.offsetWidth', 20, 1);
 102             computedTop = getPseudoComputedTop(id);
 103             shouldBeCloseTo('computedTop', 170, 1);
 104         }, 1000);
 105         setTimeout(function() {
 106             window.div = div;
 107             shouldBeCloseTo('div.offsetWidth', 12, 1);
 108             computedTop = getPseudoComputedTop(id);
 109             shouldBeCloseTo('computedTop', 200, 1);
 110         }, 2000);
 111     }
 112 }
 113
 114 onload = function() {
 115     testAnimation('before');
 116     testAnimation('after');
 117     if (window.internals)
 118         isSuccessfullyParsed();
 119     else
 120         setTimeout(isSuccessfullyParsed, 2000);
 121 };
 122 </script>