blob: a3a31d50024faa07294a5bbbc10b5c7e674cfb7c [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>fullscreen-env-initial</title>
<style>
#dummy {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
--fullscreen-inset-top: env(fullscreen-inset-top);
--fullscreen-inset-right: env(fullscreen-inset-right);
--fullscreen-inset-bottom: env(fullscreen-inset-bottom);
--fullscreen-inset-left: env(fullscreen-inset-left);
--fullscreen-auto-hide-duration: env(fullscreen-auto-hide-duration);
}
@supports (padding: env(fullscreen-inset-top)) {
#should-be-green {
background-color: green;
}
}
</style>
<script>
const ENVS = ["fullscreen-inset-top", "fullscreen-inset-right", "fullscreen-inset-bottom", "fullscreen-inset-left", "fullscreen-auto-hide-duration"];
function runTest() {
const results = document.getElementById("results");
const dummyStyle = window.getComputedStyle(document.getElementById("dummy"));
const checkForValue = (accumulator, value) => {
if (!accumulator)
return false;
return dummyStyle.getPropertyValue(`--${value}`) != "";
};
if (ENVS.reduce(checkForValue))
results.textContent = `${ENVS.join(" ")} all had initial values.`;
else
results.textContent = `Some/all of ${ENVS.join(" ")} had missing initial values.`;
}
window.addEventListener("load", runTest, false);
</script>
</head>
<body>
<span id="dummy"></span>
<p id="should-be-green">This paragraph should have a green background.</p>
<p id="results"></p>
</body>
</html>