| <!DOCTYPE html> |
| <html id="html"> |
| <head> |
| <style id="custom-style"> |
| * { |
| background-color: white; |
| margin: 0; |
| padding: 0; |
| } |
| :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="webkit-test"> |
| <div id="labelable-ancestor"> |
| <div id="labelable-parent"> |
| <textarea id="target">Label</textarea> |
| </div> |
| </div> |
| <div id="next-group" style="display:block"> |
| <input id="input1" value="Input1"> |
| <input id="input2" value="Input2"> |
| <input id="input3" value="Input3"> |
| </div> |
| </div> |
| <div id="console"> |
| </div> |
| <script> |
| description("Verify that :active remain consistent when the focus is changing."); |
| 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 elementsMatchingSelector(selector) { |
| let elements = []; |
| for (let element of document.querySelectorAll(selector)) { |
| elements.push(element.id); |
| } |
| return elements; |
| } |
| |
| if (window.eventSender) { |
| eventSender.mouseMoveTo(50, 50); |
| } else { |
| debug(""); |
| debug("To run Manually, click-hold-release on the green rect. All the results below should say PASS.") |
| debug(""); |
| } |
| |
| function sendMouseDown() { |
| if (window.eventSender) { |
| eventSender.mouseDown(); |
| } |
| } |
| |
| function sendMouseUp() { |
| if (window.eventSender) { |
| eventSender.mouseUp(); |
| } |
| } |
| |
| var target = document.getElementById('target'); |
| function afterMouseDown(event) { |
| debug("After Mouse Down"); |
| shouldBe('elementsWithActiveStyle()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]'); |
| shouldBe('elementsMatchingSelector(":active")', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]'); |
| debug("Focus the target"); |
| target.focus(); |
| shouldBe('elementsWithActiveStyle()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]'); |
| shouldBe('elementsMatchingSelector(":active")', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]'); |
| shouldBe('elementsMatchingSelector(":focus")', '["target"]'); |
| debug("Focus input2"); |
| let input2 = document.getElementById("input2"); |
| input2.focus(); |
| shouldBe('elementsWithActiveStyle()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]'); |
| shouldBe('elementsMatchingSelector(":active")', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]'); |
| shouldBe('elementsMatchingSelector(":focus")', '["input2"]'); |
| debug("Focus the target"); |
| target.focus(); |
| shouldBe('elementsWithActiveStyle()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]'); |
| shouldBe('elementsMatchingSelector(":active")', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]'); |
| shouldBe('elementsMatchingSelector(":focus")', '["target"]'); |
| debug("Focus input1"); |
| let input1 = document.getElementById("input1"); |
| input1.focus(); |
| shouldBe('elementsWithActiveStyle()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]'); |
| shouldBe('elementsMatchingSelector(":active")', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]'); |
| shouldBe('elementsMatchingSelector(":focus")', '["input1"]'); |
| |
| finishJSTest(); |
| } |
| function mouseDownHandler(event) { |
| debug("On Mouse Down"); |
| shouldBe('elementsWithActiveStyle()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]'); |
| shouldBe('elementsMatchingSelector(":active")', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]'); |
| |
| setTimeout(function() { afterMouseDown(event); }, 0); |
| } |
| |
| target.addEventListener('mousedown', mouseDownHandler); |
| |
| |
| debug("Initial state"); |
| shouldBe('elementsWithActiveStyle()', '[]'); |
| shouldBe('elementsMatchingSelector(":active")', '[]'); |
| shouldBe('elementsMatchingSelector(":focus")', '[]'); |
| |
| sendMouseDown(); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
