computed-style.html | Explore in Territory

<html>
<head>
<title>This tests computed style values from animation properties</title>
<style type="text/css" media="screen">
    #test1 {
        width: 20px;
        height: 20px;
        background-color: blue;
        position: relative;
        animation-name: anim1;
        animation-duration: 10s;
        animation-fill-mode: backwards;
        animation-iteration-count: 10;
        animation-timing-function: linear;
        animation-direction: normal;
    }
    #test2 {
        width: 20px;
        height: 20px;
        background-color: blue;
        position: relative;
        animation-name: anim2, anim3;
        animation-duration: 5s, 2500ms;
        animation-fill-mode: forwards, both;
        animation-iteration-count: 10, infinite;
        animation-timing-function: linear, ease-in-out;
        animation-direction: normal, alternate;
    }
    #test3 {
        width: 20px;
        height: 20px;
        background-color: blue;
        position: relative;
        animation-name: anim1, anim2, anim3;
        animation-duration: 5s;
        animation-timing-function: step-start, step-end, steps(5, end);
    }
    @keyframes anim1 {
        from { left: 10px; }
        to { left: 20px; }
    }
    @keyframes anim2 {
        from { width: 20px; }
        to { width: 25px; }
    }
    @keyframes anim3 {
        from { left: 10px; }
        to { left: 20px; }
    }
</style>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
</head>
<body>
<p id="test1"></p>
<p id="test2"></p>
<p id="test3"></p>
<script>
setup({single_test: true});

var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");

var test1Style = window.getComputedStyle(test1);
var test2Style = window.getComputedStyle(test2);
var test3Style = window.getComputedStyle(test3);

assert_equals(test1Style.animationName, "anim1");
assert_equals(test2Style.animationName, "anim2, anim3");
assert_equals(test3Style.animationName, "anim1, anim2, anim3");

assert_equals(test1Style.animationDuration, "10s");
assert_equals(test2Style.animationDuration, "5s, 2.5s");

assert_equals(test1Style.animationFillMode, "backwards");
assert_equals(test2Style.animationFillMode, "forwards, both");

assert_equals(test1Style.animationIterationCount, "10");
assert_equals(test2Style.animationIterationCount, "10, infinite");

assert_equals(test1Style.animationTimingFunction, "linear");
assert_equals(test2Style.animationTimingFunction, "linear, ease-in-out");
assert_equals(test3Style.animationTimingFunction, "steps(1, start), steps(1), steps(5)");

assert_equals(test1Style.animationDirection, "normal");
assert_equals(test2Style.animationDirection, "normal, alternate");

done();

</script>
</body>
</html>
chromium/third_party/blink/web_tests/animations/computed-style.html
