LayoutTests/fullscreen/fullscreen-env-initial.html - WebKit - Git at Google

 <!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>
	<!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>