<!doctype html>
<html>
<head>
<script src="resources/polyfill.js"></script>
<style>
.box {
    height: 100px;
    width: 100px;
    margin: 10px;
    background-color: gray;
}

#box {
    opacity: 1;
    -webkit-transition: opacity 1s linear;
}
    
#box.fade {
    opacity: 0;
}
</style>
<script src="../../../transitions/resources/transition-test-helpers.js"></script>
<script>
const expectedValues = [
      // [time, element-id, property, expected-value, tolerance]
      [0.5, 'box', 'opacity', 0.5, 0.1],
];
  
function setupTest() {
    var box = document.getElementById('box');
    var shadowRoot = box.webkitCreateShadowRoot();
    shadowRoot.innerHTML = '<content select="*:first-child"></content>';
    setTimeout(function() {
        shadowRoot.querySelector("content").setAttribute("select", "*:last-child");
        box.className = 'box fade';
    }, 0);
}

runTransitionTest(expectedValues, setupTest, usePauseAPI);
</script>
</head>
<body>
    <!-- Test for [bug 93755] ShadowRoot insertion point change aborts css transition, https://bugs.webkit.org/show_bug.cgi?id=93755 -->
    <!-- If this test pass, css transition will be started and -->
    <!-- the css transition will be paused by using pauseTransitionAtTimeOnElement. -->
    <div id="box" class="box" style="background: green;">
        <div>Content</div>
        <div>New Content</div>
    </div>

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