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

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