animation-duration-computed.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 10 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-animations/parsing/animation-duration-computed.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Animations: getComputedStyle().animationDuration</title>

<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-duration">

<meta name="assert" content="animation-duration converts to seconds.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/css/support/computed-testcommon.js"></script>

<style>

  #container {

    container-type: inline-size;

    width: 100px;

</style>

</head>

<body>

<div id="container">

  <div id="target"></div>

</div>

<script>

test_computed_value("animation-duration", "500ms", "0.5s");

test_computed_value("animation-duration", "calc(2 * 3s)", "6s");

test_computed_value("animation-duration", 'calc(10s + (sign(2cqw - 10px) * 5s))', '5s');

test_computed_value("animation-duration", "20s, 10s");

// https://github.com/w3c/csswg-drafts/issues/6530

test_computed_value("animation-duration", "auto", "0s");

test_computed_value("animation-duration", "auto, auto", "0s, 0s");

// Test that the resolved value of the specified animation-duration

// is as expected given some value for animation-timeline.

function test_auto_duration(duration, timeline, expected) {

  test((t) => {

    t.add_cleanup(() => {

      target.style = "";

});

    target.style.animationDuration = duration;

    target.style.animationTimeline = timeline;

    assert_equals(expected, getComputedStyle(target).animationDuration);

  }, `Resolved value of animation-duration:${duration} with animation-timeline:${timeline}`);

test_auto_duration("auto", "auto", "0s");

test_auto_duration("auto", "auto, auto", "auto");

test_auto_duration("auto", "--t", "auto");

test_auto_duration("auto", "--t, --t2", "auto");

test_auto_duration("auto", "none", "auto");

test_auto_duration("auto", "scroll()", "auto");

test_auto_duration("auto", "view()", "auto");

test_auto_duration("0s", "auto", "0s");

test_auto_duration("0s", "auto, auto", "0s");

</script>

</body>

</html>