Skip to content

Commit bf4540b

Browse files
mfreed7chromium-wpt-export-bot
mfreed7
authored and
chromium-wpt-export-bot
committed
Add a test for fullscreen for the A/B/A case
See the discussion at [1] for more context. This test requests fullscreen on A, then B, then A, where A and B are sibling divs. All three requests should succeed, and at the end, A should be topmost (and the fullscreen element) with both A and B in the top layer. [1] whatwg/fullscreen#223 Change-Id: I3f35dda5b9eb1bc24201616bb5bb4949d20fd170 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4501251 Commit-Queue: Mason Freed <[email protected]> Reviewed-by: Joey Arhar <[email protected]> Auto-Submit: Mason Freed <[email protected]> Cr-Commit-Position: refs/heads/main@{#1141456}
1 parent 6e3917f commit bf4540b

File tree

2 files changed

+78
-0
lines changed

2 files changed

+78
-0
lines changed

‎fullscreen/api/fullscreen-reordering.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<title>Re-requesting fullscreen doesn't fail but doesn't change order</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="../../html/semantics/popovers/resources/popover-utils.js"></script>
8+
9+
<div class="elements">
10+
<div id="A">Element A</div>
11+
<div id="B">Element B</div>
12+
</div>
13+
14+
<style>
15+
.elements>div {
16+
width:200px;
17+
height:200px;
18+
}
19+
#A { background: blue; }
20+
#B { background: green; }
21+
</style>
22+
23+
<script>
24+
promise_test(async (t) => {
25+
t.add_cleanup(async () => {
26+
while (document.fullscreenElement)
27+
await document.exitFullscreen();
28+
});
29+
document.onfullscreenerror = () => assert_unreached('fullscreenerror should not happen');
30+
const A = document.getElementById('A');
31+
const B = document.getElementById('B');
32+
assert_true(!isTopLayer(A) && !isTopLayer(B));
33+
await blessTopLayer(document.body);
34+
await A.requestFullscreen();
35+
assert_equals(document.fullscreenElement,A,'first A request');
36+
assert_true(isTopLayer(A),'A top layer');
37+
await blessTopLayer(A);
38+
try {
39+
await B.requestFullscreen();
40+
} catch (error) {
41+
assert_unreached('The second call to requestFullscreen rejected - it should be possible to put siblings into fullscreen together');
42+
}
43+
assert_equals(document.fullscreenElement,B,'B request');
44+
assert_true(isTopLayer(B),'B top layer');
45+
assert_true(isTopLayer(A),'A still top layer');
46+
await blessTopLayer(B);
47+
await A.requestFullscreen();
48+
assert_true(isTopLayer(A),'A is still top layer');
49+
assert_true(isTopLayer(B),'B is still top layer');
50+
assert_equals(document.fullscreenElement,A,'A is moved back to the top of the top layer stack');
51+
assert_equals(document.elementFromPoint(10,10),A,'A should be topmost');
52+
53+
await document.exitFullscreen();
54+
assert_equals(document.fullscreenElement,B,'B goes back to being the fullscreen element');
55+
assert_true(isTopLayer(B),'B is still top layer');
56+
assert_false(isTopLayer(A),'A is no longer top layer');
57+
await document.exitFullscreen();
58+
assert_equals(document.fullscreenElement,null,'Both closed');
59+
assert_false(isTopLayer(A),'A is no longer top layer');
60+
assert_false(isTopLayer(B),'B is no longer top layer');
61+
}, 'Requesting fullscreen on A, then B, then A');
62+
</script>

‎html/semantics/popovers/resources/popover-utils.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,22 @@ async function sendEnter() {
4747
function isElementVisible(el) {
4848
return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
4949
}
50+
function isTopLayer(el) {
51+
// A bit of a hack. Just test a few properties of the ::backdrop pseudo
52+
// element that change when in the top layer.
53+
const properties = ['right','background'];
54+
const testEl = document.createElement('div');
55+
document.body.appendChild(testEl);
56+
const computedStyle = getComputedStyle(testEl, '::backdrop');
57+
const nonTopLayerValues = properties.map(p => computedStyle[p]);
58+
testEl.remove();
59+
for(let i=0;i<properties.length;++i) {
60+
if (getComputedStyle(el,'::backdrop')[properties[i]] !== nonTopLayerValues[i]) {
61+
return true;
62+
}
63+
}
64+
return false;
65+
}
5066
async function finishAnimations(popover) {
5167
popover.getAnimations({subtree: true}).forEach(animation => animation.finish());
5268
await waitForRender();

0 commit comments

Comments
 (0)