| <!DOCTYPE html> |
| <style> |
| div { |
| background-color: #00ffff; |
| width: 100px; |
| height: 100px; |
| } |
| span:active { |
| display: none; |
| } |
| </style> |
| |
| <div> |
| <div id='host'> |
| <span>Click Me</span> |
| </div> |
| </div> |
| |
| <pre id='description'></pre> |
| <pre id='console'></pre> |
| |
| <script src='../../resources/js-test.js'></script> |
| |
| <script> |
| var root = document.getElementById('host').createShadowRoot(); |
| root.innerHTML = |
| '<style> div {background-color: #00ff00;}div:active {background-color: #ff0000;}</style><div id=shadowdom style="width: 100px; height: 100px"><content></content></div>' |
| |
| function shouldHaveBackground(element, bg) { |
| background = getComputedStyle(element, null).getPropertyValue('background-color'); |
| shouldBeEqualToString('background', bg); |
| } |
| |
| description('Chain of active elements should be cleared including the Shadow DOM elements'); |
| |
| if (window.testRunner) { |
| var shadow = root.querySelector('#shadowdom'); |
| |
| 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(); |
| // Mouse over the span. |
| eventSender.mouseMoveTo(spanRect.left + 5, spanRect.top + 5); |
| shouldHaveBackground(shadow, 'rgb(0, 255, 0)'); |
| eventSender.mouseDown(); |
| shouldHaveBackground(shadow, 'rgb(255, 0, 0)'); |
| eventSender.mouseUp(); |
| shouldHaveBackground(shadow, 'rgb(0, 255, 0)'); |
| } |
| </script> |