third_party/WebKit/LayoutTests/fast/css-generated-content/pseudo-transition.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     top: 50px;
  13     position: relative;
  14     -webkit-transition: width 2s, top 2s;
  15     -moz-transition: width 2s, top 2s;
  16     transition: width 2s, top 2s;
  17 }
  18
  19 #before.transition:before,
  20 #after.transition:after {
  21     top: 200px;
  22     height: 10px;
  23     width: 10px;
  24 }
  25
  26 #before,
  27 #after {
  28     display: inline-block;
  29     border: 1px solid black;
  30     background: red;
  31 }
  32
  33 #after.transition,
  34 #before.transition {
  35     background: green;
  36 }
  37 </style>
  38
  39 <div id="before"></div>
  40 <div id="after"></div>
  41
  42 <script>
  43 description('Transitions on :before and :after pseudo elements should run');
  44
  45 if (window.testRunner)
  46     testRunner.dumpAsText();
  47
  48 function getPseudoComputedTop(id)
  49 {
  50     return Math.round(parseFloat(getComputedStyle(document.getElementById(id), ':' + id).top));
  51 }
  52
  53 // FIXME: This test should be modified so subpixel doesn't cause off by one
  54 // below and it no longer needs shouldBeCloseTo.
  55
  56 function testTransition(id)
  57 {
  58     var div = document.getElementById(id);
  59     div.className = 'transition';
  60     window.div = div;
  61     shouldBe('div.offsetWidth', '52');
  62     if (window.internals) {
  63         internals.pauseAnimations(1);
  64         shouldBeCloseTo('div.offsetWidth', 20, 1);
  65         computedTop = getPseudoComputedTop(id);
  66         shouldBeCloseTo('computedTop', 170, 1);
  67         internals.pauseAnimations(2);
  68         shouldBeCloseTo('div.offsetWidth', 12, 1);
  69         computedTop = getPseudoComputedTop(id);
  70         shouldBeCloseTo('computedTop', 200, 1);
  71     } else {
  72         // This will be flaky, but it's a reasonable approximation for testing
  73         // in a browser instead of DRT.
  74         setTimeout(function() {
  75             window.div = div;
  76             shouldBeCloseTo('div.offsetWidth', 20, 1);
  77             computedTop = getPseudoComputedTop(id);
  78             shouldBeCloseTo('computedTop', 170, 1);
  79         }, 1000);
  80         setTimeout(function() {
  81             window.div = div;
  82             shouldBeCloseTo('div.offsetWidth', 12, 1);
  83             computedTop = getPseudoComputedTop(id);
  84             shouldBeCloseTo('computedTop', 200, 1);
  85         }, 2000);
  86     }
  87 }
  88
  89 onload = function() {
  90     testTransition('before');
  91     testTransition('after');
  92     if (window.internals)
  93         isSuccessfullyParsed();
  94     else
  95         setTimeout(isSuccessfullyParsed, 2000);
  96 };
  97 </script>