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

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