| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/ui-helper.js"></script> |
| <style> |
| body { |
| margin: 0; |
| padding: 0; |
| } |
| |
| .hidden { |
| display: none; |
| } |
| |
| #ellipsizedText { |
| font-size: 300%; |
| text-overflow: ellipsis; |
| display: inline-block; |
| overflow: hidden; |
| white-space: nowrap; |
| width: 55px; |
| height: 55px; |
| background-color: green; |
| color: red; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="manual-instructions" class="hidden"> |
| <p>Tests that a text-overflow box is scrollable. To run by hand, perform the following:</p> |
| <ol> |
| <li>Click anywhere in the green box (below) to focus it.</li> |
| <li>Press the down arrow on the keyboard.</li> |
| </ol> |
| <p>This test PASSED if you see a solid green square. Otherwise, it FAILED.</p> |
| </div> |
| <div id="ellipsizedText" contenteditable="true">abcde</div> |
| <script> |
| function done() |
| { |
| document.getElementById("ellipsizedText").blur(); // To avoid painting the caret. |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| function runTest() |
| { |
| function scrollToEndOfLine() { |
| return UIHelper.keyDown("downArrow"); |
| } |
| UIHelper.activateAndWaitForInputSessionAt(0, 0).then(scrollToEndOfLine); |
| } |
| |
| document.getElementById("ellipsizedText").addEventListener("scroll", done, {once: true}); |
| |
| if (!window.testRunner) |
| document.getElementById("manual-instructions").classList.remove("hidden"); // Show manual instructions |
| else { |
| testRunner.waitUntilDone(); |
| |
| runTest(); |
| } |
| </script> |
| </body> |
| </html> |
