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

   1 <!DOCTYPE html>
   2 <style>
   3 #target {
   4     width: 100px;
   5     height: 100px;
   6     background-color: red;
   7 }
   8 #target:after {
   9     display: block;
  10     position: relative;
  11     content: "";
  12     width: 50px;
  13     height: 50px;
  14     background-color: blue;
  15 }
  16 #target.animated:after {
  17     -webkit-animation: anim 1ms forwards;
  18     animation: anim 1ms forwards;
  19 }
  20 @-webkit-keyframes anim {
  21     from {
  22         left: 0px;
  23         display: block;
  24     }
  25     to {
  26         left: 100px;
  27         display: none;
  28     }
  29 }
  30 @keyframes anim {
  31     from {
  32         left: 0px;
  33         display: block;
  34     }
  35     to {
  36         left: 100px;
  37         display: none;
  38     }
  39 }
  40 </style>
  41
  42 <script>
  43 if (window.testRunner) {
  44     testRunner.dumpAsText();
  45     testRunner.waitUntilDone();
  46 }
  47
  48 function go() {
  49     var target = document.getElementById('target');
  50     target.addEventListener('webkitAnimationEnd', completeTest);
  51     target.classList.add('animated');
  52 }
  53
  54 function test(style, property, expected) {
  55     var pass = style[property] === expected;
  56     document.getElementById('log').innerHTML +=
  57         (pass ? 'PASS' : 'FAIL') + ': ' + property + ' was ' + (pass ? '' : 'not ') + expected + '<br>';
  58 }
  59
  60 function completeTest(message) {
  61     var style = getComputedStyle(document.getElementById('target'), ':after');
  62     test(style, 'left', '100px');
  63     test(style, 'display', 'block');
  64     if (window.testRunner) {
  65         testRunner.notifyDone();
  66     }
  67 }
  68 </script>
  69
  70 <body onload="go()">
  71 <div>
  72   Tests that an attempt to animate the display property of a pseudo element is
  73   ignored, and that the animation proceeds as expected.
  74 </div>
  75 <div id="target"></div>
  76 <div id="log"></div>
  77 </body>