From 25fd5514531a9709a6b6e2042562553653ae7e7b Mon Sep 17 00:00:00 2001
From: Bramus <bramus@bram.us>
Date: Fri, 11 Oct 2024 16:33:26 +0200
Subject: [PATCH] Safe Inset Areas: add fixed lines on trbl edges for reference

---
 .../individual/safe-inset-areas/index.html    | 37 +++++++++++++++++++
 .../safe-inset-areas/viewport-fit-auto.html   | 37 +++++++++++++++++++
 .../viewport-fit-contain.html                 | 37 +++++++++++++++++++
 .../safe-inset-areas/viewport-fit-cover.html  | 37 +++++++++++++++++++
 4 files changed, 148 insertions(+)

diff --git a/demos/src/individual/safe-inset-areas/index.html b/demos/src/individual/safe-inset-areas/index.html
index 83fd1a7..dc09631 100644
--- a/demos/src/individual/safe-inset-areas/index.html
+++ b/demos/src/individual/safe-inset-areas/index.html
@@ -44,6 +44,38 @@
 			background-color: rgb(0 0 255 / 0.2);
 			inset: 0;
 		}
+
+		#bottom, #top {
+			position: fixed;
+			height: 5px;
+			pointer-events: none;
+			background: lime;
+			z-index: 1;
+			width: 75vw;
+			left: 12.5vw;
+		}
+		#bottom {
+			bottom: 0;
+		}
+		#top {
+			top: 0
+		}
+
+		#left, #right {
+			position: fixed;
+			width: 5px;
+			pointer-events: none;
+			background: hotpink;
+			z-index: 1;
+			height: 75vh;
+			top: 12.5vh;
+		}
+		#left {
+			left: 0;
+		}
+		#right {
+			right: 0
+		}
 	</style>
 </head>
 
@@ -61,6 +93,11 @@ <h1>No <code>viewport-fit</code></h1>
     <div id="fixer"></div>
 	<div id="fixer0"></div>
 
+	<div id="top"></div>
+	<div id="bottom"></div>
+	<div id="left"></div>
+	<div id="right"></div>
+
 	<button id="btnOptions">options</button>
 	<dialog id="options">
 		<header>
diff --git a/demos/src/individual/safe-inset-areas/viewport-fit-auto.html b/demos/src/individual/safe-inset-areas/viewport-fit-auto.html
index 809130a..a9ceca6 100644
--- a/demos/src/individual/safe-inset-areas/viewport-fit-auto.html
+++ b/demos/src/individual/safe-inset-areas/viewport-fit-auto.html
@@ -44,6 +44,38 @@
 			background-color: rgb(0 0 255 / 0.2);
 			inset: 0;
 		}
+
+		#bottom, #top {
+			position: fixed;
+			height: 5px;
+			pointer-events: none;
+			background: lime;
+			z-index: 1;
+			width: 75vw;
+			left: 12.5vw;
+		}
+		#bottom {
+			bottom: 0;
+		}
+		#top {
+			top: 0
+		}
+
+	#left, #right {
+		position: fixed;
+		width: 5px;
+		pointer-events: none;
+		background: hotpink;
+		z-index: 1;
+		height: 75vh;
+		top: 12.5vh;
+	}
+	#left {
+		left: 0;
+	}
+	#right {
+		right: 0
+	}
 	</style>
 </head>
 
@@ -61,6 +93,11 @@ <h1><code>viewport-fit=auto</code></h1>
 	<div id="fixer"></div>
 	<div id="fixer0"></div>
 
+	<div id="top"></div>
+	<div id="bottom"></div>
+	<div id="left"></div>
+	<div id="right"></div>
+
 	<button id="btnOptions">options</button>
 	<dialog id="options">
 		<header>
diff --git a/demos/src/individual/safe-inset-areas/viewport-fit-contain.html b/demos/src/individual/safe-inset-areas/viewport-fit-contain.html
index 793c7cc..95f71aa 100644
--- a/demos/src/individual/safe-inset-areas/viewport-fit-contain.html
+++ b/demos/src/individual/safe-inset-areas/viewport-fit-contain.html
@@ -44,6 +44,38 @@
 			background-color: rgb(0 0 255 / 0.2);
 			inset: 0;
 		}
+
+		#bottom, #top {
+			position: fixed;
+			height: 5px;
+			pointer-events: none;
+			background: lime;
+			z-index: 1;
+			width: 75vw;
+			left: 12.5vw;
+		}
+		#bottom {
+			bottom: 0;
+		}
+		#top {
+			top: 0
+		}
+
+	#left, #right {
+		position: fixed;
+		width: 5px;
+		pointer-events: none;
+		background: hotpink;
+		z-index: 1;
+		height: 75vh;
+		top: 12.5vh;
+	}
+	#left {
+		left: 0;
+	}
+	#right {
+		right: 0
+	}
 	</style>
 </head>
 
@@ -61,6 +93,11 @@ <h1><code>viewport-fit=contain</code></h1>
 	<div id="fixer"></div>
 	<div id="fixer0"></div>
 
+	<div id="top"></div>
+	<div id="bottom"></div>
+	<div id="left"></div>
+	<div id="right"></div>
+
 	<button id="btnOptions">options</button>
 	<dialog id="options">
 		<header>
diff --git a/demos/src/individual/safe-inset-areas/viewport-fit-cover.html b/demos/src/individual/safe-inset-areas/viewport-fit-cover.html
index 66a8686..fac2f08 100644
--- a/demos/src/individual/safe-inset-areas/viewport-fit-cover.html
+++ b/demos/src/individual/safe-inset-areas/viewport-fit-cover.html
@@ -44,6 +44,38 @@
 			background-color: rgb(0 0 255 / 0.2);
 			inset: 0;
 		}
+
+		#bottom, #top {
+			position: fixed;
+			height: 5px;
+			pointer-events: none;
+			background: lime;
+			z-index: 1;
+			width: 75vw;
+			left: 12.5vw;
+		}
+		#bottom {
+			bottom: 0;
+		}
+		#top {
+			top: 0
+		}
+
+	#left, #right {
+		position: fixed;
+		width: 5px;
+		pointer-events: none;
+		background: hotpink;
+		z-index: 1;
+		height: 75vh;
+		top: 12.5vh;
+	}
+	#left {
+		left: 0;
+	}
+	#right {
+		right: 0
+	}
 	</style>
 </head>
 
@@ -61,6 +93,11 @@ <h1><code>viewport-fit=cover</code></h1>
 	<div id="fixer"></div>
 	<div id="fixer0"></div>
 
+	<div id="top"></div>
+	<div id="bottom"></div>
+	<div id="left"></div>
+	<div id="right"></div>
+
 	<button id="btnOptions">options</button>
 	<dialog id="options">
 		<header>