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 getWidth(id)
  28 {
  29     return getComputedStyleForElement(document.getElementById(id), 'width');
  30 }
  31
  32 function getHeight(id)
  33 {
  34     return getComputedStyleForElement(document.getElementById(id), 'height');
  35 }
  36
  37 function parsePixelValue(str)
  38 {
  39     if (typeof str != "string" || str.length < 3 || str.substr(str.length - 2) != "px") {
  40         testFailed(str + " is unparsable.");
  41         return -1;
  42     }
  43     return parseFloat(str);
  44 }
  45
  46 function is75PercentOf(expression75, expression100)
  47 {
  48     var str75 = eval(expression75);
  49     var str100 = eval(expression100);
  50     var num75 = parsePixelValue(str75);
  51     var num100 = parsePixelValue(str100);
  52     if (num75 < 0 || num100 < 0)
  53         return;
  54     if (num75 == Math.floor(num100 * 75 / 100))
  55         testPassed(expression75 + " is 75% of " + expression100 + ".");
  56     else
  57         testFailed(expression75 + " [" + str75 + "] is not 75% of " + expression100 + " [" + str100 + "].");
  58 }
  59
  60 function test()
  61 {
  62     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
  64     shouldBe("getWidth('canvas-75')", "'224px'");
  65     shouldBe("getHeight('canvas-75')", "'112px'");
  66     shouldBe("getWidth('canvas-100')", "'300px'");
  67     shouldBe("getHeight('canvas-100')", "'150px'");
  68
  69     shouldBe("getWidth('embed-75')", "'300px'");
  70     shouldBe("getHeight('embed-75')", "'112px'");
  71     shouldBe("getWidth('embed-100')", "'300px'");
  72     shouldBe("getHeight('embed-100')", "'150px'");
  73
  74     shouldBe("getWidth('img-75')", "'75px'");
  75     shouldBe("getHeight('img-75')", "'75px'");
  76     shouldBe("getWidth('img-100')", "'100px'");
  77     shouldBe("getHeight('img-100')", "'100px'");
  78
  79     shouldBe("getWidth('img-75-nested')", "'75px'");
  80     shouldBe("getHeight('img-75-nested')", "'75px'");
  81     shouldBe("getWidth('img-100-nested')", "'100px'");
  82     shouldBe("getHeight('img-100-nested')", "'100px'");
  83
  84     shouldBe("getWidth('object-75')", "'300px'");
  85     shouldBe("getHeight('object-75')", "'112px'");
  86     shouldBe("getWidth('object-100')", "'300px'");
  87     shouldBe("getHeight('object-100')", "'150px'");
  88
  89     shouldBe("getWidth('button-75')", "getWidth('button-100')");
  90     shouldBeTrue("getHeight('button-75') != '0px'");
  91     shouldBe("getHeight('button-75')", "getHeight('button-100')");
  92
  93     shouldBe("getWidth('input-button-75')", "getWidth('input-button-100')");
  94     shouldBeTrue("getHeight('input-button-75') != '0px'");
  95     shouldBe("getHeight('input-button-75')", "getHeight('input-button-100')");
  96
  97     shouldBe("getWidth('input-checkbox-75')", "getWidth('input-checkbox-100')");
  98     shouldBeTrue("getHeight('input-checkbox-75') != '0px'");
  99     // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
 100     is75PercentOf("getHeight('input-checkbox-75')", "getHeight('input-checkbox-100')");
 101
 102     shouldBe("getWidth('input-file-75')", "getWidth('input-file-100')");
 103     shouldBeTrue("getHeight('input-file-75') != '0px'");
 104     // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
 105     is75PercentOf("getHeight('input-file-75')", "getHeight('input-file-100')");
 106
 107     // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
 108     shouldBe("getWidth('input-image-75')", "'75px'");
 109     shouldBe("getHeight('input-image-75')", "'75px'");
 110     shouldBe("getWidth('input-image-100')", "'100px'");
 111     shouldBe("getHeight('input-image-100')", "'100px'");
 112
 113     shouldBe("getWidth('input-radio-75')", "getWidth('input-radio-100')");
 114     shouldBeTrue("getHeight('input-radio-75') != '0px'");
 115     // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.
 116     is75PercentOf("getHeight('input-radio-75')", "getHeight('input-radio-100')");
 117
 118     shouldBe("getWidth('input-reset-75')", "getWidth('input-reset-100')");
 119     shouldBeTrue("getHeight('input-reset-75') != '0px'");
 120     shouldBe("getHeight('input-reset-75')", "getHeight('input-reset-100')");
 121
 122     shouldBe("getWidth('input-submit-75')", "getWidth('input-submit-100')");
 123     shouldBeTrue("getHeight('input-submit-75') != '0px'");
 124     shouldBe("getHeight('input-submit-75')", "getHeight('input-submit-100')");
 125
 126     shouldBe("getWidth('select-75')", "getWidth('select-100')");
 127     shouldBeTrue("getHeight('select-75') != '0px'");
 128     shouldBe("getHeight('select-75')", "getHeight('select-100')");
 129
 130     isSuccessfullyParsed();
 131
 132     if (window.layoutTestController) {
 133         layoutTestController.notifyDone();
 134     }
 135 }
 136
 137 var successfullyParsed = true;
 138 </script>
 139 </head>
 140 <body onload="test()">
 141
 142 <table><tr><td><canvas id="canvas-75" style="background-color: #00ff00; height: 75%;"></canvas></td></tr></table>
 143 <table><tr><td><canvas id="canvas-100" style="background-color: #00ff00; height: 100%;"></canvas></td></tr></table>
 144
 145 <table><tr><td><embed id="embed-75" style="background-color: #00ff00; height: 75%;"></embed></td></tr></table>
 146 <table><tr><td><embed id="embed-100" style="background-color: #00ff00; height: 100%;"></embed></td></tr></table>
 147
 148 <table><tr><td><img id="img-75" src="resources/square-blue-100x100.png" style="height: 75%;"></td></tr></table>
 149 <table><tr><td><img id="img-100" src="resources/square-blue-100x100.png" style="height: 100%;"></td></tr></table>
 150
 151 <table><tr><td><div><img id="img-75-nested" src="resources/square-blue-100x100.png" style="height: 75%;"></div></td></tr></table>
 152 <table><tr><td><div><img id="img-100-nested" src="resources/square-blue-100x100.png" style="height: 100%;"></div></td></tr></table>
 153
 154 <table><tr><td><object id="object-75" style="background-color: #00ff00; height: 75%;"></object></td></tr></table>
 155 <table><tr><td><object id="object-100" style="background-color: #00ff00; height: 100%;"></object></td></tr></table>
 156
 157 <table><tr><td><button id="button-75" style="height: 75%;">Button</button></td></tr></table>
 158 <table><tr><td><button id="button-100" style="height: 100%;">Button</button></td></tr></table>
 159
 160 <table><tr><td><input type="button" id="input-button-75" style="height: 75%;"></td></tr></table>
 161 <table><tr><td><input type="button" id="input-button-100" style="height: 100%;"></td></tr></table>
 162
 163 <table><tr><td><input type="checkbox" id="input-checkbox-75" style="height: 75%;"></td></tr></table>
 164 <table><tr><td><input type="checkbox" id="input-checkbox-100" style="height: 100%;"></td></tr></table>
 165
 166 <table><tr><td><input type="file" id="input-file-75" style="height: 75%;"></td></tr></table>
 167 <table><tr><td><input type="file" id="input-file-100" style="height: 100%;"></td></tr></table>
 168
 169 <table><tr><td><input type="image" src="resources/square-blue-100x100.png" id="input-image-75" style="height: 75%;"></td></tr></table>
 170 <table><tr><td><input type="image" src="resources/square-blue-100x100.png" id="input-image-100" style="height: 100%;"></td></tr></table>
 171
 172 <table><tr><td><input type="radio" id="input-radio-75" style="height: 75%;"></td></tr></table>
 173 <table><tr><td><input type="radio" id="input-radio-100" style="height: 100%;"></td></tr></table>
 174
 175 <table><tr><td><input type="reset" id="input-reset-75" style="height: 75%;"></td></tr></table>
 176 <table><tr><td><input type="reset" id="input-reset-100" style="height: 100%;"></td></tr></table>
 177
 178 <table><tr><td><input type="submit" id="input-submit-75" style="height: 75%;"></td></tr></table>
 179 <table><tr><td><input type="submit" id="input-submit-100" style="height: 100%;"></td></tr></table>
 180
 181 <table><tr><td><select id="select-75" style="height: 75%;"><option>Option</option></select></td></tr></table>
 182 <table><tr><td><select id="select-100" style="height: 100%;"><option>Option</option></select></td></tr></table>
 183
 184 <p id="description"></p>
 185 <div id="console"></div>
 186 </body>
 187 </html>