<!DOCTYPE html>
<script src='../../../resources/testharness.js'></script>
<script src='../../../resources/testharnessreport.js'></script>
<body>
<style>
#container {
position: relative;
}
#host {
width: 200px;
height: 200px;
border:10px solid black;
}
#shadowContainer {
width: 120px;
height: 120px;
border: 10px solid gray;
position: relative;
}
#lightdom {
width: 100px;
height: 100px;
background: green;
}
</style>
<div id="container" style="position: relative;"></div>
<script>
test(_ => {
let container = document.querySelector('#container');
let host = document.createElement('div');
host.setAttribute("id", "host");
container.appendChild(host);
let child = document.createElement('div');
host.appendChild(child);
child.setAttribute("id", "lightdom");
child.innerText = "author light dom";
let shadow = host.attachShadow({mode: 'open'});
shadow.innerHTML =
'<div id="shadowContainer"><slot></slot></div>';
assert_equals(child.offsetParent, document.querySelector("#container"),
"offsetParent gets remapped to light DOM");
shadow.querySelector("#shadowContainer").style.position = "static";
assert_equals(child.offsetParent, document.querySelector("#container"),
"offsetParent works through shadow DOM to light dom");
host.remove();
}, "offsetParent works in author ShadowDOM");
test(_ => {
// TODO crbug.com/1179356 reenable this test when done.
return;
assert_true(window.internals != null, 'This test requires window.internals to manipulate user agent Shadow DOM.');
// Test that when the offsetParent is in user agent Shadow DOM, it is
// not exposed to script, but its shadow host or the host's ancestor
// which is appropriate as an offsetParent is returned.
let container = document.querySelector('#container');
let host = document.createElement('div');
container.appendChild(host);
host.setAttribute('open', 'open');
host.setAttribute("id", "host");
let child = document.createElement('div');
host.appendChild(child);
child.setAttribute("id", "lightdom");
child.innerText = "user agent light dom";
let shadow = internals.createUserAgentShadowRoot(host);
shadow.innerHTML = '<div id="shadowContainer"><slot></slot></div>';
assert_equals(child.offsetParent, document.querySelector("#container"),
"offsetParent gets remapped to light DOM");
shadow.querySelector("#shadowContainer").style.position = "static";
assert_equals(child.offsetParent, document.querySelector("#container"),
"offsetParent works through shadow DOM to light dom");
// If host is not removed, Chrome DHECKs.
// host.remove();
}, "offsetParent works in user agent ShadowDOM");
</script>
Codebase Browser
chromium