chromium/third_party/blink/web_tests/shadow-dom/offsetParent.html

<!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>