event-pseudo.html | Explore in Territory

<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
#content { background-color:green; width:40px; height:40px; }
</style>
<div id="container">
    <div id="host"><canvas id="content"></canvas></div>
</div>
<script>
setup({ explicit_done: true });

var host = document.getElementById("host");
var root = host.attachShadow({mode: 'open'});
root.innerHTML = "<style>"
    + "#distribute::before { background-color:red; content:''; display:inline-block; width:40px; height:40px; transition:opacity .1s; }"
    + "#distribute.checked::before { opacity:0; }"
    + "</style><div id=distribute><content></content></div>";
var distribute = root.querySelector("#distribute");
distribute.addEventListener("transitionend", function (e) {
    test(function () {
        assert_equals(e.target.id, "distribute");
    }, "transitionend in Shadow DOM raised without ASSERT failures");

    if (window.testRunner)
        container.style.display = "none";
    done();
});

window.onload = function () {
    distribute.className = "checked";
};

</script>
chromium/third_party/blink/web_tests/fast/dom/shadow/event-pseudo.html
