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