| <!DOCTYPE html> |
| <html id="html"> |
| <head> |
| <style id="custom-style"> |
| * { |
| background-color: white; |
| margin: 0; |
| padding: 0; |
| } |
| :active, input:active + * + * + * { |
| background-color: rgb(50, 100, 150) !important; |
| } |
| #target { |
| display: block; |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| } |
| </style> |
| </head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <body id="body"> |
| <div id="prime-ancestor"> |
| <div id="labelable-ancestor"> |
| <div id="labelable-parent"> |
| <label for="labelable" id="target">Label</label> |
| </div> |
| </div> |
| <div id="next-group" style="display:block"> |
| <div id="sibling1">Sibling1</div> |
| <div id="sibling2">Sibling2</div> |
| <input id="labelable" value="Labelable Input"> |
| <div id="sibling3">Sibling3</div> |
| <div id="sibling4">Sibling4</div> |
| <div id="sibling5">Sibling5</div> |
| </div> |
| </div> |
| <div id="console"> |
| </div> |
| <script> |
| description("Verify that indirect :active on a labeled element is not affected when the element gets focus from the click."); |
| window.jsTestIsAsync = true; |
| |
| function elementsWithActiveStyle() { |
| let elements = []; |
| for (let element of document.querySelectorAll("*")) { |
| if (getComputedStyle(element).backgroundColor === "rgb(50, 100, 150)") |
| elements.push(element.id); |
| } |
| return elements; |
| } |
| function elementsMatchingActiveSelector() { |
| let elements = []; |
| for (let element of document.querySelectorAll(":active")) { |
| elements.push(element.id); |
| } |
| return elements; |
| } |
| |
| if (window.eventSender) { |
| eventSender.mouseMoveTo(50, 50); |
| } else { |
| debug(""); |
| debug("To run Manually, click-hold-release 3 times on the green rect. The rect and the input element should change color. All the results below should say PASS.") |
| debug(""); |
| } |
| |
| function sendMouseDown() { |
| if (window.eventSender) { |
| eventSender.mouseDown(); |
| } |
| } |
| |
| function sendMouseUp() { |
| if (window.eventSender) { |
| eventSender.mouseUp(); |
| } |
| } |
| |
| function mouseDownHandler(event, delayed = false) { |
| debug(delayed ? "After Mouse Down" : "On Mouse Down"); |
| shouldBe('elementsWithActiveStyle()', '["html", "body", "prime-ancestor", "labelable-ancestor", "labelable-parent", "target", "labelable", "sibling5"]'); |
| shouldBe('elementsMatchingActiveSelector()', '["html", "body", "prime-ancestor", "labelable-ancestor", "labelable-parent", "target", "labelable"]'); |
| |
| // The current spec does not defined the order in which elements are activated. |
| // It is reasonable to have the activation after the mouseDown dispatch. That's what Firefox does at this time. |
| // This delayed handler ensure we cover both possibilities. The first handler fails on Firefox but that's not |
| // necessarily wrong, just undefined. The result is fine as long as one of the two handler succeed. |
| if (!delayed) { |
| setTimeout(function() { mouseDownHandler(event, true); }, 0); |
| } else { |
| sendMouseUp(); |
| } |
| } |
| var target = document.getElementById('target'); |
| target.addEventListener('mousedown', mouseDownHandler); |
| |
| let mouseUpCount = 0; |
| function mouseUpHandler(event, delayed = false) { |
| debug(delayed ? "After Mouse Up" : "On Mouse Up"); |
| shouldBe('elementsWithActiveStyle()', '[]'); |
| shouldBe('elementsMatchingActiveSelector()', '[]'); |
| if (++mouseUpCount === 6) { |
| document.getElementById("prime-ancestor").style.display = "none"; |
| document.getElementById("custom-style").innerText = ""; |
| finishJSTest(); |
| } else { |
| if (!delayed) { |
| setTimeout(function() { mouseUpHandler(event, true); }, 0); |
| } else { |
| sendMouseDown(); |
| } |
| } |
| } |
| target.addEventListener('mouseup', mouseUpHandler); |
| |
| |
| debug("Initial state"); |
| shouldBe('elementsWithActiveStyle()', '[]'); |
| shouldBe('elementsMatchingActiveSelector()', '[]'); |
| |
| sendMouseDown(); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
