| <!DOCTYPE html> |
| <style> |
| div { background: rgb(0, 0, 0); } |
| div:active { background: rgb(255, 0, 0); } |
| #parent { |
| width: 200px; |
| height: 200px; |
| border: 2px solid rgb(0, 0, 255); |
| } |
| #child { |
| width: 100px; |
| height: 100px; |
| border: 2px solid rgb(0, 0, 255); |
| } |
| </style> |
| |
| <body> |
| <div id="parent"> |
| <div id="child"></div> |
| </div> |
| <pre id="description"></div> |
| <pre id="console"></pre> |
| </body> |
| |
| <script src="../../resources/js-test-pre.js"></script> |
| <script> |
| function shouldHaveBackground(element, bg) { |
| background = getComputedStyle(element, null).getPropertyValue("background-color") |
| shouldBeEqualToString('background', bg) |
| } |
| |
| if (window.testRunner) { |
| description(":active style should be cleared even if display property is set to none before mouse released.") |
| var child = document.getElementById('child') |
| var parent = document.getElementById('parent') |
| testRunner.dumpAsText(); |
| |
| // Move and down into the child box. |
| eventSender.mouseMoveTo(50, 50) |
| eventSender.mouseDown() |
| shouldHaveBackground(child, 'rgb(255, 0, 0)') |
| shouldHaveBackground(parent, 'rgb(255, 0, 0)') |
| |
| // With the mouse still down, set parent box to display:none. |
| parent.style.display = "none"; |
| |
| // Mouse up to clear active style. |
| eventSender.mouseUp() |
| parent.style.display = "block"; |
| shouldHaveBackground(child, 'rgb(0, 0, 0)') |
| shouldHaveBackground(parent, 'rgb(0, 0, 0)') |
| } |
| </script> |
