| <!-- webkit-test-runner [ useFlexibleViewport=true textExtractionEnabled=true ] --> |
| <!DOCTYPE html> |
| <html> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta charset="utf-8"> |
| <head> |
| <style> |
| .text-representation { |
| white-space: pre-wrap; |
| } |
| |
| .tall { |
| width: 1px; |
| height: 150vh; |
| } |
| |
| form { |
| width: 390px; |
| height: 350px; |
| border-radius: 1em; |
| border: 1px solid black; |
| padding: 1em; |
| } |
| |
| h4 { |
| margin: auto; |
| } |
| |
| main { |
| position: fixed; |
| inset: 0; |
| overflow-y: scroll; |
| } |
| |
| .password-wrapper { |
| width: 300px; |
| height: 250px; |
| border: 1px solid gray; |
| padding: 0.5em; |
| } |
| |
| .standalone-container { |
| width: 390px; |
| height: 350px; |
| border: 1px solid gray; |
| padding: 1em; |
| } |
| </style> |
| <script src="../../resources/ui-helper.js"></script> |
| </head> |
| <body> |
| <main role="main"> |
| <section aria-label="Visible content"> |
| <article role="article"> |
| <header> |
| <h3>Article Title</h3> |
| </header> |
| <p>This is some visible content.</p> |
| </article> |
| </section> |
| <div class="tall"></div> |
| <section aria-label="Login section"> |
| <form name="login" autocomplete="on"> |
| <h4>Log in to your account</h4> |
| <input name="username" placeholder="Username" required /> |
| <div class="password-wrapper"> |
| <input name="password" placeholder="Password" type="password" required /> |
| <input name="confirm-password" placeholder="Confirm Password" type="password" required /> |
| </div> |
| <button type="submit">Log in</button> |
| </form> |
| </section> |
| <section aria-label="Standalone password"> |
| <div class="standalone-container"> |
| <h4>Enter access code</h4> |
| <input name="access-code" placeholder="Access Code" type="password" /> |
| </div> |
| </section> |
| <section aria-label="Distant form"> |
| <form id="distant-form" autocomplete="on"> |
| <h4>Create account</h4> |
| <input name="user" placeholder="User" required /> |
| </form> |
| <div class="password-wrapper"> |
| <input name="pass" placeholder="Password" type="password" form="distant-form" required /> |
| </div> |
| </section> |
| </main> |
| <script> |
| addEventListener("load", async () => { |
| if (!window.testRunner) |
| return; |
| |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| |
| const results = []; |
| for (let outputFormat of ["texttree", "html"]) { |
| const heading = document.createElement("h1"); |
| heading.textContent = `-- ${outputFormat}`; |
| |
| const container = document.createElement("pre"); |
| container.classList.add("text-representation"); |
| let textContent = await UIHelper.requestDebugText({ |
| normalize: true, |
| includeRects: false, |
| includeURLs: false, |
| includeOffscreenPasswordFields: true, |
| clipToBounds: true, |
| outputFormat, |
| }); |
| |
| container.textContent = textContent; |
| results.push(heading); |
| results.push(container); |
| results.push(document.createElement("br")); |
| } |
| |
| document.body.replaceChildren(...results); |
| testRunner.notifyDone(); |
| }); |
| </script> |
| </body> |
| </html> |
