88 lines
5.3 KiB
HTML
88 lines
5.3 KiB
HTML
<!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.366926962348deg))");
|
|
shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('-webkit-filter')", "hue-rotate(8594.366926962348deg)");
|
|
|
|
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>
|