third_party/WebKit/LayoutTests/transitions/shape-transition.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     #box {
   7       height: 100px;
   8       width: 100px;
   9       background-color: blue;
  10       shape-outside: polygon(nonzero, 30px 30px);
  11       transition-property: shape-outside;
  12       transition-duration: 1s;
  13       transition-timing-function: linear;
  14     }
  15
  16     #box.changed {
  17       shape-outside: polygon(nonzero, 50px 50px);
  18     }
  19   </style>
  20   <script src="../animations/resources/animation-test-helpers.js"></script>
  21   <script type="text/javascript">
  22
  23     const expectedValues = [
  24       // [time, element-id, property, expected-value, tolerance]
  25       [0.5, 'box', 'shape-outside', 'polygon(40px 40px)', 1],
  26     ];
  27
  28     function setupTest()
  29     {
  30       document.getElementById('box').className = 'changed';
  31     }
  32
  33     runTransitionTest(expectedValues, setupTest);
  34   </script>
  35 </head>
  36 <body>
  37   <div id="box"></div>
  38   <div id="result"></div>
  39 </body>
  40 </html>