third_party/WebKit/LayoutTests/transitions/mismatched-shadow-transitions.html

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