| benjamin@webkit.org | 5701eda | 2016-06-27 22:20:17 +0000 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <html id="html"> |
| 3 | <head> |
| 4 | <style id="custom-style"> |
| 5 | * { |
| 6 | background-color: white; |
| 7 | margin: 0; |
| 8 | padding: 0; |
| 9 | } |
| 10 | label:active, input:active { |
| 11 | background-color: rgb(50, 100, 150) !important; |
| 12 | } |
| 13 | label { |
| 14 | display: block; |
| 15 | width: 100px; |
| 16 | height: 100px; |
| 17 | background-color: green; |
| 18 | border: 2px solid black; |
| 19 | } |
| 20 | </style> |
| 21 | </head> |
| 22 | <script src="../../resources/js-test-pre.js"></script> |
| 23 | <body id="body"> |
| 24 | <div id="webkit-test"> |
| 25 | <div id="labelable-ancestor"> |
| 26 | <div id="labelable-parent"> |
| 27 | <label for="labelable">Label</label> |
| 28 | <label for="labelable">Label</label> |
| 29 | <label for="labelable">Label</label> |
| 30 | </div> |
| 31 | </div> |
| 32 | <div id="next-group" style="display:none"> |
| 33 | <input id="labelable" value="Labelable Input"> |
| 34 | <input id="labelable" value="Labelable Input"> |
| 35 | <input id="labelable" value="Labelable Input"> |
| 36 | </div> |
| 37 | </div> |
| 38 | <div id="console"> |
| 39 | </div> |
| 40 | <script> |
| 41 | description("Verify that a labeled elemed gets the :active state even if it has no renderer."); |
| 42 | window.jsTestIsAsync = true; |
| 43 | |
| 44 | function generateName(element) { |
| 45 | if (element.id && element.id != "labelable") |
| 46 | return element.id; |
| 47 | |
| 48 | let childPosition = 1; |
| 49 | while (element.previousElementSibling) { |
| 50 | element = element.previousElementSibling; |
| 51 | ++childPosition; |
| 52 | } |
| 53 | return "#" + element.parentElement.id + " >> " + element.tagName.toLowerCase() + ":nth-child(" + childPosition + ")"; |
| 54 | } |
| 55 | |
| 56 | function elementsWithActiveStyle() { |
| 57 | let elements = []; |
| 58 | for (let element of document.querySelectorAll("*")) { |
| 59 | if (getComputedStyle(element).backgroundColor === "rgb(50, 100, 150)") |
| 60 | elements.push(generateName(element)); |
| 61 | } |
| 62 | return elements; |
| 63 | } |
| 64 | function elementsMatchingActiveSelector() { |
| 65 | let elements = []; |
| 66 | for (let element of document.querySelectorAll(":active")) { |
| 67 | elements.push(generateName(element)); |
| 68 | } |
| 69 | return elements; |
| 70 | } |
| 71 | |
| 72 | if (window.eventSender) { |
| 73 | eventSender.mouseMoveTo(50, 150); |
| 74 | } else { |
| 75 | debug(""); |
| 76 | debug("To run Manually, click-hold-release on the second green rect. All the results below should say PASS.") |
| 77 | debug(""); |
| 78 | } |
| 79 | |
| 80 | function sendMouseDown() { |
| 81 | if (window.eventSender) { |
| 82 | eventSender.mouseDown(); |
| 83 | } |
| 84 | } |
| 85 | |
| 86 | function sendMouseUp() { |
| 87 | if (window.eventSender) { |
| 88 | eventSender.mouseUp(); |
| 89 | } |
| 90 | } |
| 91 | |
| 92 | function mouseDownHandler(event, delayed = false) { |
| 93 | debug(delayed ? "After Mouse Down" : "On Mouse Down"); |
| 94 | shouldBe('elementsWithActiveStyle()', '["#labelable-parent >> label:nth-child(2)", "#next-group >> input:nth-child(1)"]'); |
| 95 | shouldBe('elementsMatchingActiveSelector()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(2)", "#next-group >> input:nth-child(1)"]'); |
| 96 | |
| 97 | if (!delayed) { |
| 98 | setTimeout(function() { mouseDownHandler(event, true); }, 0); |
| 99 | } else { |
| 100 | sendMouseUp(); |
| 101 | } |
| 102 | } |
| 103 | var target = document.querySelector('label:nth-child(2)'); |
| 104 | target.addEventListener('mousedown', mouseDownHandler); |
| 105 | |
| 106 | function mouseUpHandler(event, delayed = false) { |
| 107 | debug(delayed ? "After Mouse Up" : "On Mouse Up"); |
| 108 | shouldBe('elementsWithActiveStyle()', '[]'); |
| 109 | shouldBe('elementsMatchingActiveSelector()', '[]'); |
| 110 | document.getElementById("webkit-test").style.display = "none"; |
| 111 | document.getElementById("custom-style").innerText = ""; |
| 112 | finishJSTest(); |
| 113 | } |
| 114 | target.addEventListener('mouseup', mouseUpHandler); |
| 115 | |
| 116 | |
| 117 | debug("Initial state"); |
| 118 | shouldBe('elementsWithActiveStyle()', '[]'); |
| 119 | shouldBe('elementsMatchingActiveSelector()', '[]'); |
| 120 | |
| 121 | sendMouseDown(); |
| 122 | </script> |
| 123 | <script src="../../resources/js-test-post.js"></script> |
| 124 | </body> |
| 125 | </html> |
