Bug 113230 – CSS properties with <time> parameters may not use unitless 0

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: CSS

[Robert McKee]

According to the CSS 3 specification, you may not use a unitless 0 for parameters that take a <time>, and the current webkit engine incorrectly parses unitless 0 parameters.

Running the following script:
<script>
        $(function () {
            $('body').append('<div>').attr('id', 'results');
            var tests = ["unset - garbage 1s 1s 1s", "0", "1s",
                "0 0", "0 1s", "1s 0", "1s 1s",
                "0 0 0", "0 0 1s", "0 1s 0", "0 1s 1s", "1s 0 0", "1s 0 1s", "1s 1s 0", "1s 1s 1s"];

            tests.forEach(function(test) {
                var div = $('<div>').css('animation-duration', '2s').css('animation-delay', '3s').css('animation-iteration-count', 4).css("animation", test);
                $('#results').append("<br />Test: " + test + " ");
                if (div.css('animation-duration') == '2s') {
                    $('#results').append('INVALID<br/>');
                } else {
                    $('#results').append('VALID<br/>');
                    var styleProps = ["animation", "animation-duration", "animation-delay", "animation-iteration-count"];
                    styleProps.forEach(function(prop) {
                        $('#results').append(prop + ':' + div.css(prop) + '<br />');
                    });
                }
            });
        });
    </script>
Should yield the following:
Test: unset - garbage 1s 1s 1s INVALID

Test: 0 VALID
animation:0s ease 0s normal none 0 none
animation-duration:0s
animation-delay:0s
animation-iteration-count:0

Test: 1s VALID
animation:1s ease 0s normal none 1 none
animation-duration:1s
animation-delay:0s
animation-iteration-count:1

Test: 0 0 INVALID

Test: 0 1s VALID
animation:1s ease 0s normal none 0 none
animation-duration:1s
animation-delay:0s
animation-iteration-count:0

Test: 1s 0 VALID
animation:1s ease 0s normal none 0 none
animation-duration:1s
animation-delay:0s
animation-iteration-count:0

Test: 1s 1s VALID
animation:1s ease 1s normal none 1 none
animation-duration:1s
animation-delay:1s
animation-iteration-count:1

Test: 0 0 0 INVALID

Test: 0 0 1s INVALID

Test: 0 1s 0 INVALID

Test: 0 1s 1s VALID
animation:1s ease 1s normal none 0 none
animation-duration:1s
animation-delay:1s
animation-iteration-count:0

Test: 1s 0 0 INVALID

Test: 1s 0 1s VALID
animation:1s ease 1s normal none 0 none
animation-duration:1s
animation-delay:1s
animation-iteration-count:0

Test: 1s 1s 0 VALID
animation:1s ease 1s normal none 0 none
animation-duration:1s
animation-delay:1s
animation-iteration-count:0

Test: 1s 1s 1s INVALID
However, it is giving the following result:
Test: unset - garbage 1s 1s 1s INVALID

Test: 0 VALID
animation:0ms
animation-duration:0ms
animation-delay:initial
animation-iteration-count:initial

Test: 1s VALID
animation:1s
animation-duration:1s
animation-delay:initial
animation-iteration-count:initial

Test: 0 0 VALID
animation:0ms 0ms
animation-duration:0ms
animation-delay:0ms
animation-iteration-count:initial

Test: 0 1s VALID
animation:0ms 1s
animation-duration:0ms
animation-delay:1s
animation-iteration-count:initial

Test: 1s 0 VALID
animation:1s 0ms
animation-duration:1s
animation-delay:0ms
animation-iteration-count:initial

Test: 1s 1s VALID
animation:1s 1s
animation-duration:1s
animation-delay:1s
animation-iteration-count:initial

Test: 0 0 0 VALID
animation:0ms 0ms 0
animation-duration:0ms
animation-delay:0ms
animation-iteration-count:0

Test: 0 0 1s INVALID

Test: 0 1s 0 VALID
animation:0ms 1s 0
animation-duration:0ms
animation-delay:1s
animation-iteration-count:0

Test: 0 1s 1s INVALID

Test: 1s 0 0 VALID
animation:1s 0ms 0
animation-duration:1s
animation-delay:0ms
animation-iteration-count:0

Test: 1s 0 1s INVALID

Test: 1s 1s 0 VALID
animation:1s 1s 0
animation-duration:1s
animation-delay:1s
animation-iteration-count:0

Test: 1s 1s 1s INVALID

[Eric Willigers]

Web Platform Tests
https://wpt.fyi/results/css/css-animations/parsing/animation-delay-invalid.html
https://wpt.fyi/results/css/css-animations/parsing/animation-duration-invalid.html
https://wpt.fyi/results/css/css-transitions/parsing/transition-delay-invalid.html

Microsoft reports a use count near 0%
https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/css/animation-delay/
https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/css/animation-duration/
https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/css/transition-duration/

[Brent Fulgham]

Safari 15+ handles these cases properly.