fullscreen-pseudo-class-in-has.html (2214B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Selectors Invalidation: :fullscreen 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 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 12 <style> 13 #subject:has(#target:fullscreen) { color: green; } 14 </style> 15 16 <div id="subject"> 17 This is some text. 18 <div id="target">This is going to be fullscreened</div> 19 </div> 20 21 <script> 22 let waitForFullscreenChange = () => { 23 return new Promise((resolve) => { 24 document.addEventListener("fullscreenchange", resolve, { once: true }); 25 }); 26 }; 27 28 promise_test(async function() { 29 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)", 30 "ancestor should be black"); 31 test_driver.bless("fullscreen", () => target.requestFullscreen()); 32 await waitForFullscreenChange(); 33 assert_equals(getComputedStyle(subject).color, "rgb(0, 128, 0)", 34 "ancestor should be green since target is fullscreen"); 35 document.exitFullscreen(); 36 await waitForFullscreenChange(); 37 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)", 38 "ancestor should be black since target is no longer fullscreen"); 39 }, ":fullscreen pseudo-class invalidation with requestFullscreen + exitFullscreen"); 40 41 promise_test(async function() { 42 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)", 43 "ancestor should be black"); 44 test_driver.bless("fullscreen", () => target.requestFullscreen()); 45 await waitForFullscreenChange(); 46 assert_equals(getComputedStyle(subject).color, "rgb(0, 128, 0)", 47 "ancestor should be green since target is fullscreen"); 48 target.remove(); 49 await waitForFullscreenChange(); 50 assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)", 51 "ancestor should be black since target is removed"); 52 }, ":fullscreen pseudo-class invalidation with requestFullscreen + remove"); 53 </script>