LayoutTests/transitions/min-max-width-height-transitions.html

   1 <!DOCTYPE>
   2 <html>
   3 <head>
   4   <style>
   5     #container {
   6       border: 1px solid black;
   7       width: 300px;
   8       height: 300px;
   9     }
  10
  11     .box {
  12       width: 100px;
  13       height: 100px;
  14       margin: 10px;
  15       background-color: blue;
  16       -webkit-transition-property: min-width, min-height, max-width, max-height;
  17       -webkit-transition-duration: 1s;
  18       -webkit-transition-timing-function: linear;
  19     }
  20
  21     .minner {
  22       min-width: 100px;
  23       min-height: 100px;
  24     }
  25
  26     #container.final .minner {
  27       min-width: 200px;
  28       min-height: 200px;
  29     }
  30
  31     .maxer {
  32       max-width: 100px;
  33       max-height: 100px;
  34     }
  35
  36     #container.final .maxer {
  37       max-width: 50px;
  38       max-height: 50px;
  39     }
  40
  41   </style>
  42   <script src="resources/transition-test-helpers.js"></script>
  43   <script type="text/javascript">
  44
  45     const expectedValues = [
  46       // [time, element-id, property, expected-value, tolerance]
  47       [0.5, 'box1', 'min-height', 150, 2],
  48       [0.5, 'box1', 'min-width', 150, 2],
  49       [0.5, 'box2', 'max-height', 75, 2],
  50       [0.5, 'box2', 'max-width', 75, 2],
  51     ];
  52
  53     function setupTest()
  54     {
  55       document.getElementById('container').className = 'final';
  56     }
  57
  58     runTransitionTest(expectedValues, setupTest, usePauseAPI);
  59   </script>
  60 </head>
  61 <body>
  62
  63   <div id="container">
  64     <div id="box1" class='minner box'></div>
  65     <div id="box2" class='maxer box'></div>
  66   </div>
  67
  68   <div id="result"></div>
  69 </body>
  70 </html>