Accept two values in the overflow shorthand
[WebKit-https.git] / LayoutTests / fast / css / getComputedStyle / getComputedStyle-overflow.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <script src="../../../resources/js-test-pre.js"></script>
6 </head>
7 <body>
8 <script>
9
10 description("Test computed style on the overflow property.")
11
12 var testContainer = document.createElement("div");
13 testContainer.contentEditable = true;
14 document.body.appendChild(testContainer);
15
16 testContainer.innerHTML = '<div id="test">hello</div>';
17
18 e = document.getElementById('test');
19 computedStyle = window.getComputedStyle(e, null);
20
21 debug('Shorthand tests');
22
23 const tests = [
24     // value, expected
25     [ 'scroll', 'scroll'],
26     [ 'auto', 'auto' ],
27     [ 'visible', 'visible' ],
28     [ 'hidden', 'hidden' ],
29     [ 'overlay', 'auto' ],
30 ];
31
32 for (let test of tests) {
33     e.style.overflow = 'auto';
34     e.style.overflow = test[0];
35     debug('');
36     shouldBeEqualToString("computedStyle.getPropertyValue('overflow-x')", test[1]);
37     shouldBeEqualToString("computedStyle.getPropertyValue('overflow-y')", test[1]);
38     shouldBeEqualToString("computedStyle.getPropertyValue('overflow')", test[1]);
39 }
40
41 debug('');
42 debug('Paged tests');
43
44 const pagedTests = [
45     // shorthand, expected-x, expected-y, expected-shorthand
46     [ '-webkit-paged-x', 'auto', '-webkit-paged-x', 'auto -webkit-paged-x' ],
47     [ '-webkit-paged-y', 'auto', '-webkit-paged-y', 'auto -webkit-paged-y' ],
48 ];
49
50 for (let test of pagedTests) {
51     e.style.overflow = 'auto';
52     e.style.overflow = test[0];
53     debug('');
54     shouldBeEqualToString("computedStyle.getPropertyValue('overflow-x')", test[1]);
55     shouldBeEqualToString("computedStyle.getPropertyValue('overflow-y')", test[2]);
56     shouldBeEqualToString("computedStyle.getPropertyValue('overflow')", test[3]);
57 }
58
59 debug('');
60 debug('Longhand tests');
61
62 const longhandTests = [
63     // x-value, y-value, computed-x-expected, computed-y-expected, computed-shorthand-expected, inline-x-expected, inline-y-expected, inline-shorthand-expected
64     [ 'scroll', 'scroll',
65         'scroll', 'scroll', 'scroll',
66         'scroll', 'scroll', 'scroll'],
67
68     [ 'scroll', 'auto',
69         'scroll', 'auto', 'scroll auto',
70         'scroll', 'auto', 'scroll auto'],
71
72     [ 'auto', 'scroll',
73         'auto', 'scroll', 'auto scroll',
74         'auto', 'scroll', 'auto scroll'],
75
76     [ 'visible', 'hidden',
77         'auto', 'hidden', 'auto hidden',
78         'visible', 'hidden', 'visible hidden'],
79
80     [ 'overlay', 'hidden',
81         'auto', 'hidden', 'auto hidden',
82         'overlay', 'hidden', 'overlay hidden'],
83
84     [ 'visible', '-webkit-paged-y',
85         'auto', '-webkit-paged-y', 'auto -webkit-paged-y',
86         'visible', '-webkit-paged-y', 'visible -webkit-paged-y'],
87
88     [ 'auto', '-webkit-paged-x',
89         'auto', '-webkit-paged-x', 'auto -webkit-paged-x',
90         'auto', '-webkit-paged-x', 'auto -webkit-paged-x'],
91
92     [ '-webkit-paged-x', '-webkit-paged-x',
93         'auto', '-webkit-paged-x', 'auto -webkit-paged-x',
94         'auto', '-webkit-paged-x', 'auto -webkit-paged-x'],
95
96     [ '-webkit-paged-y', '-webkit-paged-x',
97         'auto', '-webkit-paged-x', 'auto -webkit-paged-x',
98         'auto', '-webkit-paged-x', 'auto -webkit-paged-x'],
99 ];
100
101 for (let test of longhandTests) {
102     e.style.overflow = 'auto';
103     e.style.overflowX = test[0];
104     e.style.overflowY = test[1];
105     debug('');
106     shouldBeEqualToString("computedStyle.getPropertyValue('overflow-x')", test[2]);
107     shouldBeEqualToString("computedStyle.getPropertyValue('overflow-y')", test[3]);
108     shouldBeEqualToString("computedStyle.getPropertyValue('overflow')", test[4]);
109
110     shouldBeEqualToString("e.style.overflowX", test[5]);
111     shouldBeEqualToString("e.style.overflowY", test[6]);
112     shouldBeEqualToString("e.style.overflow", test[7]);
113 }
114
115 document.body.removeChild(testContainer);
116
117 </script>
118 <script src="../../../resources/js-test-post.js"></script>
119 </body>
120 </html>