| <!doctype html> |
| <html lang="en"> |
| <head> |
| <title>Switch between display block and none on :focus</title> |
| <style> |
| .box { |
| width: 100px; |
| height: 100px; |
| background-color: blue; |
| color: white; |
| padding: 10px; |
| } |
| #button { |
| display: block; |
| width: 200px; |
| height: 50px; |
| } |
| #button:focus { |
| display: none; |
| } |
| </style> |
| |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| |
| <script type="text/javascript"> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function beginTest() { |
| if (window.eventSender) { |
| var button = document.getElementById("button"); |
| button.focus(); |
| |
| release(); |
| } |
| } |
| |
| function release() { |
| if (window.eventSender) { |
| var button = document.getElementById("button"); |
| var displayMode = window.getComputedStyle(button).getPropertyValue("display"); |
| |
| if (displayMode == "none") |
| testPassed("Setting display to none on focus processed OK."); |
| else |
| testFailed("Setting display to none on focus FAILED." + " (expected 'none', got '" + displayMode + "')"); |
| |
| var elementsToHide = document.getElementsByClassName('box'); |
| for (var element, i = 0; element = elementsToHide[i]; i++) |
| element.style.visibility = "hidden"; |
| |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| } |
| |
| </script> |
| |
| <body onload="beginTest()"> |
| <button type="button" id="button">When you hit TAB, this button should disappear.</button> |
| <div class="box">This is here to show the layout being recomputed</div> |
| </body> |
| </html> |
