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

   1 <!DOCTYPE html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
   2
   3 <script src="../../resources/js-test-pre.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 pauseAnimationAtTimeOnPseudoElement(animationName, time, element, pseudoId)
  82 {
  83     const pseudoElement = internals.pseudoElement(element, pseudoId);
  84     if (!pseudoElement) {
  85         console.log("Failed to find pseudo element");
  86         return;
  87     }
  88
  89     const animations = pseudoElement.getAnimations();
  90     for (let animation of animations) {
  91         if (animation instanceof CSSAnimation && animation.animationName == animationName && animation.effect.getKeyframes().length) {
  92             animation.currentTime = time * 1000;
  93             animation.pause();
  94             return true;
  95         }
  96     }
  97     return false;
  98 }
  99
 100 function testAnimation(id)
 101 {
 102     var div = document.getElementById(id);
 103     div.className = 'animate';
 104     window.div = div;
 105     shouldBe('div.offsetWidth', '52');
 106     if (window.internals) {
 107         pauseAnimationAtTimeOnPseudoElement('example', 1.0, div, id);
 108         shouldBeCloseTo('div.offsetWidth', 20, 1);
 109         computedTop = getPseudoComputedTop(id);
 110         shouldBeCloseTo('computedTop', 170, 1);
 111         pauseAnimationAtTimeOnPseudoElement('example', 2.0, div, id);
 112         shouldBeCloseTo('div.offsetWidth', 12, 1);
 113         computedTop = getPseudoComputedTop(id);
 114         shouldBeCloseTo('computedTop', 200, 1);
 115     } else {
 116         // This will be flaky, but it's a reasonable approximation for testing
 117         // in a browser instead of DRT.
 118         setTimeout(function() {
 119             window.div = div;
 120             shouldBeCloseTo('div.offsetWidth', 20, 1);
 121             computedTop = getPseudoComputedTop(id);
 122             shouldBeCloseTo('computedTop', 170, 1);
 123         }, 1000);
 124         setTimeout(function() {
 125             window.div = div;
 126             shouldBeCloseTo('div.offsetWidth', 12, 1);
 127             computedTop = getPseudoComputedTop(id);
 128             shouldBeCloseTo('computedTop', 200, 1);
 129         }, 2000);
 130     }
 131 }
 132
 133 onload = function() {
 134     testAnimation('before');
 135     testAnimation('after');
 136     if (window.internals)
 137         isSuccessfullyParsed();
 138     else
 139         setTimeout(isSuccessfullyParsed, 2000);
 140 };
 141 </script>