128 lines
4.9 KiB
HTML
128 lines
4.9 KiB
HTML
<!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>
|