Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<style>
section {
position: relative;
}
#item {
position: absolute;
inset: 0;
}
#section1 {
width: 200px;
height: 200px;
}
#section2 {
width: 300px;
height: 300px;
}
</style>
<section id="section1">
<div id="item">
<template shadowRootMode="open">
<style>
div {
position: absolute;
inset: 0;
background-color: var(--color, red);
}
</style>
<div></div>
</template>
</div>
</section>
<section id="section2">
</section>
<script>
promise_test(async () => {
const item = document.querySelector("#item");
document.querySelector("#section2").moveBefore(item, null);
await new Promise(resolve => requestAnimationFrame(() => resolve()));
assert_equals(item.shadowRoot.querySelector("div").getBoundingClientRect().width, 300);
});
</script>