table-percent-height-text-controls.html

<html>
<head>
<title>Test for Buzilla Bug 15359: JPEG image not shown when height is specified as percentage inside a table</title>
<script src="../../resources/js-test.js"></script>
<script>
if (window.testRunner) {
    testRunner.waitUntilDone();
    testRunner.dumpAsText();
}

function getComputedStyleForElement(element, cssPropertyName)
{
    if (!element)
        return null;

    if (window.getComputedStyle)
        return window.getComputedStyle(element, '').getPropertyValue(cssPropertyName.replace(/([A-Z])/g, "-$1").toLowerCase());

    if (element.currentStyle)
        return element.currentStyle[cssPropertyName];

    return null;
}

function getWidth(id)
{
    return getComputedStyleForElement(document.getElementById(id), 'width');
}

function getFullHeight(id)
{
    var element = document.getElementById(id);
    var h = parseFloat(getComputedStyleForElement(element, 'height'));
    return h + 'px';
}

function parsePixelValue(str)
{
    if (typeof str != "string" || str.length < 3 || str.substr(str.length - 2) != "px") {
        testFailed(str + " is unparsable.");
        return -1;
    }
    return parseFloat(str);
}

function test()
{
    description("This test checks that text controls with percentage heights within table cells have the correct height." +
        "Text controls are in a different test than other replaced elements because their metrics are platform-specific." +
        "The reason a 75% control is the same height as a 100% control is because a replaced element that depends on the" +
        "height of its parent cell is treated as auto. So by itself it will set the height of the row. See https://drafts.csswg.org/css-tables-3/#row-layout");

    shouldBe("getWidth('input-password-75')", "getWidth('input-password-100')");
    shouldBeTrue("getFullHeight('input-password-75') != '0px'");
    shouldBe("getFullHeight('input-password-75')", "getFullHeight('input-password-100')");

    shouldBe("getWidth('input-text-75')", "getWidth('input-text-100')");
    shouldBeTrue("getFullHeight('input-text-75') != '0px'");
    shouldBe("getFullHeight('input-text-75')", "getFullHeight('input-text-100')");

    shouldBe("getWidth('textarea-75')", "getWidth('textarea-100')");
    shouldBeTrue("getFullHeight('textarea-75') != '0px'");
    shouldBe("getFullHeight('textarea-75')", "getFullHeight('textarea-100')");

    isSuccessfullyParsed();

    if (window.testRunner) { 
        testRunner.notifyDone();
    }
}
</script>
</head>
<body onload="test()">

<table><tr><td><input type="password" id="input-password-75" style="height: 75%;"></td></tr></table>
<table><tr><td><input type="password" id="input-password-100" style="height: 100%;"></td></tr></table>

<table><tr><td><input type="text" id="input-text-75" style="height: 75%;"></td></tr></table>
<table><tr><td><input type="text" id="input-text-100" style="height: 100%;"></td></tr></table>

<table><tr><td><textarea id="textarea-75" style="height: 75%;"></textarea></td></tr></table>
<table><tr><td><textarea id="textarea-100" style="height: 100%;"></textarea></td></tr></table>

<p id="description"></p>
<div id="console"></div>
</body>
</html>
chromium/third_party/blink/web_tests/fast/replaced/table-percent-height-text-controls.html
