fullscreen-display-contents.html (2003B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title> 4 Test that display:contents on fullscreen elements acts like 5 display:block 6 </title> 7 <meta charset="utf-8" /> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="../trusted-click.js"></script> 13 <link rel="author" href="mailto:masonf@chromium.org" /> 14 <link 15 rel="help" 16 href="https://fullscreen.spec.whatwg.org/#new-stacking-layer" 17 /> 18 <div id="target"></div> 19 <style> 20 #target { 21 display: contents; 22 background-color: green; 23 } 24 #target::backdrop { 25 display: contents; 26 } 27 </style> 28 29 <script> 30 promise_test(async (t) => { 31 const target = document.querySelector("#target"); 32 await test_driver.bless("fullscreen"); 33 await target.requestFullscreen(); 34 await new Promise((resolve) => requestAnimationFrame(resolve)); 35 assert_equals(document.fullscreenElement, target); 36 assert_equals( 37 getComputedStyle(target).display, 38 "block", 39 "fullscreen element should have display:block" 40 ); 41 assert_equals( 42 getComputedStyle(target, "::backdrop").display, 43 "block", 44 "fullscreen element's ::backdrop should have display:block" 45 ); 46 await document.exitFullscreen(); 47 new Promise((resolve) => requestAnimationFrame(resolve)); 48 assert_equals(document.fullscreenElement, null); 49 assert_equals( 50 getComputedStyle(target).display, 51 "contents", 52 "fullscreen element should have display:contents after exiting fullscreen" 53 ); 54 }); 55 </script> 56 </html>