border-width-percent.html | Explore in Territory

<!doctype html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<p>This tests the border width property with percent values for HTML elements.</p>
<div id="console"></div>
<script>
function elementBorderWidth(element, borderValue, style)
{
    var element = document.createElement(element);
    if (borderValue !== undefined)
        element.setAttribute("border", borderValue);
    element.setAttribute("style", style);
    element.setAttribute("width", "0");
    document.body.appendChild(element);
    var borderBoxWidth = element.offsetWidth;
    document.body.removeChild(element);
    return borderBoxWidth / 2;
}

function inputElementBorderWidth(elementType, borderValue, style)
{
    var inputElement = document.createElement("input");
    inputElement.setAttribute("type", elementType);
    if (borderValue != undefined)
        inputElement.setAttribute("border", borderValue);
    inputElement.setAttribute("style", style);
    inputElement.setAttribute("width", "0");
    document.body.appendChild(inputElement);
    var borderBoxWidth = inputElement.offsetWidth;
    document.body.removeChild(inputElement);
    return borderBoxWidth / 2;
}

shouldBe("elementBorderWidth('img', '10%')", "10");
shouldBe("elementBorderWidth('img', '-10%')", "0");
shouldBe("elementBorderWidth('img', ' +10%')", "10");

shouldBe("elementBorderWidth('img', 0, 'border-width: 10%')", "0");
shouldBe("elementBorderWidth('img', 0, 'border-width: -10%')", "0");

shouldBe("elementBorderWidth('object', '10%')", "10");
shouldBe("elementBorderWidth('object', '-10%')", "0");
shouldBe("elementBorderWidth('object', ' +10%')", "10");

shouldBe("elementBorderWidth('object', 0, 'border-width: 10%')", "0");
shouldBe("elementBorderWidth('object', 0, 'border-width: -10%')", "0");

shouldBe("inputElementBorderWidth('image', '10%')", "10");
shouldBe("inputElementBorderWidth('image', '-10%')", "0");
shouldBe("inputElementBorderWidth('image', ' +10%')", "10");

shouldBe("inputElementBorderWidth('image', 0, 'border-width: 10%')", "0");
shouldBe("inputElementBorderWidth('image', 0, 'border-width: -10%')", "0");
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/borders/border-width-percent.html
