| <!DOCTYPE> |
| <html> |
| <head> |
| <style> |
| .flexbox { |
| display: -webkit-flexbox; |
| width: 100px; |
| height: 100px; |
| } |
| .flexbox :nth-child(1) { |
| background-color: blue; |
| } |
| .flexbox :nth-child(2) { |
| background-color: green; |
| } |
| .flexbox div { |
| -webkit-transition-property: -webkit-flex; |
| -webkit-transition-duration: 1s; |
| -webkit-transition-timing-function: linear; |
| } |
| |
| #flex-row div { |
| flex: 1 0 0px; |
| } |
| .final #row1 { |
| flex: 3 0 0px; |
| } |
| |
| #flex-column { |
| flex-direction: column; |
| } |
| #flex-column div { |
| flex: 1 0 0px; |
| } |
| .final #column1 { |
| flex: 0 0 20px; |
| } |
| |
| #flex-negative div { |
| flex: 1 1 50px; |
| } |
| .final #negative1 { |
| flex: 1 100px; |
| } |
| |
| #flex-no-flex div { |
| -webkit-flex: 1 0 0px; |
| } |
| .final #no-flex1 { |
| -webkit-flex: 0 0 0px; |
| } |
| |
| </style> |
| <script src="resources/transition-test-helpers.js"></script> |
| <script type="text/javascript"> |
| |
| const expectedValues = [ |
| // [time, element-id, property, expected-value, tolerance] |
| [0.5, 'row1', 'flex', [2, 0, 0], .5], |
| [0.5, 'column1', 'flex', [.5, 0, 10], 3], |
| [0.5, 'negative1', 'flex', [1, .5, 75], 3], |
| [0.5, 'no-flex1', 'flex', [.5, 0, 0], .4], |
| ]; |
| |
| function setupTest() |
| { |
| document.body.className = 'final'; |
| } |
| |
| runTransitionTest(expectedValues, setupTest, usePauseAPI); |
| </script> |
| </head> |
| <body> |
| |
| <div id="flex-row" class='flexbox'> |
| <div id="row1"></div> |
| <div id="row2"></div> |
| </div> |
| |
| <div id="flex-column" class='flexbox'> |
| <div id="column1"></div> |
| <div id="column2"></div> |
| </div> |
| |
| <div id="flex-negative" class='flexbox'> |
| <div id="negative1"></div> |
| <div id="negative2"></div> |
| </div> |
| |
| <div id="flex-no-flex" class='flexbox'> |
| <div id="no-flex1"></div> |
| <div id="no-flex2"></div> |
| </div> |
| |
| <div id="result"></div> |
| </body> |
| </html> |
