Skip to content

Commit 009886d

Browse files
NiklasMerzNiklasMerz
authored
Create edge.html
example page for safe area
1 parent 007505c commit 009886d

1 file changed

Lines changed: 84 additions & 0 deletions

File tree

‎app/src/main/assets/html/edge.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
6+
<meta name="theme-color" content="#ff0000">
7+
<title>Test Case</title>
8+
<style>
9+
:root {
10+
--status-color: green;
11+
--bottom-color: lime;
12+
13+
--safe-area-top: env(safe-area-inset-top, 0px);
14+
15+
background: var(--status-color) linear-gradient(to bottom, var(--status-color) 0px, canvas 1px);
16+
}
17+
18+
body {
19+
min-height: 100vh;
20+
min-height: 100dvh;
21+
margin: 0;
22+
box-sizing: border-box;
23+
padding: 0.5em;
24+
}
25+
26+
html:has(meta[content*="-fit=cover"]) body {
27+
padding: calc(env(safe-area-inset-top, 0px) + 0.5em) calc(env(safe-area-inset-right, 0px) + 0.5em) calc(env(safe-area-inset-bottom, 0px) + 0.5em) calc(env(safe-area-inset-left, 0px) + 0.5em);
28+
background: linear-gradient(to bottom, var(--status-color) 0px, var(--status-color) env(safe-area-inset-top, 0px), transparent env(safe-area-inset-top, 0px), transparent calc(100% - env(safe-area-inset-bottom, 0px)), var(--bottom-color) calc(100% - env(safe-area-inset-bottom, 0px)));
29+
background-repeat: no-repeat;
30+
}
31+
32+
div {
33+
margin: 1em 0;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
Hello World
39+
40+
<div>
41+
<button id="toggle">Toggle Safe Area</button>
42+
</div>
43+
44+
<div>
45+
<label>
46+
Native status bar background:
47+
<input id="picker" type="color" value="#ff0000">
48+
</label>
49+
<br>
50+
<label>
51+
Web safe-area-inset background:
52+
<input id="picker2" type="color" value="#009900">
53+
</label>
54+
</div>
55+
56+
<p>Safe Area Top: <span id="safe-area-top"></span></p>
57+
58+
<script>
59+
const vp = document.querySelector(`meta[name="viewport"]`);
60+
document.getElementById("toggle").addEventListener("click", (e) => {
61+
const attr = vp.getAttribute("content");
62+
console.log(attr);
63+
64+
if (attr.includes("cover")) {
65+
vp.setAttribute("content", attr.replace("cover", "auto"));
66+
} else {
67+
vp.setAttribute("content", attr.replace("auto", "cover"));
68+
}
69+
70+
document.querySelector("#safe-area-top").innerHTML = getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top");
71+
});
72+
73+
document.getElementById("picker").addEventListener("change", (e) => {
74+
document.querySelector(`meta[name="theme-color"]`).setAttribute("content", e.target.value);
75+
});
76+
77+
document.getElementById("picker2").addEventListener("change", (e) => {
78+
document.body.style.setProperty('--status-color', e.target.value);
79+
});
80+
81+
document.querySelector("#safe-area-top").innerHTML = getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top");
82+
</script>
83+
</body>
84+
</html>

0 commit comments

Comments
 (0)