fullscreen-pseudo-class.html (1470B)
1 <!DOCTYPE html> 2 <title>:fullscreen pseudo-class</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/resources/testdriver.js"></script> 6 <script src="/resources/testdriver-vendor.js"></script> 7 <script src="../trusted-click.js"></script> 8 <div><div></div></div> 9 <script> 10 promise_test(async (t) => { 11 t.add_cleanup(() => { 12 if (document.fullscreenElement) { 13 return document.exitFullscreen(); 14 } 15 }); 16 const outer = document.querySelector("div"); 17 const inner = outer.firstChild; 18 19 // First request fullscreen for the outer element. 20 await trusted_request(outer); 21 await fullScreenChange(); 22 assert_equals(document.fullscreenElement, outer); 23 assert_true( 24 outer.matches(":fullscreen"), 25 "outer:fullscreen in simple fullscreen" 26 ); 27 assert_false( 28 inner.matches(":fullscreen"), 29 "inner:fullscreen in simple fullscreen" 30 ); 31 32 // Then request fullscreen for the inner element. 33 await trusted_request(inner); 34 // Although inner is the fullscreen element, both elements match the 35 // selector, as both have their fullscreen flag set. 36 assert_equals(document.fullscreenElement, inner); 37 assert_true( 38 inner.matches(":fullscreen"), 39 "inner:fullscreen in nested fullscreen" 40 ); 41 assert_true( 42 outer.matches(":fullscreen"), 43 "outer:fullscreen in nested fullscreen" 44 ); 45 }); 46 </script>