1f85b8d4c63f73a95b0323f26819ad7bb59ee9d4
[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     [ 'hidden visible', 'auto' ], // WebKit doesn't support different values of overflow on different axes.
32     [ 'hidden hidden', 'auto' ], // WebKit doesn't support different values of overflow on different axes, and thus only accepts a single value for overflow.
33 ];
34
35 for (let test of tests) {
36     e.style.overflow = 'auto';
37     e.style.overflow = test[0];
38     debug('');
39     shouldBeEqualToString("computedStyle.getPropertyValue('overflow-x')", test[1]);
40     shouldBeEqualToString("computedStyle.getPropertyValue('overflow-y')", test[1]);
41     shouldBeEqualToString("computedStyle.getPropertyValue('overflow')", test[1]);
42 }
43
44 debug('');
45 debug('Paged tests');
46
47 const pagedTests = [
48     // shorthand, expected-x, expected-y, expected-shorthand
49     [ '-webkit-paged-x', 'auto', '-webkit-paged-x', '-webkit-paged-x' ],
50     [ '-webkit-paged-y', 'auto', '-webkit-paged-y', '-webkit-paged-y' ],
51 ];
52
53 for (let test of pagedTests) {
54     e.style.overflow = 'auto';
55     e.style.overflow = test[0];
56     debug('');
57     shouldBeEqualToString("computedStyle.getPropertyValue('overflow-x')", test[1]);
58     shouldBeEqualToString("computedStyle.getPropertyValue('overflow-y')", test[2]);
59     shouldBeEqualToString("computedStyle.getPropertyValue('overflow')", test[3]);
60 }
61
62 debug('');
63 debug('Longhand tests');
64
65 const longhandTests = [
66     // x-value, y-value, computed-x-expected, computed-y-expected, computed-shorthand-expected, inline-x-expected, inline-y-expected, inline-shorthand-expected
67     [ 'scroll', 'scroll',
68         'scroll', 'scroll', 'scroll',
69         'scroll', 'scroll', 'scroll'],
70
71     [ 'scroll', 'auto',
72         'scroll', 'auto', 'auto',
73         'scroll', 'auto', ''],
74
75     [ 'auto', 'scroll',
76         'auto', 'scroll', 'auto',
77         'auto', 'scroll', ''],
78
79     [ 'visible', 'hidden',
80         'auto', 'hidden', 'auto',
81         'visible', 'hidden', ''],
82
83     [ 'overlay', 'hidden',
84         'auto','hidden', 'auto',
85         'overlay', 'hidden', ''],
86
87     [ 'visible', '-webkit-paged-y',
88         'auto', '-webkit-paged-y', '-webkit-paged-y',
89         'visible', '-webkit-paged-y', ''],
90
91     [ 'auto', '-webkit-paged-x',
92         'auto', '-webkit-paged-x', '-webkit-paged-x',
93         'auto', '-webkit-paged-x', ''],
94
95     [ '-webkit-paged-x', '-webkit-paged-x',
96         'auto', '-webkit-paged-x', '-webkit-paged-x',
97         'auto', '-webkit-paged-x', ''],
98
99     [ '-webkit-paged-y', '-webkit-paged-x',
100         'auto', '-webkit-paged-x', '-webkit-paged-x',
101         'auto', '-webkit-paged-x', ''],
102 ];
103
104 for (let test of longhandTests) {
105     e.style.overflow = 'auto';
106     e.style.overflowX = test[0];
107     e.style.overflowY = test[1];
108     debug('');
109     shouldBeEqualToString("computedStyle.getPropertyValue('overflow-x')", test[2]);
110     shouldBeEqualToString("computedStyle.getPropertyValue('overflow-y')", test[3]);
111     shouldBeEqualToString("computedStyle.getPropertyValue('overflow')", test[4]);
112
113     shouldBeEqualToString("e.style.overflowX", test[5]);
114     shouldBeEqualToString("e.style.overflowY", test[6]);
115     shouldBeEqualToString("e.style.overflow", test[7]);
116 }
117
118 document.body.removeChild(testContainer);
119
120 </script>
121 <script src="../../../resources/js-test-post.js"></script>
122 </body>
123 </html>