Update safe area inset demo pages to use env()
[WebKit-https.git] / Websites / webkit.org / demos / safe-area-insets / safe-areas.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
5     <title>Designing Websites for iPhone X: Safe area illustration</title>
6     <link rel="stylesheet" type="text/css" href="style.css">
7     <style>
8     body {
9         height: 10000px;
10     }
11
12     #unsafeArea {
13         background: repeating-linear-gradient(45deg, rgb(246, 194, 194), rgb(246, 194, 194) 10px, rgb(238, 192, 193) 10px, rgb(238, 192, 193) 20px);
14
15         position: fixed;
16         top: 0;
17         left: 0;
18         right: 0;
19         bottom: 0;
20     }
21
22     #safeArea {
23         background-color: rgb(187, 251, 198);
24
25         display: flex;
26         align-items: center;
27         justify-content: center;
28         
29         position: fixed;
30         top: constant(safe-area-inset-top);
31         top: env(safe-area-inset-top);
32         left: constant(safe-area-inset-left);
33         left: env(safe-area-inset-left);
34         right: constant(safe-area-inset-right);
35         right: env(safe-area-inset-right);
36         bottom: constant(safe-area-inset-bottom);
37         bottom: env(safe-area-inset-bottom);
38     }
39
40     .horizontalInsetIndicator {
41         border-left: 4px solid white;
42         border-right: 4px solid white;
43
44         display: flex;
45         align-items: center;
46         justify-content: center;
47
48         position: fixed;
49
50         top: 45px;
51         height: 25px;
52     }
53
54     .horizontalInsetIndicator .midline {
55         border-top: 2px solid white;
56         border-bottom: 2px solid white;
57         width: 100%;
58         height: 0px;
59     }
60
61     .verticalInsetIndicator {
62         border-top: 4px solid white;
63         border-bottom: 4px solid white;
64
65         display: flex;
66         align-items: center;
67         justify-content: center;
68
69         position: fixed;
70
71         left: calc(constant(safe-area-inset-left) + 45px);
72         left: calc(env(safe-area-inset-left) + 45px);
73         width: 25px;
74     }
75
76     .verticalInsetIndicator .midline {
77         border-left: 2px solid white;
78         border-right: 2px solid white;
79         width: 0px;
80         height: 100%;
81     }
82
83     .indicatorLabel {
84         position: fixed;
85         font-family: monospace;
86         font-size: 12pt;
87     }
88
89     #leftInsetIndicator {
90         left: 0;
91         width: constant(safe-area-inset-left);
92         width: env(safe-area-inset-left);
93     }
94
95     #leftInsetIndicator .indicatorLabel {
96         left: calc(constant(safe-area-inset-left) + 12px);
97         left: calc(env(safe-area-inset-left) + 12px);
98     }
99
100     #rightInsetIndicator {
101         right: 0;
102         width: constant(safe-area-inset-left);
103         width: env(safe-area-inset-left);
104     }
105
106     #rightInsetIndicator .indicatorLabel {
107         right: calc(constant(safe-area-inset-right) + 12px);
108         right: calc(env(safe-area-inset-right) + 12px);
109     }
110
111     #bottomInsetIndicator {
112         bottom: 0;
113         height: constant(safe-area-inset-bottom);
114         height: env(safe-area-inset-bottom);
115     }
116
117     #bottomInsetIndicator .indicatorLabel {
118         left: calc(constant(safe-area-inset-left) + 12px);
119         left: calc(env(safe-area-inset-left) + 12px);
120         bottom: calc(constant(safe-area-inset-bottom) + 12px);
121         bottom: calc(env(safe-area-inset-bottom) + 12px);
122     }
123     </style>
124 </head>
125 <body>
126     <div id="unsafeArea"></div>
127     <div id="safeArea"><h1>Safe Area</h1></div>
128     <div id="leftInsetIndicator" class="horizontalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">env(safe-area-inset-left)</div></div>
129     <div id="rightInsetIndicator" class="horizontalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">env(safe-area-inset-right)</div></div>
130     <div id="bottomInsetIndicator" class="verticalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">env(safe-area-inset-bottom)</div></div>
131 </body>
132 </html>