REGRESSION (r230574): Interrupted hardware transitions don't behave correctly
[WebKit-https.git] / LayoutTests / transitions / min-max-width-height-transitions.html
1 <!DOCTYPE><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
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>