Add a test for global keypress with shadow-dom elements

This is a regression test for
https://github.com/rust-lang/mdBook/issues/2507.

tests/gui/books/shadow-dom/book.toml

@@ -0,0 +1,6 @@
+[book]
+title = "shadow-dom"
+language = "en"
+
+[output.html]
+additional-js = ["shadow-dom.js"]

tests/gui/books/shadow-dom/shadow-dom.js

@@ -0,0 +1,38 @@
+(function() {
+    let shadowHost = null;
+    let shadowInput = null;
+
+    document.addEventListener('keypress', function(e) {
+        if (e.key === 'x' || e.key === 'X') {
+            if (shadowHost && shadowHost.isConnected) {
+                shadowInput.focus();
+                return;
+            }
+
+            shadowHost = document.createElement('div');
+            shadowHost.id = 'shadow-input-host';
+            shadowHost.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;';
+
+            document.body.appendChild(shadowHost);
+
+            const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+            shadowInput = document.createElement('input');
+            shadowInput.type = 'text';
+            shadowInput.id = 'shadow-input';
+            shadowInput.placeholder = 'Shadow DOM input (press Escape to close)';
+            shadowInput.style.cssText = 'font-size:1.2em;padding:8px;width:300px;';
+
+            shadowRoot.appendChild(shadowInput);
+            shadowInput.focus();
+
+            shadowInput.addEventListener('keydown', function(e) {
+                if (e.key === 'Escape') {
+                    shadowHost.remove();
+                    shadowHost = null;
+                    shadowInput = null;
+                }
+            });
+        }
+    });
+})();

tests/gui/books/shadow-dom/src/SUMMARY.md

@@ -0,0 +1,3 @@
+# Summary
+
+- [Chapter 1](./chapter_1.md)

tests/gui/books/shadow-dom/src/chapter_1.md

@@ -0,0 +1 @@
+# Chapter 1

tests/gui/shadow-dom.goml

@@ -0,0 +1,18 @@
+// Tests the keypress handler when there is a shadow-dom element.
+// See https://github.com/rust-lang/mdBook/issues/2507
+
+go-to: |DOC_PATH| + "shadow-dom/chapter_1.html"
+
+// Open the shadow-dom generated element.
+press-key: 'x'
+wait-for: '#shadow-input-host'
+// See what happens when the s key is pressed.
+press-key: 's'
+wait-for-css-false: ("#mdbook-search-wrapper", {"display": "none"})
+
+// Also try the global key handlers.
+reload:
+press-key: 'x'
+wait-for: '#shadow-input-host'
+press-key: '?'
+wait-for-css: ("#mdbook-help-container", {"display": "flex"})