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

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .box {
   7       display: inline-block;
   8       height: 100px;
   9       width: 100px;
  10       margin: 20px;
  11       border: 3px solid blue;
  12       -webkit-transition-duration: 0.5s;
  13       -webkit-transition-timing-function: linear;
  14       -webkit-transition-property: box-shadow;
  15     }
  16
  17     .final #none-to-normal {
  18       box-shadow: 20px 20px 10px black;
  19     }
  20
  21     .final #none-to-inset {
  22       box-shadow: 20px 20px 10px black inset;
  23     }
  24
  25     #inset-to-normal {
  26       box-shadow: 20px 20px 10px black inset;
  27     }
  28
  29     .final #inset-to-normal {
  30       box-shadow: 20px 20px 10px black;
  31     }
  32
  33     #normal-to-inset {
  34       box-shadow: 20px 20px 10px black;
  35     }
  36
  37     .final #normal-to-inset {
  38       box-shadow: 20px 20px 10px black inset;
  39     }
  40
  41   </style>
  42   <script src="../animations/resources/animation-test-helpers.js"></script>
  43   <script type="text/javascript">
  44
  45     const expectedValues = [
  46       // [time, element-id, property, expected-value, tolerance]
  47       // For box-shadow, we test shadow-x and shadow-y to see if it's animating.
  48       [0.3, 'none-to-normal', 'box-shadow', 'rgba(0, 0, 0, 0.6) 12px 12px 6px 0px', 1],
  49       [0.3, 'none-to-inset', 'box-shadow', 'rgba(0, 0, 0, 0.6) 12px 12px 6px 0px inset', 1],
  50       [0.3, 'inset-to-normal', 'box-shadow', 'rgb(0, 0, 0) 20px 20px 10px 0px', 1],
  51       [0.3, 'normal-to-inset', 'box-shadow', 'rgb(0, 0, 0) 20px 20px 10px 0px inset', 1],
  52     ];
  53
  54     function setupTest()
  55     {
  56       document.body.className = 'final';
  57     }
  58
  59     runTransitionTest(expectedValues, setupTest);
  60   </script>
  61 </head>
  62 <body>
  63
  64   <div id="none-to-normal" class="box"></div>
  65   <div id="none-to-inset" class="box"></div>
  66   <div id="inset-to-normal" class="box"></div>
  67   <div id="normal-to-inset" class="box"></div>
  68
  69   <div id="result">
  70   </div>
  71
  72 </body>
  73 </html>