calc-numbers.html | Explore in Territory

<!DOCTYPE HTML>
<style>
.int {
    tab-size: calc(2 * 4);
}
.int-non-neg-clamp {
    tab-size: 12345;
    tab-size: calc(2 * -4);
}
.float {
    opacity: calc(2 / 4);
}
.float-round {
    position: absolute;
    z-index: 12345;
    z-index: calc(2 / 4);
}
.px-invalid {
    opacity: 0.9;
    opacity: calc((2 / 4) * 1px);
}
.num-length-invalid {
    tab-size: 12345;
    tab-size: calc(1 + 1px);
    tab-size: calc(1 + 100%);
    tab-size: calc(100%);
    tab-size: calc(10px) bla;
    tab-size: calc(bla) 10px;
}
.px-valid {
    tab-size: calc(10px);
}
</style>
<div class="default int"></div>
<div class="default int-non-neg-clamp"></div>
<div class="default float"></div>
<div class="default float-round"></div>
<div class="default px-invalid"></div>
<div class="default num-length-invalid"></div>
<div class="default px-valid"></div>
<script src="../../resources/js-test.js"></script>
<script>
if (window.testRunner)
    testRunner.dumpAsText();

function getComputedValue(selector, property) {
    return getComputedStyle(document.querySelector(selector))[property];
}

shouldBe('getComputedValue(".int", "tabSize")', '"8"');
shouldBe('getComputedValue(".int-non-neg-clamp", "tabSize")', '"0"');
shouldBeCloseTo('Number(getComputedValue(".float", "opacity"))', 0.5, .0001);
shouldBe('getComputedValue(".float-round", "zIndex")', '"1"');
shouldBeCloseTo('Number(getComputedValue(".px-invalid", "opacity"))', 0.9, .0001);
shouldBe('getComputedValue(".num-length-invalid", "tabSize")', '"12345"');
shouldBe('getComputedValue(".px-valid", "tabSize")', '"10px"');
</script>
chromium/third_party/blink/web_tests/css3/calc/calc-numbers.html
