<!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=false ] -->
<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>