test_hover_on_part.html (1228B)
1 <!doctype html> 2 <title>Shadow parts are invalidated correctly when only a pseudo-class state to the right of the part matches</title> 3 <script src="/tests/SimpleTest/SimpleTest.js"></script> 4 <script src="/tests/SimpleTest/EventUtils.js"></script> 5 <style> 6 div { 7 width: 100px; 8 height: 100px; 9 } 10 #host::part(p) { 11 background-color: red; 12 } 13 #host::part(p):hover { 14 background-color: lime; 15 } 16 </style> 17 <div id="host"></div> 18 <div id="random-element-to-force-change"></div> 19 <script> 20 SimpleTest.waitForExplicitFinish(); 21 22 let host = document.getElementById("host"); 23 host.attachShadow({ mode: "open" }).innerHTML = ` 24 <style> 25 div { 26 width: 100px; 27 height: 100px; 28 } 29 </style> 30 <div part=p></div> 31 `; 32 33 let part = host.shadowRoot.querySelector("div"); 34 let other = document.getElementById("random-element-to-force-change"); 35 36 SimpleTest.waitForFocus(function() { 37 synthesizeMouseAtCenter(other, {type: "mousemove"}); 38 is( 39 getComputedStyle(part).backgroundColor, 40 "rgb(255, 0, 0)", 41 "Part is red" 42 ); 43 44 synthesizeMouseAtCenter(part, {type: "mousemove"}); 45 is( 46 getComputedStyle(part).backgroundColor, 47 "rgb(0, 255, 0)", 48 "Part is lime" 49 ); 50 SimpleTest.finish(); 51 }); 52 </script>