third_party/WebKit/LayoutTests/fast/replaced/table-percent-height-text-controls.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 <script src="../../resources/js-test.js"></script>
   5 <script>
   6 if (window.testRunner) {
   7     testRunner.waitUntilDone();
   8     testRunner.dumpAsText();
   9 }
  10
  11 function getComputedStyleForElement(element, cssPropertyName)
  12 {
  13     if (!element)
  14         return null;
  15
  16     if (window.getComputedStyle)
  17         return window.getComputedStyle(element, '').getPropertyValue(cssPropertyName.replace(/([A-Z])/g, "-$1").toLowerCase());
  18
  19     if (element.currentStyle)
  20         return element.currentStyle[cssPropertyName];
  21
  22     return null;
  23 }
  24
  25 function getWidth(id)
  26 {
  27     return getComputedStyleForElement(document.getElementById(id), 'width');
  28 }
  29
  30 function getFullHeight(id)
  31 {
  32     var element = document.getElementById(id);
  33     var h = parseFloat(getComputedStyleForElement(element, 'border-top-width'));
  34     h += parseFloat(getComputedStyleForElement(element, 'padding-top'));
  35     h += parseFloat(getComputedStyleForElement(element, 'height'));
  36     h += parseFloat(getComputedStyleForElement(element, 'padding-bottom'));
  37     h += parseFloat(getComputedStyleForElement(element, 'border-bottom-width'));
  38     return h + 'px';
  39 }
  40
  41 function parsePixelValue(str)
  42 {
  43     if (typeof str != "string" || str.length < 3 || str.substr(str.length - 2) != "px") {
  44         testFailed(str + " is unparsable.");
  45         return -1;
  46     }
  47     return parseFloat(str);
  48 }
  49
  50 function is75PercentOf(expression75, expression100)
  51 {
  52     var str75 = eval(expression75);
  53     var str100 = eval(expression100);
  54     var num75 = parsePixelValue(str75);
  55     var num100 = parsePixelValue(str100);
  56     if (num75 < 0 || num100 < 0)
  57         return;
  58     if (num75 == Math.floor(num100 * 75 / 100))
  59         testPassed(expression75 + " is 75% of " + expression100 + ".");
  60     else
  61         testFailed(expression75 + " [" + str75 + "] is not 75% of " + expression100 + " [" + str100 + "].");
  62 }
  63
  64 function test()
  65 {
  66     description("This test checks that text controls with percentage heights within table cells have the correct height." +
  67         "Text controls are in a different test than other replaced elements because their metrics are platform-specific.");
  68
  69     shouldBe("getWidth('input-password-75')", "getWidth('input-password-100')");
  70     shouldBeTrue("getFullHeight('input-password-75') != '0px'");
  71     // Note: This behavior doesn't match to IE 8, Firefox 3.5 and Opera 10.
  72     is75PercentOf("getFullHeight('input-password-75')", "getFullHeight('input-password-100')");
  73
  74     shouldBe("getWidth('input-text-75')", "getWidth('input-text-100')");
  75     shouldBeTrue("getFullHeight('input-text-75') != '0px'");
  76     // Note: This behavior doesn't match to IE 8, Firefox 3.5 and Opera 10.
  77     is75PercentOf("getFullHeight('input-text-75')", "getFullHeight('input-text-100')");
  78
  79     shouldBe("getWidth('textarea-75')", "getWidth('textarea-100')");
  80     shouldBeTrue("getFullHeight('textarea-75') != '0px'");
  81     // Note: This behavior doesn't match to IE 8, Firefox 3.5 and Opera 10.
  82     is75PercentOf("getFullHeight('textarea-75')", "getFullHeight('textarea-100')");
  83
  84     isSuccessfullyParsed();
  85
  86     if (window.testRunner) {
  87         testRunner.notifyDone();
  88     }
  89 }
  90 </script>
  91 </head>
  92 <body onload="test()">
  93
  94 <table><tr><td><input type="password" id="input-password-75" style="height: 75%;"></td></tr></table>
  95 <table><tr><td><input type="password" id="input-password-100" style="height: 100%;"></td></tr></table>
  96
  97 <table><tr><td><input type="text" id="input-text-75" style="height: 75%;"></td></tr></table>
  98 <table><tr><td><input type="text" id="input-text-100" style="height: 100%;"></td></tr></table>
  99
 100 <table><tr><td><textarea id="textarea-75" style="height: 75%;"></textarea></td></tr></table>
 101 <table><tr><td><textarea id="textarea-100" style="height: 100%;"></textarea></td></tr></table>
 102
 103 <p id="description"></p>
 104 <div id="console"></div>
 105 </body>
 106 </html>