hover-002.html (1750B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Selectors: Change class to enable :hover</title> 4 <link rel="author" title="Rune Lillesveen" href="futhark@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/selectors/#the-hover-pseudo"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <style> 12 .affected:hover { color: green } 13 #hoveredContents { display: contents } 14 </style> 15 <div id="hovered">Hover me - should become green</div> 16 <div id="hoveredContents"> 17 <div id="hovered2">Hover me - should become green</div> 18 </div> 19 <script> 20 function mouseMoveToTarget(selector) { 21 let target = document.querySelector(selector); 22 return new test_driver.Actions().pointerMove(0, 0, {origin: target}) 23 .send(); 24 } 25 26 function testElementGreen(test, element) { 27 element.addEventListener("mouseover", test.step_func(event => { 28 assert_equals(getComputedStyle(element).color, "rgb(0, 128, 0)"); 29 test.done(); 30 })); 31 } 32 33 // Setting the affected classes here makes the two elements go from never 34 // reacting to hover to being affected by hover without changing computed 35 // style. 36 hovered.offsetTop; 37 hovered.className = "affected"; 38 hoveredContents.className = "affected"; 39 40 async_test(t => { testElementGreen(t, hovered); }, "Hover #hovered element should make it go green"); 41 async_test(t => { testElementGreen(t, hovered2); }, "Hover #hoveredContents child should make it go green"); 42 43 mouseMoveToTarget("#hovered").then(() => { 44 mouseMoveToTarget("#hovered2"); 45 }); 46 47 </script>