| <!-- 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> |
| body { |
| white-space: pre-wrap; |
| } |
| |
| .clickable { |
| background-color: lightblue; |
| padding: 10px; |
| margin: 5px; |
| cursor: pointer; |
| } |
| |
| .focusable { |
| border: 2px solid green; |
| padding: 5px; |
| margin: 3px; |
| } |
| |
| .interactive { |
| background-color: lightyellow; |
| padding: 8px; |
| } |
| </style> |
| <script src="../../resources/ui-helper.js"></script> |
| </head> |
| <body> |
| <div role="banner"> |
| <h1 id="main-title" aria-label="Main Page Title">Welcome to Test Page</h1> |
| </div> |
| <nav role="navigation" aria-label="Main navigation"> |
| <ul> |
| <li><a href="mailto:wenson_hsieh@apple.com" onclick="return false;">Section 1</a></li> |
| <li><a href="https://example.com/" onclick="return false;">Section 2</a></li> |
| </ul> |
| </nav> |
| <main role="main"> |
| <p>Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo.</p> |
| <section id="section1" aria-label="Interactive Elements"> |
| <button class="clickable" onclick="console.log('clicked')" aria-label="Test button" aria-describedby="btn-help">Click Me</button> |
| <div id="btn-help" aria-hidden="true">This button does nothing</div> |
| <input type="text" class="focusable" placeholder="Enter text here" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor=''" aria-required="true" aria-invalid="false" /> |
| <div class="interactive" tabindex="0" role="button" onclick="this.textContent = 'Clicked!'" onkeydown="if(event.key==='Enter') this.click()" aria-pressed="false">Clickable Div</div> |
| </section> |
| <section id="section2" aria-label="Content with Roles"> |
| <article role="article"> |
| <header> |
| <h3>Article Title</h3> |
| <time datetime="2024-01-01">January 1, 2024</time> |
| </header> |
| <p>This is some article content with <mark>highlighted text</mark>.</p> |
| </article> |
| <aside role="complementary" aria-label="Related information"> |
| <h4>Related Links</h4> |
| <ul> |
| <li><a href="https://webkit.org" onmouseover="this.style.color='red'">Example Link</a></li> |
| <li><a href="https://apple.com" onmouseout="this.style.color=''">Test Link</a></li> |
| </ul> |
| </aside> |
| <div role="region"> |
| <div role="status" aria-live="polite" id="status-msg">Ready</div> |
| <button onclick="document.getElementById('status-msg').textContent = 'Updated!'">Update Status</button> |
| </div> |
| </section> |
| <p>The quick brown fox jumped over the lazy dog.</p> |
| </main> |
| <footer role="contentinfo"> |
| <p>Footer content with <span role="img" aria-label="copyright symbol">©</span> 2024</p> |
| </footer> |
| <div role="dialog" aria-hidden="true" style="display: none;"> |
| <p>This dialog is hidden and should not be extracted.</p> |
| </div> |
| |
| <script> |
| addEventListener("load", async () => { |
| if (!window.testRunner) |
| return; |
| |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| |
| document.body.textContent = await UIHelper.requestDebugText({ |
| normalize: true, |
| includeRects: false, |
| includeURLs: false, |
| nodeIdentifierInclusion: "none", |
| eventListenerCategories: ["none"], |
| includeAccessibilityAttributes: false, |
| wordLimit: 5 |
| }); |
| |
| testRunner.notifyDone(); |
| }); |
| </script> |
| </body> |
| </html> |
