2010-01-19 Ojan Vafai <ojan@chromium.org>
[WebKit-https.git] / LayoutTests / transitions / shorthand-border-transitions.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2    "http://www.w3.org/TR/html4/loose.dtd">
3
4 <html lang="en">
5 <head>
6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7   <title>Test shorthand transitions</title>
8   <style type="text/css" media="screen">
9     #box {
10       height: 100px;
11       width: 100px;
12       margin: 10px;
13       background-color: gray;
14       border: 0px solid rgb(0, 0, 0);
15       -webkit-transition: border 1s linear;
16     }
17     
18     #box.final {
19       border: 20px dashed rgb(255, 0, 255);
20     }
21
22     #box1 {
23       height: 100px;
24       width: 100px;
25       margin: 10px;
26       background-color: gray;
27       border: 0px solid rgb(0, 0, 0);
28       -webkit-transition: border-width 1s linear;
29     }
30     
31     #box1.final {
32       border: 20px solid rgb(255, 0, 255);
33     }
34
35     #box2 {
36       height: 100px;
37       width: 100px;
38       margin: 10px;
39       background-color: gray;
40       border: 0px solid rgb(0, 0, 0);
41       -webkit-transition: border 1s linear;
42     }
43     
44     #box2.final {
45       border-width: 20px;
46       border-bottom-width: 40px;
47     }
48   </style>
49   <script src="transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
50   <script type="text/javascript" charset="utf-8">
51     
52     const expectedValues = [
53       // [time, element-id, property, expected-value, tolerance]
54       // color and width of each side should be animating
55       [0.5, 'box', 'border-top-color', [128, 0, 128], 30],
56       [0.5, 'box', 'border-right-color', [128, 0, 128], 30],
57       [0.5, 'box', 'border-bottom-color', [128, 0, 128], 30],
58       [0.5, 'box', 'border-left-color', [128, 0, 128], 30],
59       [0.5, 'box', 'border-top-width', 10, 2],
60       [0.5, 'box', 'border-right-width', 10, 2],
61       [0.5, 'box', 'border-bottom-width', 10, 2],
62       [0.5, 'box', 'border-left-width', 10, 2],
63
64       // only border-width should be animating
65       [0.5, 'box1', 'border-top-width', 10, 2],
66       [0.5, 'box1', 'border-top-color', [255, 0, 255], 0],  // initial value
67
68       // border-width should be animating
69       [0.5, 'box2', 'border-top-width', 10, 2],
70       [0.5, 'box2', 'border-bottom-width', 20, 4],
71     ];
72     
73     function setupTest()
74     {
75       var box = document.getElementById('box');
76       box.className = 'final';
77
78       var box1 = document.getElementById('box1');
79       box1.className = 'final';
80
81       var box2 = document.getElementById('box2');
82       box2.className = 'final';
83     }
84     
85     runTransitionTest(expectedValues, setupTest, false);
86   </script>
87 </head>
88 <body>
89
90 <p>
91   Tests transitions of the border shorthand properties.
92 </p>
93 <div id="box"></div>
94 <div id="box1"></div>
95 <div id="box2"></div>
96
97 <div id="result">
98 </div>
99 </body>
100 </html>