third_party/WebKit/LayoutTests/transitions/flex-transitions.html

   1 <!DOCTYPE>
   2 <html>
   3 <head>
   4 <style>
   5 .flexbox {
   6     display: -webkit-flex;
   7     width: 100px;
   8     height: 100px;
   9     margin-bottom: 10px;
  10 }
  11 .flexbox :nth-child(1) {
  12     background-color: blue;
  13 }
  14 .flexbox :nth-child(2) {
  15     background-color: green;
  16 }
  17 .flexbox div {
  18     -webkit-transition-property: -webkit-flex;
  19     -webkit-transition-duration: 1s;
  20     -webkit-transition-timing-function: linear;
  21 }
  22
  23 #flex-row div {
  24     -webkit-flex: 100 0 0px;
  25 }
  26 .final #row1 {
  27     -webkit-flex: 300 0 0px;
  28 }
  29
  30 #flex-column {
  31     -webkit-flex-direction: column;
  32 }
  33 #flex-column div {
  34     -webkit-flex: 100 0 0px;
  35 }
  36 .final #column1 {
  37     -webkit-flex: 0 0 200px;
  38 }
  39
  40 #flex-negative div {
  41     -webkit-flex: 100 100 50px;
  42 }
  43 .final #negative1 {
  44     -webkit-flex: 100 100 100px;
  45 }
  46
  47 #flex-no-flex div {
  48     -webkit-flex: 100 0 0px;
  49 }
  50 .final #no-flex1 {
  51     -webkit-flex: 0 0 0px;
  52 }
  53
  54 </style>
  55   <script src="../animations/resources/animation-test-helpers.js"></script>
  56   <script type="text/javascript">
  57
  58     const expectedValues = [
  59       // [time, element-id, property, expected-value, tolerance]
  60       [0.2, 'row1',      '-webkit-flex', [140, 0,     0], 10],
  61       [0.2, 'column1',   '-webkit-flex', [80,  0,    40], 10],
  62       [0.2, 'negative1', '-webkit-flex', [100, 100,  60], 10],
  63       [0.2, 'no-flex1',  '-webkit-flex', [80,  0,     0], 10],
  64       [0.8, 'row1',      '-webkit-flex', [260, 0,     0], 10],
  65       [0.8, 'column1',   '-webkit-flex', [20,  0,   160], 10],
  66       [0.8, 'negative1', '-webkit-flex', [100, 100,  90], 10],
  67       [0.8, 'no-flex1',  '-webkit-flex', [20,  0,     0], 10],
  68     ];
  69
  70     function setupTest()
  71     {
  72       document.body.className = 'final';
  73     }
  74
  75     runTransitionTest(expectedValues, setupTest);
  76   </script>
  77 </head>
  78 <body>
  79
  80   <div id="flex-row" class='flexbox'>
  81     <div id="row1"></div>
  82     <div id="row2"></div>
  83   </div>
  84
  85   <div id="flex-column" class='flexbox'>
  86     <div id="column1"></div>
  87     <div id="column2"></div>
  88   </div>
  89
  90   <div id="flex-negative" class='flexbox'>
  91     <div id="negative1"></div>
  92     <div id="negative2"></div>
  93   </div>
  94
  95   <div id="flex-no-flex" class='flexbox'>
  96     <div id="no-flex1"></div>
  97     <div id="no-flex2"></div>
  98   </div>
  99
 100   <div id="result"></div>
 101 </body>
 102 </html>