Safe Inset Areas: add fixed elements with inset 0 for reference

web-platform-tests · Apr 16, 2024 · e649af3 · e649af3
1 parent 8d0cb42
commit e649af3
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 0 deletions.
diff --git a/demos/src/individual/safe-inset-areas/index.html b/demos/src/individual/safe-inset-areas/index.html
@@ -37,6 +37,13 @@
 			bottom: env(safe-area-inset-bottom, 0);
 			left: env(safe-area-inset-left, 0);
 		}
+
+		#fixer0 {
+			position: fixed;
+			pointer-events: none;
+			background-color: rgb(0 0 255 / 0.2);
+			inset: 0;
+		}
 	</style>
 </head>
 
@@ -52,6 +59,7 @@ <h1>No <code>viewport-fit</code></h1>
 	<div class="heightdebugger"></div>
 
     <div id="fixer"></div>
+	<div id="fixer0"></div>
 
 	<button id="btnOptions">options</button>
 	<dialog id="options">

diff --git a/demos/src/individual/safe-inset-areas/viewport-fit-auto.html b/demos/src/individual/safe-inset-areas/viewport-fit-auto.html
@@ -37,6 +37,13 @@
 			bottom: env(safe-area-inset-bottom, 0);
 			left: env(safe-area-inset-left, 0);
 		}
+
+		#fixer0 {
+			position: fixed;
+			pointer-events: none;
+			background-color: rgb(0 0 255 / 0.2);
+			inset: 0;
+		}
 	</style>
 </head>
 
@@ -52,6 +59,7 @@ <h1><code>viewport-fit=auto</code></h1>
 	<div class="heightdebugger"></div>
 
 	<div id="fixer"></div>
+	<div id="fixer0"></div>
 
 	<button id="btnOptions">options</button>
 	<dialog id="options">

diff --git a/demos/src/individual/safe-inset-areas/viewport-fit-contain.html b/demos/src/individual/safe-inset-areas/viewport-fit-contain.html
@@ -37,6 +37,13 @@
 			bottom: env(safe-area-inset-bottom, 0);
 			left: env(safe-area-inset-left, 0);
 		}
+
+		#fixer0 {
+			position: fixed;
+			pointer-events: none;
+			background-color: rgb(0 0 255 / 0.2);
+			inset: 0;
+		}
 	</style>
 </head>
 
@@ -52,6 +59,7 @@ <h1><code>viewport-fit=contain</code></h1>
 	<div class="heightdebugger"></div>
 
 	<div id="fixer"></div>
+	<div id="fixer0"></div>
 
 	<button id="btnOptions">options</button>
 	<dialog id="options">

diff --git a/demos/src/individual/safe-inset-areas/viewport-fit-cover.html b/demos/src/individual/safe-inset-areas/viewport-fit-cover.html
@@ -37,6 +37,13 @@
 			bottom: env(safe-area-inset-bottom, 0);
 			left: env(safe-area-inset-left, 0);
 		}
+
+		#fixer0 {
+			position: fixed;
+			pointer-events: none;
+			background-color: rgb(0 0 255 / 0.2);
+			inset: 0;
+		}
 	</style>
 </head>
 
@@ -52,6 +59,7 @@ <h1><code>viewport-fit=cover</code></h1>
 	<div class="heightdebugger"></div>
 
 	<div id="fixer"></div>
+	<div id="fixer0"></div>
 
 	<button id="btnOptions">options</button>
 	<dialog id="options">