file_fullscreen-scrollbar.html (5406B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Test for Bug 1201798</title> 6 <script src="/tests/SimpleTest/EventUtils.js"></script> 7 <script src="/tests/SimpleTest/SimpleTest.js"></script> 8 <script type="text/javascript" src="file_fullscreen-utils.js"></script> 9 <style> 10 html, body, #measure { 11 width: 100%; height: 100%; 12 margin: 0px; border: 0px; 13 } 14 div { 15 margin: 0px; border: 0px; 16 } 17 #ref-outer { width: 100px; height: 100px; overflow: scroll; } 18 #ref-inner { width: 100%; height: 100%; } 19 </style> 20 </head> 21 <body> 22 <div id="measure"></div> 23 <div style="height: 1000vh; width: 1000vw;"></div> 24 <div id="ref-outer"> 25 <div id="ref-inner"></div> 26 </div> 27 <div id="fullscreen"></div> 28 <script type="text/javascript"> 29 30 /** Test for Bug 1201798 */ 31 32 var info = msg => opener.info("[scrollbar] " + msg); 33 var ok = (cond, msg) => opener.ok(cond, "[scrollbar] " + msg); 34 var is = (a, b, msg) => opener.is(a, b, "[scrollbar] " + msg); 35 36 var gVerticalScrollbarWidth, gHorizontalScrollbarWidth; 37 var gMeasureDiv = document.getElementById("measure"); 38 var gFullscreenDiv = document.getElementById("fullscreen"); 39 40 function getMeasureRect() { 41 return gMeasureDiv.getBoundingClientRect(); 42 } 43 44 function triggerFrameReconstruction() { 45 info("Triggering a force frame reconstruction"); 46 var docElem = document.documentElement; 47 var wm = window.getComputedStyle(docElem).writingMode; 48 if (wm == "horizontal-tb") { 49 docElem.style.writingMode = "vertical-rl"; 50 } else { 51 docElem.style.writingMode = "horizontal-tb"; 52 } 53 docElem.getBoundingClientRect(); 54 } 55 56 function assertHasScrollbars(elem) { 57 var rect = getMeasureRect(); 58 info(`screen size: ${screen.width}x${screen.height}`); 59 info(`window inner size: ${window.innerWidth}x${window.innerHeight}`); 60 info(`rect size: ${rect.width}x${rect.height.height}`); 61 ok(rect.width <= screen.width - gVerticalScrollbarWidth, 62 `Should have width less than or equal to ${screen.width - gVerticalScrollbarWidth} indicating vertical scrollbar when ${elem} is in fullscreen`); 63 ok(rect.height <= screen.height - gHorizontalScrollbarWidth, 64 `Should have height less than or equal to ${screen.height - gHorizontalScrollbarWidth} indicating horizontal scrollbar when ${elem} is in fullscreen`); 65 } 66 67 function assertHasNoScrollbars(elem) { 68 var rect = getMeasureRect(); 69 info(`screen size: ${screen.width}x${screen.height}`); 70 info(`window inner size: ${window.innerWidth}x${window.innerHeight}`); 71 info(`rect size: ${rect.width}x${rect.height.height}`); 72 is(rect.width, screen.width, 73 `Should not have vertical scrollbar when ${elem} is in fullscreen`); 74 is(rect.height, screen.height, 75 `Should not have horizontal scrollbar when ${elem} is in fullscreen`); 76 } 77 78 function checkScrollbars(elem, shouldHaveScrollbars) { 79 is(document.fullscreenElement, elem, 80 "Should only check the current fullscreen element"); 81 var assertFunc = shouldHaveScrollbars ? 82 assertHasScrollbars : assertHasNoScrollbars; 83 assertFunc(elem); 84 triggerFrameReconstruction(); 85 assertFunc(elem); 86 } 87 88 function begin() { 89 // Check for the use of overlay scrollbars. We can only get an accurate 90 // answer to our media query if we are Chrome-privileged. Otherwise, the 91 // media query will never match. 92 let wrappedWindow = SpecialPowers.wrap(window); 93 if (wrappedWindow.matchMedia("(-moz-overlay-scrollbars)").matches) { 94 // If overlay scrollbar is enabled, the scrollbar is not measurable, 95 // so we skip this test in that case. 96 info("Skip this test because of overlay scrollbar"); 97 opener.nextTest(); 98 return; 99 } 100 101 const outerElement = document.getElementById("ref-outer"); 102 var rectOuter = outerElement.getBoundingClientRect(); 103 var rectInner = document.getElementById("ref-inner").getBoundingClientRect(); 104 info(`rectOuter: ${rectOuter.width} x ${rectOuter.height}`); 105 info(`rectInner: ${rectInner.width} x ${rectInner.height}`); 106 gVerticalScrollbarWidth = rectOuter.width - rectInner.width; 107 gHorizontalScrollbarWidth = rectOuter.height - rectInner.height; 108 ok(gVerticalScrollbarWidth != 0, "Should have vertical scrollbar"); 109 ok(gHorizontalScrollbarWidth != 0, "Should have horizontal scrollbar"); 110 info(`gVerticalScrollbarWidth: ${gVerticalScrollbarWidth}`); 111 info(`gHorizontalScrollbarWidth: ${gHorizontalScrollbarWidth}`); 112 113 // Remove the display of outerElement to simplify layout when window goes 114 // to fullscreen. 115 outerElement.style.display = "none"; 116 117 info("Entering fullscreen on root"); 118 addFullscreenChangeContinuation("enter", enteredFullscreenOnRoot); 119 document.documentElement.requestFullscreen(); 120 } 121 122 function enteredFullscreenOnRoot() { 123 checkScrollbars(document.documentElement, true); 124 info("Entering fullscreen on div"); 125 addFullscreenChangeContinuation("enter", enteredFullscreenOnDiv); 126 gFullscreenDiv.requestFullscreen(); 127 } 128 129 function enteredFullscreenOnDiv() { 130 checkScrollbars(gFullscreenDiv, false); 131 info("Exiting fullscreen on div"); 132 addFullscreenChangeContinuation("exit", exitedFullscreenOnDiv); 133 document.exitFullscreen(); 134 } 135 136 function exitedFullscreenOnDiv() { 137 checkScrollbars(document.documentElement, true); 138 info("Exiting fullscreen on root"); 139 addFullscreenChangeContinuation("exit", exitedFullscreenOnRoot); 140 document.exitFullscreen(); 141 } 142 143 function exitedFullscreenOnRoot() { 144 opener.nextTest(); 145 } 146 147 </script> 148 </body> 149 </html>