| <!DOCTYPE html> |
| <style> |
| div { background: rgb(0, 0, 0); } |
| div:active { background: rgb(0, 255, 0); } |
| div { |
| width: 200px; |
| height: 200px; |
| border: 2px solid rgb(0, 0, 255); |
| } |
| div span { |
| color: rgb(255, 255, 255); |
| } |
| div:active span { |
| color: rgb(255, 0, 0); |
| display: none; |
| } |
| </style> |
| |
| <div id="box"><span>Text in a span</span></div> |
| <pre id="description"></pre> |
| <pre id="console"></pre> |
| |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| function shouldHaveBackground(element, bg) { |
| background = getComputedStyle(element, null).getPropertyValue("background-color"); |
| shouldBeEqualToString('background', bg); |
| } |
| |
| function shouldHaveTextColor(element, textColor) { |
| color = getComputedStyle(element, null).getPropertyValue("color"); |
| shouldBeEqualToString('color', textColor); |
| } |
| |
| description("Chain of active elements should be cleared, even if style :active sets display: none on the current active element"); |
| |
| if (window.testRunner) { |
| var box = document.getElementById('box'); |
| |
| eventSender.dragMode = false; |
| // This mouse click seems to be required for WebKit's event handling to |
| // pick up the :hover class. See https://bugs.webkit.org/show_bug.cgi?id=74264 |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| |
| var span = document.querySelector('span'); |
| var spanRect = span.getBoundingClientRect(); |
| // Move into the first box. |
| eventSender.mouseMoveTo(spanRect.left + 5, spanRect.top + 5); |
| eventSender.mouseDown(); |
| shouldHaveBackground(box, 'rgb(0, 255, 0)'); |
| eventSender.mouseUp(); |
| shouldHaveTextColor(span, 'rgb(255, 255, 255)'); |
| } |
| </script> |
