<!DOCTYPE html>
<style>
#child {
    width: 50px;
    height: 50px;
    background: red;
    border: 1px solid red;
}

.animate {
    animation: flash 0.2s infinite;
}

@keyframes flash {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
</style>
<div id="container">
    <div id="child"></div>
</div>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>
var test = async_test("Canceling an animation should not leave dirty bits on display none elements");

var child = document.getElementById("child");
var container = document.getElementById("container");

child.addEventListener("animationstart", test.step_func_done(() => {
    container.style.display = "none";
    child.style.borderWidth = "10px";
    assert_equals(getComputedStyle(child).borderWidth, "10px");
    child.style.borderWidth = "5px";
    assert_equals(getComputedStyle(child).borderWidth, "5px");
}));

child.classList.add("animate");
</script>