Commit 5ca9d398 authored by Robert Knight's avatar Robert Knight

Add test case for loading Hypothesis into a Shadow DOM-ed iframe

Add a test case that reproduces the scenario encountered in the new
VitalSource book reader [1] where Hypothesis is loaded into an iframe
whose `<iframe>` element is contained within a shadow root and is thus
not accessible via `window.frames`. This scenario currently prevents the
Hypothesis sidebar from discovering and connecting to the frame.
parent fd5a1307
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Guest frame in shadow root</title>
<style>
body {
font-family: sans-serif;
}
</style>
<template id="content-container-template">
<iframe src="/document/burns" width="100%" height="400"></iframe>
</template>
<script>
class ContentContainerElement extends HTMLElement {
constructor() {
super();
const template = document.getElementById(
'content-container-template'
);
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.append(template.content.cloneNode(true));
}
}
customElements.define('content-container', ContentContainerElement);
</script>
</head>
<body>
<h2>Guest frame in shadow root</h2>
<p>
This is a test for when the Hypothesis client is loaded inside an
<code>&lt;iframe&gt;</code> which is in turn contained within a shadow root.
Such frames are <a href="https://github.com/WICG/webcomponents/issues/145">not
discoverable</a> via <code>window.frames</code>.
</p>
<content-container></content-container>
</body>
</html>
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
<ul> <ul>
<li><a href="/document/z-index">Content with high <code>z-index</code> style</a></li> <li><a href="/document/z-index">Content with high <code>z-index</code> style</a></li>
<li><a href="/document/shadow-dom">Content in shadow DOM</a></li> <li><a href="/document/shadow-dom">Content in shadow DOM</a></li>
<li><a href="/document/host-in-shadow-root">Hypothesis loaded into frame in shadow root</a></li>
<li><a href="/document/parent-frame">Annotation-enabled iframe</a></li> <li><a href="/document/parent-frame">Annotation-enabled iframe</a></li>
<li><a href="/document/sidebar-external-container">Sidebar in external container</a></li> <li><a href="/document/sidebar-external-container">Sidebar in external container</a></li>
<li><a href="/document/multi-frames">Page containing multiple iframes with Hypothesis loaded</a></li> <li><a href="/document/multi-frames">Page containing multiple iframes with Hypothesis loaded</a></li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment