has-with-nesting-parent-containing-hover.html (2208B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Selector Invalidation: :has() with nesting parent containing :hover</title> 4 <link rel="help" href="https://drafts.csswg.org/selectors/#relational"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <style> 11 dd, dt { background: white; } 12 dd:hover { 13 dt:has(~ &) { background: lime; } 14 } 15 </style> 16 <dt id=dt1>#dt1</dt> 17 <dd id=dd1>#dd1, Hover me, the DT above should go lime</dd> 18 <dt id=dt2>#dt2</dt> 19 <dd id=dd2>#dd2, Hover me, both DTs above should go lime</dd> 20 <script> 21 const white = 'rgb(255, 255, 255)'; 22 const lime = 'rgb(0, 255, 0)'; 23 24 function bg_color(element, color, message) { 25 assert_equals(getComputedStyle(element)['background-color'], color, message); 26 } 27 28 promise_test(async () => { 29 bg_color(dt1, white, "#dt1 initially white"); 30 bg_color(dd1, white, "#dd1 initially white"); 31 bg_color(dt2, white, "#dt2 initially white"); 32 bg_color(dd2, white, "#dd2 initially white"); 33 34 await new test_driver.Actions().pointerMove(0, 0, {origin: dd1}).send(); 35 36 bg_color(dt1, lime, "#dt1 should go lime when hover #dd1"); 37 bg_color(dd1, white, "#dd1 doesn't change when hover #dd1"); 38 bg_color(dt2, white, "#dt2 doesn't change when hover #dd1"); 39 bg_color(dd2, white, "#dd2 doesn't change when hover #dd1"); 40 41 await new test_driver.Actions().pointerMove(0, 0, {origin: dt1}).send(); 42 43 bg_color(dt1, white, "#dt1 should go white when hover #dt2"); 44 bg_color(dd1, white, "#dd1 doesn't change when hover #dt2"); 45 bg_color(dt2, white, "#dt2 doesn't change when hover #dt2"); 46 bg_color(dd2, white, "#dd2 doesn't change when hover #dt2"); 47 48 await new test_driver.Actions().pointerMove(0, 0, {origin: dd2}).send(); 49 50 bg_color(dt1, lime, "#dt1 should go lime when hover #dd2"); 51 bg_color(dd1, white, "#dd1 doesn't change when hover #dd2"); 52 bg_color(dt2, lime, "#dt2 should go lime when hover #dd2"); 53 bg_color(dd2, white, "#dd2 doesn't change when hover #dd2"); 54 }); 55 </script>