blob: 6941a6b581e03cb427c73a2e02d9ce3a492a485b [file] [log] [blame]
<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test-pre.js"></script>
<div id="testDiv"></div>
<script>
description("Tests that using angle, time and frequency units in calc() is working as intended.");
var testDiv = document.getElementById("testDiv");
// Angle units.
evalAndLog("testDiv.style['-webkit-filter'] = 'hue-rotate(calc(300deg/2))'");
shouldBeEqualToString("testDiv.style['-webkit-filter']", "hue-rotate(calc(150deg))");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('-webkit-filter')", "hue-rotate(150deg)");
evalAndLog("testDiv.style['-webkit-filter'] = 'hue-rotate(calc(300rad/2))'");
shouldBeEqualToString("testDiv.style['-webkit-filter']", "hue-rotate(calc(8594.366927deg))");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('-webkit-filter')", "hue-rotate(8594.366927deg)");
evalAndLog("testDiv.style['-webkit-filter'] = 'hue-rotate(calc(300grad/2))'");
shouldBeEqualToString("testDiv.style['-webkit-filter']", "hue-rotate(calc(135deg))");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('-webkit-filter')", "hue-rotate(135deg)");
evalAndLog("testDiv.style['-webkit-filter'] = 'hue-rotate(calc(3turn/2))'");
shouldBeEqualToString("testDiv.style['-webkit-filter']", "hue-rotate(calc(540deg))");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('-webkit-filter')", "hue-rotate(540deg)");
evalAndLog("testDiv.style['-webkit-filter'] = 'hue-rotate(calc(1turn + 10deg))'");
shouldBeEqualToString("testDiv.style['-webkit-filter']", "hue-rotate(calc(370deg))");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('-webkit-filter')", "hue-rotate(370deg)");
evalAndLog("testDiv.style['-webkit-filter'] = 'hue-rotate(calc(300deg + 30deg))'");
shouldBeEqualToString("testDiv.style['-webkit-filter']", "hue-rotate(calc(330deg))");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('-webkit-filter')", "hue-rotate(330deg)");
evalAndLog("testDiv.style['-webkit-filter'] = 'hue-rotate(calc(2turn + 1turn))'");
shouldBeEqualToString("testDiv.style['-webkit-filter']", "hue-rotate(calc(1080deg))");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('-webkit-filter')", "hue-rotate(1080deg)");
// Time units.
evalAndLog("testDiv.style['transition-delay'] = 'calc(300ms/2)'");
shouldBeEqualToString("testDiv.style['transition-delay']", "calc(150ms)");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('transition-delay')", "0.15s");
evalAndLog("testDiv.style['transition-delay'] = 'calc(300s/2)'");
shouldBeEqualToString("testDiv.style['transition-delay']", "calc(150000ms)");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('transition-delay')", "150s");
evalAndLog("testDiv.style['transition-delay'] = 'calc(10s + 100ms)'");
shouldBeEqualToString("testDiv.style['transition-delay']", "calc(10100ms)");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('transition-delay')", "10.1s");
evalAndLog("testDiv.style['transition-delay'] = 'calc(100ms + 10s)'");
shouldBeEqualToString("testDiv.style['transition-delay']", "calc(10100ms)");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('transition-delay')", "10.1s");
evalAndLog("testDiv.style['transition-delay'] = 'calc(4s + 1s)'");
shouldBeEqualToString("testDiv.style['transition-delay']", "calc(5000ms)");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('transition-delay')", "5s");
evalAndLog("testDiv.style['transition-delay'] = 'calc(4ms + 1ms)'");
shouldBeEqualToString("testDiv.style['transition-delay']", "calc(5ms)");
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('transition-delay')", "0.005s");
// Frequency units.
// NOTE: Since there is no CSS property that uses frequency at the moment we only test the parsing.
evalAndLog("testDiv.style['width'] = 'calc(300Hz/2)'");
shouldBeEqualToString("testDiv.style['width']", "");
evalAndLog("testDiv.style['width'] = 'calc(300kHz/2)'");
shouldBeEqualToString("testDiv.style['width']", "");
evalAndLog("testDiv.style['width'] = 'calc(10Hz + 20Hz)'");
shouldBeEqualToString("testDiv.style['width']", "");
evalAndLog("testDiv.style['width'] = 'calc(10kHz + 20kHz)'");
shouldBeEqualToString("testDiv.style['width']", "");
evalAndLog("testDiv.style['width'] = 'calc(10kHz + 200Hz)'");
shouldBeEqualToString("testDiv.style['width']", "");
evalAndLog("testDiv.style['width'] = 'calc(200Hz + 10kHz)'");
shouldBeEqualToString("testDiv.style['width']", "");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>