third_party/WebKit/LayoutTests/transitions/transition-on-element-with-content.html

   1 <!DOCTYPE>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .box {
   7       height: 100px;
   8       width: 100px;
   9       margin: 10px;
  10       background-color: gray;
  11       content: 'Test';
  12     }
  13
  14     #box {
  15       opacity: 1;
  16       -webkit-transition: opacity 1s linear;
  17     }
  18
  19     #box.final {
  20       opacity: 0;
  21     }
  22
  23   </style>
  24   <script src="../animations/resources/animation-test-helpers.js"></script>
  25   <script type="text/javascript">
  26
  27     const expectedValues = [
  28       // [time, element-id, property, expected-value, tolerance]
  29       [0.5, 'box', 'opacity', 0.5, 0.1],
  30     ];
  31
  32     function setupTest()
  33     {
  34       document.getElementById('box').className = 'box final';
  35     }
  36
  37     runTransitionTest(expectedValues, setupTest);
  38   </script>
  39 </head>
  40 <body>
  41
  42   <!-- Test that a transition runs on an element with a 'content' property. -->
  43   <div id="box" class="box"></div>
  44
  45   <div id="result"></div>
  46
  47 </body>
  48 </html>