modal-pseudo-class-in-has.html (3907B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Selectors Invalidation: :modal pseudo class in :has()</title> 4 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 5 <link rel="help" href="https://drafts.csswg.org/selectors/#relational"> 6 <link rel="help" href="https://drafts.csswg.org/selectors/#modal-state"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <style> 12 #subject:has(#dialog:modal) { color: green; } 13 #subject:has(#fullscreenTarget:modal) { color: blue; } 14 </style> 15 <div id="subject"> 16 This is some text. 17 <dialog id="dialog">This is a dialog</dialog> 18 <div id="fullscreenTarget">This is going to be fullscreened</div> 19 </div> 20 <script> 21 // Dialog tests 22 test(function() { 23 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)", 24 "ancestor should be black since dialog is not modal"); 25 dialog.show(); 26 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)", 27 "ancestor should be black since dialog is not modal"); 28 dialog.close(); 29 }, ":modal pseudo-class is not active with dialog.show()"); 30 test(function() { 31 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)", 32 "ancestor should be black"); 33 dialog.showModal(); 34 assert_equals(getComputedStyle(subject).color, "rgb(0, 128, 0)", 35 "ancestor should be green since dialog is shown modally"); 36 dialog.close(); 37 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)", 38 "ancestor should be black since dialog is closed"); 39 }, ":modal pseudo-class invalidation with showModal + close"); 40 test(function() { 41 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)", 42 "ancestor should be black"); 43 dialog.showModal(); 44 assert_equals(getComputedStyle(subject).color, "rgb(0, 128, 0)", 45 "ancestor should be green since dialog is shown modally"); 46 dialog.remove(); 47 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)", 48 "ancestor should be black since dialog is removed"); 49 }, ":modal pseudo-class invalidation with showModal + remove"); 50 51 // Fullscreen tests 52 let waitForFullscreenChange = () => { 53 return new Promise((resolve) => { 54 document.addEventListener("fullscreenchange", resolve, { once: true }); 55 }); 56 }; 57 promise_test(async function() { 58 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)", 59 "ancestor should be black"); 60 test_driver.bless("fullscreen", () => fullscreenTarget.requestFullscreen()); 61 await waitForFullscreenChange(); 62 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 255)", 63 "ancestor should be blue since target is fullscreen"); 64 document.exitFullscreen(); 65 await waitForFullscreenChange(); 66 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)", 67 "ancestor should be black since target is no longer fullscreen"); 68 }, ":modal pseudo-class invalidation with requestFullscreen + exitFullscreen"); 69 promise_test(async function() { 70 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)", 71 "ancestor should be black"); 72 test_driver.bless("fullscreen", () => fullscreenTarget.requestFullscreen()); 73 await waitForFullscreenChange(); 74 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 255)", 75 "ancestor should be blue since target is fullscreen"); 76 fullscreenTarget.remove(); 77 await waitForFullscreenChange(); 78 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)", 79 "ancestor should be black since target is removed"); 80 }, ":modal pseudo-class invalidation with requestFullscreen + remove"); 81 </script>