blob: a5c7d9a71124e65881a80d586ec2e92cb55d0167 [file] [log] [blame]
<!DOCTYPE html>
<body>
<script src="../../resources/js-test-pre.js"></script>
<div id="testDiv" style="position: absolute;"></div>
<pre id="testPre"><pre>
<script>
description("Tests that negative calc() values are properly clamped when needed.");
var testDiv = document.getElementById("testDiv");
var testPre = document.getElementById("testPre");
shouldBeEmptyString("testDiv.style['width']");
evalAndLog("testDiv.style['width'] = '100px'");
evalAndLog("testDiv.style['width'] = 'calc(5px - 10px)'");
shouldBeEqualToString("testDiv.style['width']", "calc(-5px)");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('width')", "0px");
evalAndLog("testDiv.style['width'] = '100px'");
evalAndLog("testDiv.style['width'] = 'calc(10% - 100px)'");
shouldBeEqualToString("testDiv.style['width']", "calc(10% - 100px)");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('width')", "0px");
evalAndLog("testDiv.style['line-height'] = '10%'");
evalAndLog("testDiv.style['line-height'] = 'calc(10% - 20%)'");
shouldBeEqualToString("testDiv.style['line-height']", "calc(-10%)");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('line-height')", "0px");
evalAndLog("testPre.style['tab-size'] = '8'");
evalAndLog("testPre.style['tab-size'] = 'calc(2 - 4)'");
shouldBeEqualToString("testPre.style['tab-size']", "calc(-2)");
shouldBeEqualToString("window.getComputedStyle(testPre).getPropertyValue('tab-size')", "0");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>