<!
DOCTYPE html>
<
meta charset=
"utf-8">
<
title>Selectors: Change class to enable :hover</
title>
<
link rel=
"author" title=
"Rune Lillesveen" href=
"futhark@chromium.org">
<
link rel=
"help" href=
"https://drafts.csswg.org/selectors/#the-hover-pseudo">
<
script src=
"/resources/testharness.js"></
script>
<
script src=
"/resources/testharnessreport.js"></
script>
<
script src=
"/resources/testdriver.js"></
script>
<
script src=
"/resources/testdriver-actions.js"></
script>
<
script src=
"/resources/testdriver-vendor.js"></
script>
<
style>
.affected:hover { color: green }
#hoveredContents { display: contents }
</
style>
<
div id=
"hovered">Hover me - should become green</
div>
<
div id=
"hoveredContents">
<
div id=
"hovered2">Hover me - should become green</
div>
</
div>
<
script>
function mouseMoveToTarget(selector) {
let target = document.querySelector(selector);
return new test_driver.Actions().pointerMove(
0,
0, {origin: target})
.send();
}
function testElementGreen(test, element) {
element.addEventListener(
"mouseover", test.step_func(event => {
assert_equals(getComputedStyle(element).color,
"rgb(0, 128, 0)");
test.done();
}));
}
// Setting the affected classes here makes the two elements go from never
// reacting to hover to being affected by hover without changing computed
//
style.
hovered.offsetTop;
hovered.className =
"affected";
hoveredContents.className =
"affected";
async_test(t => { testElementGreen(t, hovered); },
"Hover #hovered element should make it go green");
async_test(t => { testElementGreen(t, hovered2); },
"Hover #hoveredContents child should make it go green");
mouseMoveToTarget(
"#hovered").then(() => {
mouseMoveToTarget(
"#hovered2");
});
</
script>
