servo/tests/wpt/web-platform-tests/fullscreen/api/fullscreen-display-contents.html

49 lines
1.9 KiB
HTML

<!DOCTYPE html>
<html class="reftest-wait">
<title>Test that display:contents on fullscreen elements acts like display:block</title>
<meta charset="utf-8">
<link rel="author" href="mailto:masonf@chromium.org">
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
<link rel="match" href="fullscreen-display-contents-ref.html">
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<div id=target>Fullscreen Element</div>
<p>Fullscreen is display:<span id="computed-value-during">INVALID</span></p>
<p>Fullscreen::backdrop is display:<span id="computed-value-backdrop-during">INVALID</span></p>
<p>After exiting fullscreen, element is display:<span id="computed-value-after">INVALID</span></p>
<style>
#target {
display: contents;
background-color: green;
}
#target::backdrop {
display: contents;
}
</style>
<script>
target = document.querySelector("#target");
test_driver.bless("fullscreen")
.then(() => target.requestFullscreen())
.then(() => new Promise(resolve => requestAnimationFrame(resolve)))
.then(() => {
if (!target || document.fullscreenElement !== target) {
document.body.appendChild(document.createTextNode("FAIL: not fullscreen"));
} else {
document.getElementById("computed-value-during").textContent = getComputedStyle(target).display;
document.getElementById("computed-value-backdrop-during").textContent = getComputedStyle(target, "::backdrop").display;
}
})
.then(() => document.exitFullscreen())
.then(() => new Promise(resolve => requestAnimationFrame(resolve)))
.then(() => {
if (document.fullscreenElement !== null) {
document.body.appendChild(document.createTextNode("FAIL: unable to exit fullscreen"));
} else {
document.getElementById("computed-value-after").textContent = getComputedStyle(target).display;
document.documentElement.classList.remove("reftest-wait");
}
});
</script>