5fd96b61035d02e417dc6e0f7c54900dd2291a14
[WebKit-https.git] / LayoutTests / transitions / shorthand-border-transitions.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2
3 <html>
4 <head>
5   <style>
6     #box {
7       height: 100px;
8       width: 100px;
9       margin: 10px;
10       background-color: gray;
11       border: 0px solid rgb(0, 0, 0);
12       -webkit-transition: border 1s linear;
13     }
14     
15     #box.final {
16       border: 20px dashed rgb(255, 0, 255);
17     }
18
19     #box1 {
20       height: 100px;
21       width: 100px;
22       margin: 10px;
23       background-color: gray;
24       border: 0px solid rgb(0, 0, 0);
25       -webkit-transition: border-width 1s linear;
26     }
27     
28     #box1.final {
29       border: 20px solid rgb(255, 0, 255);
30     }
31
32     #box2 {
33       height: 100px;
34       width: 100px;
35       margin: 10px;
36       background-color: gray;
37       border: 0px solid rgb(0, 0, 0);
38       -webkit-transition: border 1s linear;
39     }
40     
41     #box2.final {
42       border-width: 20px;
43       border-bottom-width: 40px;
44     }
45   </style>
46   <script src="resources/transition-test-helpers.js"></script>
47   <script type="text/javascript">
48     
49     const expectedValues = [
50       // [time, element-id, property, expected-value, tolerance, callback, should-be-transitioning]
51       // color and width of each side should be animating
52       [0.5, 'box', 'border-top-color', [128, 0, 128], 30],
53       [0.5, 'box', 'border-right-color', [128, 0, 128], 30],
54       [0.5, 'box', 'border-bottom-color', [128, 0, 128], 30],
55       [0.5, 'box', 'border-left-color', [128, 0, 128], 30],
56       [0.5, 'box', 'border-top-width', 10, 2],
57       [0.5, 'box', 'border-right-width', 10, 2],
58       [0.5, 'box', 'border-bottom-width', 10, 2],
59       [0.5, 'box', 'border-left-width', 10, 2],
60
61       // only border-width should be animating
62       [0.5, 'box1', 'border-top-width', 10, 2],
63       [0.5, 'box1', 'border-top-color', [255, 0, 255], 0, null, shouldNotBeTransitioning],
64
65       // border-width should be animating
66       [0.5, 'box2', 'border-top-width', 10, 2],
67       [0.5, 'box2', 'border-bottom-width', 20, 4],
68     ];
69     
70     function setupTest()
71     {
72       var box = document.getElementById('box');
73       box.className = 'final';
74
75       var box1 = document.getElementById('box1');
76       box1.className = 'final';
77
78       var box2 = document.getElementById('box2');
79       box2.className = 'final';
80     }
81     
82     runTransitionTest(expectedValues, setupTest, usePauseAPI);
83   </script>
84 </head>
85 <body>
86
87 <p>
88   Tests transitions of the border shorthand properties.
89 </p>
90 <div id="box"></div>
91 <div id="box1"></div>
92 <div id="box2"></div>
93
94 <div id="result">
95 </div>
96 </body>
97 </html>