<!DOCTYPE html>
<script src='../resources/testharness.js'></script>
<script src='../resources/testharnessreport.js'></script>
<script src='resources/shadow-dom.js'></script>
<style>
.container { position: relative; }
</style>
<!--
When both the context object and the real offset parent is in the same
node tree, offsetParent doesn't perform any adjustment.
-->
<div id='host_open0'>
<template data-mode='open' data-expose-as='root_open0'>
<div id='container' style='position: relative;'>
<div id='inner_node'>X</div>
</div>
</template>
</div>
<div id='host_closed0'>
<template data-mode='closed' data-expose-as='root_closed0'>
<div id='container' style='position: relative;'>
<div id='inner_node'>X</div>
</div>
</template>
</div>
<script>
test(() => {
convertTemplatesToShadowRootsWithin(host_open0);
let container = root_open0.querySelector('#container');
let inner_node = root_open0.querySelector('#inner_node');
assert_equals(inner_node.offsetParent, container);
}, 'offsetParent should return node in the same node tree in open shadow root.');
test(() => {
convertTemplatesToShadowRootsWithin(host_closed0);
let container = root_closed0.querySelector('#container');
let inner_node = root_closed0.querySelector('#inner_node');
assert_equals(inner_node.offsetParent, container);
}, 'offsetParent should return node in the same node tree in closed shadow root.');
</script>
<!--
Even when the real offsetParent is in a closed shadow tree,
if it is unclosed to the context object, that parent should be returned.
-->
<div id='host_open1'>
<template data-mode='open' data-expose-as='root_open1'>
<div id='inner_host' style='position: relative'>
<template data-mode='closed' data-expose-as='root_closed_inner1'>
<div id='inner_node'>X</div>
</template>
</div>
</template>
</div>
<div id='host_closed1'>
<template data-mode='closed' data-expose-as='root_closed1'>
<div id='inner_host' style='position: relative;'>
<template data-mode='open' data-expose-as='root_open_inner1'>
<div id='inner_node'>X</div>
</template>
</div>
</template>
</div>
<script>
test(() => {
convertTemplatesToShadowRootsWithin(host_open1);
let inner_host = root_open1.querySelector('#inner_host');
let inner_node = root_closed_inner1.querySelector('#inner_node');
assert_equals(inner_node.offsetParent, inner_host);
}, 'offsetParent should return an unclosed node in a open shadow from closed shadow.');
test(() => {
convertTemplatesToShadowRootsWithin(host_closed1);
let inner_host = root_closed1.querySelector('#inner_host');
let inner_node = root_open_inner1.querySelector('#inner_node');
assert_equals(inner_node.offsetParent, inner_host);
}, 'offsetParent should return an unclosed node in a closed shadow from open shadow.');
</script>
<!--
Check if offsetParent can properly traverse up to find unclosed node.
In the following example, #target_closed3 will distributed to slot y,
but its offsetParent should neither return #inner_node nor #inner_host.
-->
<div id='host_closed3' class='container'>
<template data-mode='closed' data-expose-as='root_closed3'>
<div id='inner_host' style='position: relative;'>
<template data-mode='closed' data-expose-as='root_closed_inner3'>
<div id='inner_node' style='position: relative;'>
<slot name='y'></slot>
</div>
</template>
<slot name='x' slot='y'></slot>
</div>
</template>
<span id='target_closed3' slot='x'>X</span>
</div>
<script>
test(() => {
convertTemplatesToShadowRootsWithin(host_closed3);
let slot_y = root_closed_inner3.querySelector('slot[name=y]');
assert_array_equals(slot_y.assignedNodes({flatten: true}), [target_closed3]);
assert_equals(target_closed3.offsetParent.id, 'host_closed3');
}, 'offsetParent should skip any non-unclosed nodes.');
</script>