Move parseFontFaceDescriptor to CSSPropertyParser.cpp
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / replaced / table-percent-height.html
blob10611ac86f680444ddd5aead271116b423c17df4
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 <script src="../../resources/js-test.js"></script>
5 <script>
6 if (window.testRunner) {
7 testRunner.waitUntilDone();
8 testRunner.dumpAsText();
11 function getComputedStyleForElement(element, cssPropertyName)
13 if (!element) {
14 return null;
16 if (window.getComputedStyle) {
17 return window.getComputedStyle(element, '').getPropertyValue(cssPropertyName.replace(/([A-Z])/g, "-$1").toLowerCase());
19 if (element.currentStyle) {
20 return element.currentStyle[cssPropertyName];
22 return null;
25 function getWidth(id)
27 return getComputedStyleForElement(document.getElementById(id), 'width');
30 function getHeight(id)
32 return getComputedStyleForElement(document.getElementById(id), 'height');
35 function parsePixelValue(str)
37 if (typeof str != "string" || str.length < 3 || str.substr(str.length - 2) != "px") {
38 testFailed(str + " is unparsable.");
39 return -1;
41 return parseFloat(str);
44 function is75PercentOf(expression75, expression100)
46 var str75 = eval(expression75);
47 var str100 = eval(expression100);
48 var num75 = parsePixelValue(str75);
49 var num100 = parsePixelValue(str100);
50 if (num75 < 0 || num100 < 0)
51 return;
52 var expectedValue = num100 * 75 / 100;
53 if (num75 == expectedValue)
54 testPassed(expression75 + " is 75% of " + expression100 + ".");
55 else
56 testFailed(expression75 + " [" + str75 + "] is not 75% of " + expression100 + " [" + str100 + "].");
59 function test()
61 description("This test checks that replaced elements with percentage heights within table cells have the correct height.<br>Note, some of the button height tests fail on the Windows ports. See bug #34071.");
63 shouldBe("getWidth('canvas-75')", "'225px'");
64 shouldBe("getHeight('canvas-75')", "'112.5px'");
65 shouldBe("getWidth('canvas-100')", "'300px'");
66 shouldBe("getHeight('canvas-100')", "'150px'");
68 shouldBe("getWidth('embed-75')", "'300px'");
69 shouldBe("getHeight('embed-75')", "'112.5px'");
70 shouldBe("getWidth('embed-100')", "'300px'");
71 shouldBe("getHeight('embed-100')", "'150px'");
73 shouldBe("getWidth('img-75')", "'75px'");
74 shouldBe("getHeight('img-75')", "'75px'");
75 shouldBe("getWidth('img-100')", "'100px'");
76 shouldBe("getHeight('img-100')", "'100px'");
78 shouldBe("getWidth('img-75-nested')", "'75px'");
79 shouldBe("getHeight('img-75-nested')", "'75px'");
80 shouldBe("getWidth('img-100-nested')", "'100px'");
81 shouldBe("getHeight('img-100-nested')", "'100px'");
83 shouldBe("getWidth('object-75')", "'300px'");
84 shouldBe("getHeight('object-75')", "'112.5px'");
85 shouldBe("getWidth('object-100')", "'300px'");
86 shouldBe("getHeight('object-100')", "'150px'");
88 shouldBe("getWidth('button-75')", "getWidth('button-100')");
89 shouldBeTrue("getHeight('button-75') != '0px'");
90 shouldBe("getHeight('button-75')", "getHeight('button-100')");
92 shouldBe("getWidth('input-button-75')", "getWidth('input-button-100')");
93 shouldBeTrue("getHeight('input-button-75') != '0px'");
94 shouldBe("getHeight('input-button-75')", "getHeight('input-button-100')");
96 shouldBe("getWidth('input-checkbox-75')", "getWidth('input-checkbox-100')");
97 shouldBeTrue("getHeight('input-checkbox-75') != '0px'");
98 // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
99 is75PercentOf("getHeight('input-checkbox-75')", "getHeight('input-checkbox-100')");
101 shouldBe("getWidth('input-file-75')", "getWidth('input-file-100')");
102 shouldBeTrue("getHeight('input-file-75') != '0px'");
103 // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
104 is75PercentOf("getHeight('input-file-75')", "getHeight('input-file-100')");
106 // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
107 shouldBe("getWidth('input-image-75')", "'75px'");
108 shouldBe("getHeight('input-image-75')", "'75px'");
109 shouldBe("getWidth('input-image-100')", "'100px'");
110 shouldBe("getHeight('input-image-100')", "'100px'");
112 shouldBe("getWidth('input-radio-75')", "getWidth('input-radio-100')");
113 shouldBeTrue("getHeight('input-radio-75') != '0px'");
114 // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
115 is75PercentOf("getHeight('input-radio-75')", "getHeight('input-radio-100')");
117 shouldBe("getWidth('input-reset-75')", "getWidth('input-reset-100')");
118 shouldBeTrue("getHeight('input-reset-75') != '0px'");
119 shouldBe("getHeight('input-reset-75')", "getHeight('input-reset-100')");
121 shouldBe("getWidth('input-submit-75')", "getWidth('input-submit-100')");
122 shouldBeTrue("getHeight('input-submit-75') != '0px'");
123 shouldBe("getHeight('input-submit-75')", "getHeight('input-submit-100')");
125 shouldBe("getWidth('select-75')", "getWidth('select-100')");
126 shouldBeTrue("getHeight('select-75') != '0px'");
127 shouldBe("getHeight('select-75')", "getHeight('select-100')");
129 isSuccessfullyParsed();
131 if (window.testRunner) {
132 testRunner.notifyDone();
135 </script>
136 </head>
137 <body onload="test()">
139 <table><tr><td><canvas id="canvas-75" style="background-color: #00ff00; height: 75%;"></canvas></td></tr></table>
140 <table><tr><td><canvas id="canvas-100" style="background-color: #00ff00; height: 100%;"></canvas></td></tr></table>
142 <table><tr><td><embed id="embed-75" style="background-color: #00ff00; height: 75%;"></embed></td></tr></table>
143 <table><tr><td><embed id="embed-100" style="background-color: #00ff00; height: 100%;"></embed></td></tr></table>
145 <table><tr><td><img id="img-75" src="resources/square-blue-100x100.png" style="height: 75%;"></td></tr></table>
146 <table><tr><td><img id="img-100" src="resources/square-blue-100x100.png" style="height: 100%;"></td></tr></table>
148 <table><tr><td><div><img id="img-75-nested" src="resources/square-blue-100x100.png" style="height: 75%;"></div></td></tr></table>
149 <table><tr><td><div><img id="img-100-nested" src="resources/square-blue-100x100.png" style="height: 100%;"></div></td></tr></table>
151 <table><tr><td><object id="object-75" style="background-color: #00ff00; height: 75%;"></object></td></tr></table>
152 <table><tr><td><object id="object-100" style="background-color: #00ff00; height: 100%;"></object></td></tr></table>
154 <table><tr><td><button id="button-75" style="height: 75%;">Button</button></td></tr></table>
155 <table><tr><td><button id="button-100" style="height: 100%;">Button</button></td></tr></table>
157 <table><tr><td><input type="button" id="input-button-75" style="height: 75%;" value="Input"></td></tr></table>
158 <table><tr><td><input type="button" id="input-button-100" style="height: 100%;" value="Input"></td></tr></table>
160 <table><tr><td><input type="checkbox" id="input-checkbox-75" style="height: 75%;"></td></tr></table>
161 <table><tr><td><input type="checkbox" id="input-checkbox-100" style="height: 100%;"></td></tr></table>
163 <table><tr><td><input type="file" id="input-file-75" style="height: 75%;"></td></tr></table>
164 <table><tr><td><input type="file" id="input-file-100" style="height: 100%;"></td></tr></table>
166 <table><tr><td><input type="image" src="resources/square-blue-100x100.png" id="input-image-75" style="height: 75%;"></td></tr></table>
167 <table><tr><td><input type="image" src="resources/square-blue-100x100.png" id="input-image-100" style="height: 100%;"></td></tr></table>
169 <table><tr><td><input type="radio" id="input-radio-75" style="height: 75%;"></td></tr></table>
170 <table><tr><td><input type="radio" id="input-radio-100" style="height: 100%;"></td></tr></table>
172 <table><tr><td><input type="reset" id="input-reset-75" style="height: 75%;"></td></tr></table>
173 <table><tr><td><input type="reset" id="input-reset-100" style="height: 100%;"></td></tr></table>
175 <table><tr><td><input type="submit" id="input-submit-75" style="height: 75%;"></td></tr></table>
176 <table><tr><td><input type="submit" id="input-submit-100" style="height: 100%;"></td></tr></table>
178 <table><tr><td><select id="select-75" style="height: 75%;"><option>Option</option></select></td></tr></table>
179 <table><tr><td><select id="select-100" style="height: 100%;"><option>Option</option></select></td></tr></table>
181 <p id="description"></p>
182 <div id="console"></div>
183 </body>
184 </html>