| <!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> |