Add test scenario for `externalContainerSelector` option

`externalContainerSelector` allows the placement of the sidebar inside the element specified by the CSS selector. See https://h.readthedocs.io/projects/client/en/latest/publishers/config/#cmdoption-arg-externalcontainerselector

Add test scenario for `externalContainerSelector` option
`externalContainerSelector` allows the placement of the sidebar inside the element specified by the CSS selector. See https://h.readthedocs.io/projects/client/en/latest/publishers/config/#cmdoption-arg-externalcontainerselector
c09c9142 · Eduardo Sanz García · Eduardo · 041b2f33 · c09c9142 · c09c9142
Commit c09c9142 authored May 26, 2021 by Eduardo Sanz García Committed by Eduardo May 28, 2021
Hide whitespace changes
Inline Side-by-side

Showing with 52 additions and 0 deletions

sidebar-external-container.mustache ...server/documents/html/sidebar-external-container.mustache +51 -0

index.mustache dev-server/templates/index.mustache +1 -0

No files found.
--- a/dev-server/documents/html/sidebar-external-container.mustache
+++ b/dev-server/documents/html/sidebar-external-container.mustache
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Sidebar in external container test</title>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+      .container {
+        display: flex;
+        height: 400px;
+        resize: vertical;
+        overflow: auto;
+      }
+      #my-sidebar {
+        flex: 0 0 20%;
+        height: 100%;
+      }
+      iframe {
+        flex: 1;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Sidebar in external container test</h1>
+    <p>
+      The sidebar is placed inside the element with `my-sidebar` id. The iframe
+      below has an `enable-annotation` attribute. The client detects and injects
+      the annotator into the iframe, which makes the iframe content annotatable.
+    </p>
+    <p>
+      This test case intends to replicate the
+      <a href="https://web.hypothes.is/demos/epubjs/">ePUB demo</a>.
+    </p>
+    <div class="container">
+      <div id="my-sidebar"></div>
+      <iframe src="/document/injectable-frame" enable-annotation></iframe>
+    </div>
+    {{{hypothesisScript}}}
+    <script>
+      window.hypothesisConfig = function () {
+        return {
+          externalContainerSelector: '#my-sidebar',
+        };
+      };
+    </script>
+  </body>
+</html>
--- a/dev-server/templates/index.mustache
+++ b/dev-server/templates/index.mustache
@@ -22,6 +22,7 @@
    <li><a href="/document/z-index">z-index test</a></li>
    <li><a href="/document/shadow-dom">Shadow DOM test</a></li>
    <li><a href="/document/parent-frame">Annotatable iframe test</a></li>
+    <li><a href="/document/sidebar-external-container">Sidebar in external container test</a></li>
    <li><a href="/document/multi-frames">Multi-frame test</a></li>
  </ul>