file_fullscreen-selector.html (5197B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test for Bug 1199522</title> 5 <script src="/tests/SimpleTest/EventUtils.js"></script> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <script type="application/javascript" src="file_fullscreen-utils.js"></script> 8 <style> 9 div { 10 position: fixed; 11 top: 20px; height: 50px; 12 opacity: 0.3; 13 border: 5px solid black; 14 box-sizing: border-box; 15 } 16 #fullscreen0 { 17 left: 50px; width: 50px; 18 background: #ff0000; 19 border-color: #800000; 20 } 21 #fullscreen1 { 22 left: 100px; width: 50px; 23 background: #00ff00; 24 border-color: #008000; 25 } 26 #fullscreen2 { 27 left: 150px; width: 50px; 28 background: #0000ff; 29 border-color: #000080; 30 } 31 </style> 32 </head> 33 <body> 34 <script type="application/javascript"> 35 36 /** Test for Bug 1199522 */ 37 38 function info(msg) { 39 opener.info("[selector] " + msg); 40 } 41 42 function ok(condition, msg) { 43 opener.ok(condition, "[selector] " + msg); 44 } 45 46 function is(a, b, msg) { 47 opener.is(a, b, "[selector] " + msg); 48 } 49 50 function rectEquals(rect1, rect2) { 51 return rect1.x == rect2.x && rect1.y == rect2.y && 52 rect1.width == rect2.width && rect1.height == rect2.height; 53 } 54 55 function getViewportRect() { 56 return new DOMRect(0, 0, window.innerWidth, window.innerHeight); 57 } 58 59 var fullscreenElems = []; 60 61 function checkFullscreenState(elem, hasState, viewportRect) { 62 var id = elem.id; 63 var rect = elem.getBoundingClientRect(); 64 if (hasState) { 65 ok(elem.matches(":fullscreen"), 66 `${id} should match selector ":fullscreen"`); 67 ok(rectEquals(rect, viewportRect), 68 `The bounding rect of ${id} should match the viewport`); 69 } else { 70 ok(!elem.matches(":fullscreen"), 71 `${id} should not match selector ":fullscreen"`); 72 // Position might vary because if one of our ancestors is fullscreen it 73 // contains us. 74 is(rect.width, elem.initialRect.width, 75 `The width of ${id} should match its initial state`); 76 is(rect.height, elem.initialRect.height, 77 `The height of ${id} should match its initial state`); 78 } 79 } 80 81 function checkFullscreenStates(states) { 82 var viewportRect = getViewportRect(); 83 fullscreenElems.forEach((elem, index) => { 84 checkFullscreenState(elem, states[index], viewportRect); 85 }); 86 } 87 88 function begin() { 89 fullscreenElems.push(document.getElementById('fullscreen0')); 90 fullscreenElems.push(document.getElementById('fullscreen1')); 91 fullscreenElems.push(document.getElementById('fullscreen2')); 92 93 var viewportRect = getViewportRect(); 94 for (var elem of fullscreenElems) { 95 var rect = elem.getBoundingClientRect(); 96 var id = elem.id; 97 elem.initialRect = rect; 98 ok(!elem.matches(":fullscreen"), 99 `${id} should not match selector ":fullscreen"`); 100 ok(!rectEquals(elem.initialRect, viewportRect), 101 `The initial bounding rect of ${id} should not match the viewport`); 102 } 103 104 info("Entering fullscreen on fullscreen0"); 105 addFullscreenChangeContinuation("enter", enter0); 106 fullscreenElems[0].requestFullscreen(); 107 } 108 109 function enter0() { 110 checkFullscreenStates([true, false, false]); 111 info("Entering fullscreen on fullscreen1"); 112 addFullscreenChangeContinuation("enter", enter1); 113 fullscreenElems[1].requestFullscreen(); 114 } 115 116 function enter1() { 117 checkFullscreenStates([true, true, false]); 118 info("Entering fullscreen on fullscreen2"); 119 addFullscreenChangeContinuation("enter", enter2); 120 fullscreenElems[2].requestFullscreen(); 121 } 122 123 function enter2() { 124 checkFullscreenStates([true, true, true]); 125 info("Leaving fullscreen on fullscreen2"); 126 addFullscreenChangeContinuation("exit", exit2); 127 document.exitFullscreen(); 128 } 129 130 function exit2() { 131 checkFullscreenStates([true, true, false]); 132 info("Leaving fullscreen on fullscreen1"); 133 addFullscreenChangeContinuation("exit", exit1); 134 document.exitFullscreen(); 135 } 136 137 function exit1() { 138 checkFullscreenStates([true, false, false]); 139 info("Leaving fullscreen on fullscreen0"); 140 addFullscreenChangeContinuation("exit", exit0); 141 document.exitFullscreen(); 142 } 143 144 function exit0() { 145 checkFullscreenStates([false, false, false]); 146 147 info("Entering fullscreen on all elements"); 148 var count = 0; 149 function listener() { 150 if (++count == 3) { 151 document.removeEventListener("fullscreenchange", listener); 152 // We bypassed our fullscreenchangeenters count since we didn't 153 // do our requests with a addFullscreenChangeContinuation, so we 154 // fix up the expected value now that we're done with this part 155 // of the test. 156 setFullscreenChangeEnters(1); 157 enterAll(); 158 } 159 } 160 document.addEventListener("fullscreenchange", listener); 161 fullscreenElems[0].requestFullscreen(); 162 fullscreenElems[1].requestFullscreen(); 163 fullscreenElems[2].requestFullscreen(); 164 } 165 166 function enterAll() { 167 checkFullscreenStates([true, true, true]); 168 info("Fully-exiting fullscreen"); 169 addFullscreenChangeContinuation("exit", exitAll); 170 synthesizeKey("KEY_Escape"); 171 } 172 173 function exitAll() { 174 checkFullscreenStates([false, false, false]); 175 opener.nextTest(); 176 } 177 178 </script> 179 </pre> 180 <div id="fullscreen0"> 181 <div id="fullscreen1"> 182 <div id="fullscreen2"> 183 </div> 184 </div> 185 </div> 186 </body> 187 </html>