| <!DOCTYPE html> |
| <html id="html"> |
| <head> |
| <style id="custom-style"> |
| * { |
| background-color: white; |
| margin: 0; |
| padding: 0; |
| } |
| label:active, input:active { |
| background-color: rgb(50, 100, 150) !important; |
| } |
| #target1, #target2, #target3 { |
| display: block; |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| border: 2px solid black; |
| } |
| </style> |
| </head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <body id="body"> |
| <div id="webkit-test"> |
| <div id="labelable-ancestor"> |
| <div id="labelable-parent"> |
| <label for="labelable1"><div id="target1"></div></label> |
| <label for="labelable2"><div id="target2">Target</div></label> |
| <label for="labelable3"><div id="target3"></div></label> |
| </div> |
| </div> |
| <div id="next-group" style="display:none"> |
| <input id="labelable1" value="Labelable Input"> |
| <input id="labelable2" value="Labelable Input"> |
| <input id="labelable3" value="Labelable Input"> |
| </div> |
| </div> |
| <div id="console"> |
| </div> |
| <script> |
| description("Verify that a labeled elemed gets the :active state even if it has no renderer."); |
| window.jsTestIsAsync = true; |
| |
| function generateName(element) { |
| if (element.id) |
| return element.id; |
| |
| let childPosition = 1; |
| while (element.previousElementSibling) { |
| element = element.previousElementSibling; |
| ++childPosition; |
| } |
| return "#" + element.parentElement.id + " >> " + element.tagName.toLowerCase() + ":nth-child(" + childPosition + ")"; |
| } |
| |
| function elementsWithActiveStyle() { |
| let elements = []; |
| for (let element of document.querySelectorAll("*")) { |
| if (getComputedStyle(element).backgroundColor === "rgb(50, 100, 150)") |
| elements.push(generateName(element)); |
| } |
| return elements; |
| } |
| function elementsMatchingActiveSelector() { |
| let elements = []; |
| for (let element of document.querySelectorAll(":active")) { |
| elements.push(generateName(element)); |
| } |
| return elements; |
| } |
| |
| if (window.eventSender) { |
| eventSender.mouseMoveTo(50, 150); |
| } else { |
| debug(""); |
| debug("To run Manually, click-hold-release on the second green rect. 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()', '["#labelable-parent >> label:nth-child(2)", "labelable2"]'); |
| shouldBe('elementsMatchingActiveSelector()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(2)", "target2", "labelable2"]'); |
| |
| if (!delayed) { |
| setTimeout(function() { mouseDownHandler(event, true); }, 0); |
| } else { |
| sendMouseUp(); |
| } |
| } |
| var target = document.querySelector('label:nth-child(2)'); |
| target.addEventListener('mousedown', mouseDownHandler); |
| |
| function mouseUpHandler(event, delayed = false) { |
| debug(delayed ? "After Mouse Up" : "On Mouse Up"); |
| shouldBe('elementsWithActiveStyle()', '[]'); |
| shouldBe('elementsMatchingActiveSelector()', '[]'); |
| document.getElementById("webkit-test").style.display = "none"; |
| document.getElementById("custom-style").innerText = ""; |
| finishJSTest(); |
| } |
| target.addEventListener('mouseup', mouseUpHandler); |
| |
| |
| debug("Initial state"); |
| shouldBe('elementsWithActiveStyle()', '[]'); |
| shouldBe('elementsMatchingActiveSelector()', '[]'); |
| |
| sendMouseDown(); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
