Autofill shadow dom test page (#183)

* Easier navigation between autofill pages Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com> * Add autofill shadow dom test page Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com> * Use a nested shadow tree Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com> --------- Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com>
duckduckgo · Jan 24, 2024 · 90c0e45 · 90c0e45
1 parent f56ef13
commit 90c0e45
Show file tree

Hide file tree

Showing 15 changed files with 123 additions and 25 deletions.
diff --git a/autofill/address-form-submission.html b/autofill/address-form-submission.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <p><a href="../index.html">[Home]</a></p>
+  <p><a href="../index.html#autofill">[Home]</a></p>
 
   <p id="demo"></p>
 
@@ -40,7 +40,7 @@ <h3>Address form with click handler</h3>
         <label for="phone">Phone</label>
         <input id="phone" type="tel">
 
-        
+
         <button type="submit">Save</button>
       </fieldset>
     </form>
@@ -54,4 +54,4 @@ <h3>Address form with click handler</h3>
           clickForm.submit();
       }, true);
     </script>
-</body>
+</body>
diff --git a/autofill/autoprompt/1-standard-login-form.html b/autofill/autoprompt/1-standard-login-form.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-<p><a href="../../index.html">[Home]</a></p>
+<p><a href="../../index.html#autofill">[Home]</a></p>
 <nav>
   <ul class="nav">
     <li><a href="./1-standard-login-form.html">Form present on pageload</a></li>

diff --git a/autofill/autoprompt/2-form-in-modal.html b/autofill/autoprompt/2-form-in-modal.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-<p><a href="../../index.html">[Home]</a></p>
+<p><a href="../../index.html#autofill">[Home]</a></p>
 <nav>
   <ul class="nav">
     <li><a href="./1-standard-login-form.html">Form present on pageload</a></li>

diff --git a/autofill/autoprompt/3-multistep-form.html b/autofill/autoprompt/3-multistep-form.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-<p><a href="../../index.html">[Home]</a></p>
+<p><a href="../../index.html#autofill">[Home]</a></p>
 <nav>
   <ul class="nav">
     <li><a href="./1-standard-login-form.html">Form present on pageload</a></li>

diff --git a/autofill/autoprompt/4-covered-form.html b/autofill/autoprompt/4-covered-form.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-<p><a href="../../index.html">[Home]</a></p>
+<p><a href="../../index.html#autofill">[Home]</a></p>
 <nav>
   <ul class="nav">
     <li><a href="./1-standard-login-form.html">Form present on pageload</a></li>

diff --git a/autofill/autoprompt/5-form-with-text.html b/autofill/autoprompt/5-form-with-text.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-<p><a href="../../index.html">[Home]</a></p>
+<p><a href="../../index.html#autofill">[Home]</a></p>
 <nav>
   <ul class="nav">
     <li><a href="./1-standard-login-form.html">Form present on pageload</a></li>

diff --git a/autofill/card-form-submission.html b/autofill/card-form-submission.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <p><a href="../index.html">[Home]</a></p>
+  <p><a href="../index.html#autofill">[Home]</a></p>
 
   <p id="demo"></p>
 
@@ -30,7 +30,7 @@ <h3>Card form with click handler</h3>
 
         <label for="cvv">cvv</label>
         <input id="cvv" type="text">
-        
+
         <button type="submit">Save</button>
       </fieldset>
     </form>
@@ -44,4 +44,4 @@ <h3>Card form with click handler</h3>
           clickForm.submit();
       }, true);
     </script>
-</body>
+</body>
diff --git a/autofill/form-submission.html b/autofill/form-submission.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <p><a href="../index.html">[Home]</a></p>
+  <p><a href="../index.html#autofill">[Home]</a></p>
 
   <p id="demo"></p>
 
@@ -36,9 +36,9 @@ <h3>Sign in form with click handler</h3>
           clickForm.submit();
       }, true);
     </script>
-    
+
     <hr>
-    
+
     <form id="submit-form" novalidate action="/autofill/form-submission.html">
       <h3>Sign in form with submit handler</h3>
       <p>To test properly, hit enter instead of clicking Sign in.</p>
@@ -108,4 +108,4 @@ <h3>Sign in form where button has covering child element</h3>
 
 </body>
 
-</html>
+</html>
diff --git a/autofill/frame-form-submission-parent.html b/autofill/frame-form-submission-parent.html
@@ -9,13 +9,13 @@
 </head>
 
 <body>
-  <p><a href="../index.html">[Home]</a></p>
+  <p><a href="../index.html#autofill">[Home]</a></p>
 
   <p>We should show the autofill prompts for these iframed forms (note: it does <em>not</em> work on Android)</p>
 
   <h2>Same origin iframe</h2>
   <iframe src="./frame-form-submission-child.html" id="frame-form"></iframe>
-  
+
   <h2>Cross origin iframe</h2>
   <iframe src="https://good.third-party.site/autofill/frame-form-submission-child.html" id="frame-form-cross-origin"></iframe>
 
@@ -25,4 +25,4 @@ <h2>Cross origin iframe</h2>
       display:inline-block;
     }
   </style>
