WebCore:
[WebKit-https.git] / LayoutTests / fast / replaced / table-percent-height.html
1 <html>
2 <head>
3 <title>Test for Buzilla Bug 15359: JPEG image not shown when height is specified as percentage inside a table</title>
4 <link rel="stylesheet" href="../js/resources/js-test-style.css">
5 <script src="../js/resources/js-test-pre.js"></script>
6 <script src="../js/resources/js-test-post-function.js"></script>
7 <script>
8 if (window.layoutTestController) {
9     layoutTestController.waitUntilDone();
10     layoutTestController.dumpAsText();
11 }
12
13 function getComputedStyleForElement (element, cssPropertyName)
14 {
15     if (!element) {
16         return null;
17     }
18     if (window.getComputedStyle) {
19         return window.getComputedStyle(element, '').getPropertyValue(cssPropertyName.replace(/([A-Z])/g, "-$1").toLowerCase());
20     }
21     if (element.currentStyle) {
22         return element.currentStyle[cssPropertyName];
23     }
24     return null;
25 }
26
27 function test()
28 {
29     description("This test checks that replaced elements with percentage heights within table cells have the correct height.");
30
31     shouldBe("getComputedStyleForElement(document.getElementById('canvas-75'), 'width')", "'300px'");
32     shouldBe("getComputedStyleForElement(document.getElementById('canvas-75'), 'height')", "'112px'");
33     shouldBe("getComputedStyleForElement(document.getElementById('canvas-100'), 'width')", "'300px'");
34     shouldBe("getComputedStyleForElement(document.getElementById('canvas-100'), 'height')", "'150px'");
35
36     shouldBe("getComputedStyleForElement(document.getElementById('embed-75'), 'width')", "'300px'");
37     shouldBe("getComputedStyleForElement(document.getElementById('embed-75'), 'height')", "'112px'");
38     shouldBe("getComputedStyleForElement(document.getElementById('embed-100'), 'width')", "'300px'");
39     shouldBe("getComputedStyleForElement(document.getElementById('embed-100'), 'height')", "'150px'");
40
41     shouldBe("getComputedStyleForElement(document.getElementById('img-75'), 'width')", "'75px'");
42     shouldBe("getComputedStyleForElement(document.getElementById('img-75'), 'height')", "'75px'");
43     shouldBe("getComputedStyleForElement(document.getElementById('img-100'), 'width')", "'100px'");
44     shouldBe("getComputedStyleForElement(document.getElementById('img-100'), 'height')", "'100px'");
45
46     shouldBe("getComputedStyleForElement(document.getElementById('object-75'), 'width')", "'300px'");
47     shouldBe("getComputedStyleForElement(document.getElementById('object-75'), 'height')", "'112px'");
48     shouldBe("getComputedStyleForElement(document.getElementById('object-100'), 'width')", "'300px'");
49     shouldBe("getComputedStyleForElement(document.getElementById('object-100'), 'height')", "'150px'");
50
51     shouldBe("getComputedStyleForElement(document.getElementById('button-75'), 'width')", "'51px'");
52     shouldBe("getComputedStyleForElement(document.getElementById('button-75'), 'height')", "'15px'");
53     shouldBe("getComputedStyleForElement(document.getElementById('button-100'), 'width')", "'51px'");
54     shouldBe("getComputedStyleForElement(document.getElementById('button-100'), 'height')", "'15px'");
55
56     shouldBe("getComputedStyleForElement(document.getElementById('input-button-75'), 'width')", "'16px'");
57     shouldBe("getComputedStyleForElement(document.getElementById('input-button-75'), 'height')", "'18px'");
58     shouldBe("getComputedStyleForElement(document.getElementById('input-button-100'), 'width')", "'16px'");
59     shouldBe("getComputedStyleForElement(document.getElementById('input-button-100'), 'height')", "'18px'");
60
61     shouldBe("getComputedStyleForElement(document.getElementById('input-checkbox-75'), 'width')", "'12px'");
62     shouldBe("getComputedStyleForElement(document.getElementById('input-checkbox-75'), 'height')", "'4px'");
63     shouldBe("getComputedStyleForElement(document.getElementById('input-checkbox-100'), 'width')", "'12px'");
64     shouldBe("getComputedStyleForElement(document.getElementById('input-checkbox-100'), 'height')", "'6px'");
65
66     shouldBe("getComputedStyleForElement(document.getElementById('input-file-75'), 'width')", "'237px'");
67     shouldBe("getComputedStyleForElement(document.getElementById('input-file-75'), 'height')", "'13px'");
68     shouldBe("getComputedStyleForElement(document.getElementById('input-file-100'), 'width')", "'237px'");
69     shouldBe("getComputedStyleForElement(document.getElementById('input-file-100'), 'height')", "'18px'");
70
71     shouldBe("getComputedStyleForElement(document.getElementById('input-image-75'), 'width')", "'75px'");
72     shouldBe("getComputedStyleForElement(document.getElementById('input-image-75'), 'height')", "'75px'");
73     shouldBe("getComputedStyleForElement(document.getElementById('input-image-100'), 'width')", "'100px'");
74     shouldBe("getComputedStyleForElement(document.getElementById('input-image-100'), 'height')", "'100px'");
75
76     shouldBe("getComputedStyleForElement(document.getElementById('input-password-75'), 'width')", "'148px'");
77     shouldBe("getComputedStyleForElement(document.getElementById('input-password-75'), 'height')", "'8px'");
78     shouldBe("getComputedStyleForElement(document.getElementById('input-password-100'), 'width')", "'148px'");
79     shouldBe("getComputedStyleForElement(document.getElementById('input-password-100'), 'height')", "'13px'");
80
81     shouldBe("getComputedStyleForElement(document.getElementById('input-radio-75'), 'width')", "'12px'");
82     shouldBe("getComputedStyleForElement(document.getElementById('input-radio-75'), 'height')", "'4px'");
83     shouldBe("getComputedStyleForElement(document.getElementById('input-radio-100'), 'width')", "'12px'");
84     shouldBe("getComputedStyleForElement(document.getElementById('input-radio-100'), 'height')", "'6px'");
85
86     shouldBe("getComputedStyleForElement(document.getElementById('input-reset-75'), 'width')", "'45px'");
87     shouldBe("getComputedStyleForElement(document.getElementById('input-reset-75'), 'height')", "'18px'");
88     shouldBe("getComputedStyleForElement(document.getElementById('input-reset-100'), 'width')", "'45px'");
89     shouldBe("getComputedStyleForElement(document.getElementById('input-reset-100'), 'height')", "'18px'");
90
91     shouldBe("getComputedStyleForElement(document.getElementById('input-submit-75'), 'width')", "'54px'");
92     shouldBe("getComputedStyleForElement(document.getElementById('input-submit-75'), 'height')", "'18px'");
93     shouldBe("getComputedStyleForElement(document.getElementById('input-submit-100'), 'width')", "'54px'");
94     shouldBe("getComputedStyleForElement(document.getElementById('input-submit-100'), 'height')", "'18px'");
95
96     shouldBe("getComputedStyleForElement(document.getElementById('input-text-75'), 'width')", "'148px'");
97     shouldBe("getComputedStyleForElement(document.getElementById('input-text-75'), 'height')", "'8px'");
98     shouldBe("getComputedStyleForElement(document.getElementById('input-text-100'), 'width')", "'148px'");
99     shouldBe("getComputedStyleForElement(document.getElementById('input-text-100'), 'height')", "'13px'");
100
101     shouldBe("getComputedStyleForElement(document.getElementById('isindex-75'), 'width')", "'142px'");
102     shouldBe("getComputedStyleForElement(document.getElementById('isindex-75'), 'height')", "'35px'");
103     shouldBe("getComputedStyleForElement(document.getElementById('isindex-100'), 'width')", "'142px'");
104     shouldBe("getComputedStyleForElement(document.getElementById('isindex-100'), 'height')", "'49px'");
105
106     shouldBe("getComputedStyleForElement(document.getElementById('select-75'), 'width')", "'68px'");
107     shouldBe("getComputedStyleForElement(document.getElementById('select-75'), 'height')", "'18px'");
108     shouldBe("getComputedStyleForElement(document.getElementById('select-100'), 'width')", "'68px'");
109     shouldBe("getComputedStyleForElement(document.getElementById('select-100'), 'height')", "'18px'");
110
111     shouldBe("getComputedStyleForElement(document.getElementById('textarea-75'), 'width')", "'163px'");
112     shouldBe("getComputedStyleForElement(document.getElementById('textarea-75'), 'height')", "'19px'");
113     shouldBe("getComputedStyleForElement(document.getElementById('textarea-100'), 'width')", "'163px'");
114     shouldBe("getComputedStyleForElement(document.getElementById('textarea-100'), 'height')", "'26px'");
115
116     isSuccessfullyParsed();
117
118     if (window.layoutTestController) { 
119         layoutTestController.notifyDone();
120     }
121 }
122
123 var successfullyParsed = true;
124 </script>
125 </head>
126 <body onload="test()">
127
128 <table><tr><td><canvas id="canvas-75" style="background-color: #00ff00; height: 75%;"></canvas></td></tr></table>
129 <table><tr><td><canvas id="canvas-100" style="background-color: #00ff00; height: 100%;"></canvas></td></tr></table>
130
131 <table><tr><td><embed id="embed-75" style="background-color: #00ff00; height: 75%;"></embed></td></tr></table>
132 <table><tr><td><embed id="embed-100" style="background-color: #00ff00; height: 100%;"></embed></td></tr></table>
133
134 <table><tr><td><img id="img-75" src="resources/square-blue-100x100.png" style="height: 75%;"></td></tr></table>
135 <table><tr><td><img id="img-100" src="resources/square-blue-100x100.png" style="height: 100%;"></td></tr></table>
136
137 <table><tr><td><object id="object-75" style="background-color: #00ff00; height: 75%;"></object></td></tr></table>
138 <table><tr><td><object id="object-100" style="background-color: #00ff00; height: 100%;"></object></td></tr></table>
139
140 <table><tr><td><button id="button-75" style="height: 75%;">Button</button></td></tr></table>
141 <table><tr><td><button id="button-100" style="height: 100%;">Button</button></td></tr></table>
142
143 <table><tr><td><input type="button" id="input-button-75" style="height: 75%;"></td></tr></table>
144 <table><tr><td><input type="button" id="input-button-100" style="height: 100%;"></td></tr></table>
145
146 <table><tr><td><input type="checkbox" id="input-checkbox-75" style="height: 75%;"></td></tr></table>
147 <table><tr><td><input type="checkbox" id="input-checkbox-100" style="height: 100%;"></td></tr></table>
148
149 <table><tr><td><input type="file" id="input-file-75" style="height: 75%;"></td></tr></table>
150 <table><tr><td><input type="file" id="input-file-100" style="height: 100%;"></td></tr></table>
151
152 <table><tr><td><input type="image" src="resources/square-blue-100x100.png" id="input-image-75" style="height: 75%;"></td></tr></table>
153 <table><tr><td><input type="image" src="resources/square-blue-100x100.png" id="input-image-100" style="height: 100%;"></td></tr></table>
154
155 <table><tr><td><input type="password" id="input-password-75" style="height: 75%;"></td></tr></table>
156 <table><tr><td><input type="password" id="input-password-100" style="height: 100%;"></td></tr></table>
157
158 <table><tr><td><input type="radio" id="input-radio-75" style="height: 75%;"></td></tr></table>
159 <table><tr><td><input type="radio" id="input-radio-100" style="height: 100%;"></td></tr></table>
160
161 <table><tr><td><input type="reset" id="input-reset-75" style="height: 75%;"></td></tr></table>
162 <table><tr><td><input type="reset" id="input-reset-100" style="height: 100%;"></td></tr></table>
163
164 <table><tr><td><input type="submit" id="input-submit-75" style="height: 75%;"></td></tr></table>
165 <table><tr><td><input type="submit" id="input-submit-100" style="height: 100%;"></td></tr></table>
166
167 <table><tr><td><input type="text" id="input-text-75" style="height: 75%;"></td></tr></table>
168 <table><tr><td><input type="text" id="input-text-100" style="height: 100%;"></td></tr></table>
169
170 <table><tr><td><isindex id="isindex-75" style="height: 75%;"></td></tr></table>
171 <table><tr><td><isindex id="isindex-100" style="height: 100%;"></td></tr></table>
172
173 <table><tr><td><select id="select-75" style="height: 75%;"><option>Option</option></select></td></tr></table>
174 <table><tr><td><select id="select-100" style="height: 100%;"><option>Option</option></select></td></tr></table>
175
176 <table><tr><td><textarea id="textarea-75" style="height: 75%;"></textarea></td></tr></table>
177 <table><tr><td><textarea id="textarea-100" style="height: 100%;"></textarea></td></tr></table>
178
179 <p id="description"></p>
180 <div id="console"></div>
181 </body>
182 </html>