details-pseudo-elements-006.html (1612B)
1 <!DOCTYPE HTML> 2 <title>::details-content pseudo element supports :hover</title> 3 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> 4 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#treelike"> 5 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#details-content-pseudo"> 6 <link rel="help" href="https://github.com/whatwg/html/pull/10265"> 7 <link rel="help" href="https://github.com/dbaron/details-styling/blob/main/phase-1.md"> 8 <link rel="help" href="https://crbug.com/1469418"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/resources/testdriver.js"></script> 12 <script src="/resources/testdriver-actions.js"></script> 13 <script src="/resources/testdriver-vendor.js"></script> 14 <style> 15 16 html, body { margin: 0; padding: 0; } 17 details { width: 200px; height: 100px; } 18 summary { height: 30px; } 19 20 body { color: black; background: white; } 21 details::details-content:hover { color: green } 22 23 </style> 24 25 <details open> 26 <summary>summary</summary> 27 <div id="inside">contents</div> 28 </details> 29 30 <script> 31 32 promise_test(async () => { 33 let cs = getComputedStyle(document.getElementById("inside")); 34 await new test_driver.Actions().pointerMove(300, 35).send(); 35 assert_equals(cs.color, "rgb(0, 0, 0)", "no :hover styles when pointer is outside"); 36 await new test_driver.Actions().pointerMove(100, 35).send(); 37 assert_equals(cs.color, "rgb(0, 128, 0)", ":hover styles when pointer is inside"); 38 }, "::details-content matches :hover when mouse pointer is over it"); 39 40 </script>