-</body>
+</body>
diff --git a/autofill/frame-parent.html b/autofill/frame-parent.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <p><a href="../index.html">[Home]</a></p>
+  <p><a href="../index.html#autofill">[Home]</a></p>
 
   <p>We should show the autofill prompts for these iframed forms (note: it does <em>not</em> work on Android)</p>
   <p>Note that the autofill tooltip is cut off in extensions and on Catalina. It should show correctly on macOS and iOS.</p>

diff --git a/autofill/modal.html b/autofill/modal.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <p><a href="../index.html">[Home]</a></p>
+  <p><a href="../index.html#autofill">[Home]</a></p>
 
   <p id="demo"></p>
 
@@ -48,4 +48,4 @@ <h2>Sign up for our newsletter</h2>
 
 </body>
 
-</html>
+</html>
diff --git a/autofill/password-update.html b/autofill/password-update.html
@@ -10,7 +10,7 @@
 
 <body>
 
-<p><a href="../index.html">[Home]</a></p>
+<p><a href="../index.html#autofill">[Home]</a></p>
 
 <div class="dialog">
   <form action="/change-password" id="change">

diff --git a/autofill/shadow-dom.html b/autofill/shadow-dom.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Autofill: form in a nested shadow DOM</title>
+  <link rel="stylesheet" href="../style.css" />
+</head>
+
+<body>
+<p><a href="../../index.html#autofill">[Home]</a></p>
+
+<p id="demo"></p>
+
+<div class="">
+  <p>Form in shadow DOM created after click.</p>
+
+  <div class="dialog">
+    <shadow-component></shadow-component>
+  </div>
+  <script>
+    class ShadowComponent extends HTMLElement {
+        constructor () {
+            super();
+
+            // Create a shadow root
+            const shadowRoot = this.attachShadow({ mode: 'open' });
+
+            // Apply some styles to the shadow DOM
+            shadowRoot.innerHTML += `
+      <style>
+        div {
+          padding: 20px;
+          background-color: #f0f0f0;
+          box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+        }
+      </style>
+    `;
+
+            // Create a div element inside the shadow root
+            const div = document.createElement('div');
+            const initialButton = document.createElement('button');
+            initialButton.textContent = 'Click here to login';
+            initialButton.type = 'button';
+            div.appendChild(initialButton);
+            shadowRoot.appendChild(div);
+
+            initialButton.addEventListener('click', () => {
+                initialButton.outerHTML = '<custom-form></custom-form>';
+            });
+        }
+    }
+
+    // Define the custom element "shadow-component"
+    customElements.define('shadow-component', ShadowComponent);
+
+    class Form extends HTMLElement {
+        constructor () {
+            super();
+
+            // Create a shadow root
+            const shadowRoot = this.attachShadow({ mode: 'open' });
+
+            // Append the form to the shadow root
+            this.shadowRoot.innerHTML = `
+      <form id="click-form" novalidate action="./shadow-dom.html">
+      <h3>Sign up form</h3>
+      <fieldset>
+        <label for="email">Email</label>
+        <input id="email" type="email">
+        <label for="password">Password</label>
+        <input id="password" type="password" autocomplete="new-password">
+        <button type="submit">Sign up</button>
+      </fieldset>
+    </form>
+    `;
+            const clickForm = shadowRoot.getElementById('click-form');
+            const button = clickForm?.querySelector('button');
+            const handler = (e) => {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                alert('Success');
+            };
+            button?.addEventListener('click', handler, true);
+            clickForm?.addEventListener('submit', handler, true);
+        }
+    }
+
+    // Define the custom element
+    customElements.define('custom-form', Form);
+  </script>
+</div>
+
+</body>
+
+</html>
diff --git a/autofill/signup.html b/autofill/signup.html
@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
-  <p><a href="../index.html">[Home]</a></p>
+  <p><a href="../index.html#autofill">[Home]</a></p>
   <div class="">
     <form action="/autofill/signup.html" id="signup">
         <h2>Password generation during signup</h2>
@@ -44,4 +44,4 @@ <h3>Sign in form with click handler</h3>
     }, true);
   </script>
 </body>
-</html>
+</html>
diff --git a/index.html b/index.html
@@ -80,7 +80,7 @@ <h2>Privacy Protections Tests</h2>
 	<li><a href='./content-scope-scripts/runtime-checks/'>Runtime checks</a></li>
 </ul>
 
-<h2>Autofill</h2>
+<h2 id="autofill">Autofill</h2>
 <p><strong>Note:</strong> Autofill features currently only work on secure contexts, so no http://.</p>
 <ul>
 	<li><a href="./autofill/address-form-submission.html">Address form submission detection and autofill</a></li>
@@ -91,6 +91,7 @@ <h2>Autofill</h2>
 	<li><a href="./autofill/frame-form-submission-parent.html">Form submission detection and autofill within an iframe</a></li>
 	<li><a href="./autofill/signup.html">Password generation during signup</a></li>
 	<li><a href="./autofill/password-update.html">Password update/reset forms</a></li>
+	<li><a href="./autofill/shadow-dom.html">Forms within shadow DOM</a></li>
 	<li>
 		Autoprompt credentials autofill when a login form is front and center
 		<ul>