document-exit-fullscreen-nested-shadow-dom.html (2415B)
1 <!doctype html> 2 <title>Exiting fullscreen from a nested shadow root should work correctly.</title> 3 <link rel="author" title="Mozilla" href="https://mozilla.org"> 4 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1652155"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <div id="host"> 11 <button> 12 <!-- 13 This is gross, but testdriver doesn't let us click stuff in shadow 14 DOM, so here we are instead, using nested slots. 15 --> 16 fullscreen 17 </button> 18 </div> 19 <script> 20 promise_test(async function() { 21 let host = document.getElementById("host"); 22 host.attachShadow({ mode: "open" }).innerHTML = ` 23 <style> 24 #outer { width: 200px; height: 200px; background: blue } 25 </style> 26 <div id="outer"> 27 <slot></slot> 28 </div> 29 `; 30 31 let outer = host.shadowRoot.getElementById("outer"); 32 outer.attachShadow({ mode: "open" }).innerHTML = ` 33 <style> 34 #inner { width: 100px; height: 100px; background: purple } 35 </style> 36 <div id="inner"></div> 37 <slot></slot> 38 `; 39 40 let button = document.querySelector("button"); 41 42 let inner = outer.shadowRoot.getElementById("inner"); 43 let finished = new Promise(resolve => { 44 button.addEventListener("click", async function() { 45 await outer.requestFullscreen(); 46 assert_equals(outer.getRootNode().fullscreenElement, outer); 47 assert_equals(document.fullscreenElement, host); 48 49 button.addEventListener("click", async function() { 50 await inner.requestFullscreen(); 51 assert_equals(inner.getRootNode().fullscreenElement, inner); 52 assert_equals(document.fullscreenElement, host); 53 await document.exitFullscreen(); 54 assert_equals(inner.getRootNode().fullscreenElement, null); 55 assert_equals(outer.getRootNode().fullscreenElement, outer); 56 assert_equals(document.fullscreenElement, host); 57 resolve(); 58 }, { once: true }); 59 60 requestAnimationFrame(() => requestAnimationFrame(() => { 61 test_driver.click(button); 62 })); 63 }, { once: true }); 64 }); 65 66 test_driver.click(button); 67 await finished; 68 }, "Exiting fullscreen from a nested shadow root works correctly."); 69 </script>