1 files changed, 107 insertions, 0 deletions
diff --git a/testing/web-platform/tests/shadow-dom/offsetTop-offsetLeft-across-shadow-boundaries.html b/testing/web-platform/tests/shadow-dom/offsetTop-offsetLeft-across-shadow-boundaries.html
new file mode 100644
index 0000000000..5d7c7b8053
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/offsetTop-offsetLeft-across-shadow-boundaries.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+.box {
+  width: 10px;
+  height: 10px;
+}
+</style>
+
+<div>
+  <template shadowroot=open>
+    <style>
+    .box {
+      width: 10px;
+      height: 10px;
+    }
+    </style>
+    <div class=box></div>
+    <div style="position: relative">
+      <div class=box></div>
+      <slot></slot>
+    </div>
+  </template>
+  <div class=box></div>
+  <div id=target1 style="position: absolute" class=box></div>
+</div>
+
+<span>
+  <template shadowroot=open>
+    <style>
+    .box {
+      width: 10px;
+      height: 10px;
+    }
+    </style>
+    <span class=box></span>
+    <span style="position: relative">
+      <span class=box></span>
+      <slot></slot>
+    </span>
+  </template>
+  <span class=box></span>
+  <span id=target2 style="position: absolute" class=box></span>
+</span>
+
+<div>
+  <template shadowroot=open>
+    <style>
+    .box {
+      width: 10px;
+      height: 10px;
+    }
+    </style>
+    <div class=box></div>
+    <div style="position: relative">
+      <div class=box></div>
+      <div>
+        <template shadowroot=open>
+          <style>
+          .box {
+            width: 10px;
+            height: 10px;
+          }
+          </style>
+          <div class=box></div>
+          <div style="position: relative">
+            <div class=box></div>
+            <slot></slot>
+          </div>
+        </template>
+        <slot></slot>
+      </div>
+    </div>
+  </template>
+  <div class=box></div>
+  <div id=target3 style="position: absolute" class=box></div>
+</div>
+
+<script>
+// TODO delete this when all browsers support declarative shadowdom
+(function attachShadowRoots(root) {
+  root.querySelectorAll("template[shadowroot]").forEach(template => {
+    const mode = template.getAttribute("shadowroot");
+    const shadowRoot = template.parentNode.attachShadow({ mode });
+    shadowRoot.appendChild(template.content);
+    template.remove();
+    attachShadowRoots(shadowRoot);
+  });
+})(document);
+</script>
+
+<script>
+test(() => {
+  assert_equals(target1.offsetTop, 38);
+}, 'Verifies that HTMLElement.offsetTop accounts for shadow boundaries.');
+
+test(() => {
+  assert_equals(target2.offsetLeft, 8);
+}, 'Verifies that HTMLElement.offsetLeft accounts for shadow boundaries.');
+
+test(() => {
+  assert_equals(target3.offsetTop, 88);
+}, 'Verifies that HTMLElement.offsetTop accounts for shadow boundaries when nested in multiple shadow roots.');
+</script>