transition-on-shadow-host-createshadowroot.html

<!DOCTYPE html>

<style>
#target {
    float: left;
    opacity: 1;
    margin: 10px;
    background-color: green;
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

#target.fade {
    opacity: 0;
}
</style>

<script src="../../../animations/resources/animation-test-helpers.js"></script>

<script>
const expectedValues = [
      // [time, element-id, property, expected-value, tolerance]
      [0.5, 'target', 'opacity', 0.5, 0.1],
      [0.5, 'target', 'width', 100, 0],
];

function setupTest() {
    var target = document.getElementById('target');
    var root = target.attachShadow({mode: 'open'});
    root.innerHTML = "<div style='height: 100px; width: 100px;'><content></content></div>";
    target.classList.add('fade');
}

runTransitionTest(expectedValues, setupTest);
</script>

<div id="target">
    <div>Content</div>
    Inside the light dom.
</div>

<div id="result"></div>

chromium/third_party/blink/web_tests/fast/dom/shadow/transition-on-shadow-host-createshadowroot.html