Update safe area inset demo pages to use env()
authortimothy_horton@apple.com <timothy_horton@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 31 Oct 2017 03:22:18 +0000 (03:22 +0000)
committertimothy_horton@apple.com <timothy_horton@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 31 Oct 2017 03:22:18 +0000 (03:22 +0000)
https://bugs.webkit.org/show_bug.cgi?id=179041

Reviewed by Simon Fraser.

* demos/safe-area-insets/1-default.html:
* demos/safe-area-insets/2-viewport-fit.html:
* demos/safe-area-insets/3-safe-area-constants.html:
* demos/safe-area-insets/4-min-max.html:
* demos/safe-area-insets/safe-areas.html:
Update to use env() instead of constant(), but keep constant() around
for backwards-compatibility.

Adjust the colors on the safe areas test page to look a little less holiday-like.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@224219 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/webkit.org/ChangeLog
Websites/webkit.org/demos/safe-area-insets/1-default.html
Websites/webkit.org/demos/safe-area-insets/2-viewport-fit.html
Websites/webkit.org/demos/safe-area-insets/3-safe-area-constants.html
Websites/webkit.org/demos/safe-area-insets/4-min-max.html
Websites/webkit.org/demos/safe-area-insets/safe-areas.html

index f486d46..ea8497e 100644 (file)
@@ -1,3 +1,20 @@
+2017-10-30  Tim Horton  <timothy_horton@apple.com>
+
+        Update safe area inset demo pages to use env()
+        https://bugs.webkit.org/show_bug.cgi?id=179041
+
+        Reviewed by Simon Fraser.
+
+        * demos/safe-area-insets/1-default.html:
+        * demos/safe-area-insets/2-viewport-fit.html:
+        * demos/safe-area-insets/3-safe-area-constants.html:
+        * demos/safe-area-insets/4-min-max.html:
+        * demos/safe-area-insets/safe-areas.html:
+        Update to use env() instead of constant(), but keep constant() around
+        for backwards-compatibility.
+
+        Adjust the colors on the safe areas test page to look a little less holiday-like.
+
 2017-10-16  Daniel Bates  <dabates@apple.com>
 
         No nightlies listed on nightly.webkit.org when using shipping Safari on macOS Sierra and OS X El Capitan
index a876726..eb34e97 100644 (file)
@@ -83,7 +83,7 @@
     <p>Welcome to my sample blog!</p>
     <p>This post is here to help demonstrate how easy it is to take an existing site, along with full-width bars and fixed-position elements, and make it take full advantage of iPhone X's edge-to-edge display.</p>
     <p>The actual post describing how to adopt the new API is over on the <a href="https://webkit.org/blog/7929/designing-websites-for-iphone-x/">WebKit blog</a>.</p>
-    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>
+    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>env()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>
     <p>I hope that it helps you adopt these new features in your websites.</p>
     </div>
     <div id="bottomBar"><a href="#">About Me</a><a href="#">Contact</a><a href="#">Site Map</a></div>
index 0c5db96..44b084e 100644 (file)
@@ -83,7 +83,7 @@
     <p>Welcome to my sample blog!</p>
     <p>This post is here to help demonstrate how easy it is to take an existing site, along with full-width bars and fixed-position elements, and make it take full advantage of iPhone X's edge-to-edge display.</p>
     <p>The actual post describing how to adopt the new API is over on the <a href="https://webkit.org/blog/7929/designing-websites-for-iphone-x/">WebKit blog</a>.</p>
-    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>
+    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>env()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>
     <p>I hope that it helps you adopt these new features in your websites.</p>
     </div>
     <div id="bottomBar"><a href="#">About Me</a><a href="#">Contact</a><a href="#">Site Map</a></div>
index adeafb4..728c3a0 100644 (file)
@@ -8,6 +8,7 @@
     #topBar {
         background-color: #729fcf;
         padding: constant(safe-area-inset-top) constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
+        padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
     }
 
     #topBar a {
 
         padding: 8px;
         padding-left: constant(safe-area-inset-left);
+        padding-left: env(safe-area-inset-left);
         padding-right: constant(safe-area-inset-right);
+        padding-right: env(safe-area-inset-right);
         padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
     }
 
     #bottomBar a {
@@ -72,7 +76,9 @@
 
         padding: 12px;
         padding-left: constant(safe-area-inset-left);
+        padding-left: env(safe-area-inset-left);
         padding-right: constant(safe-area-inset-right);
+        padding-right: env(safe-area-inset-right);
     }
 
     .post p:first-child {
@@ -89,7 +95,7 @@
     <p>Welcome to my sample blog!</p>
     <p>This post is here to help demonstrate how easy it is to take an existing site, along with full-width bars and fixed-position elements, and make it take full advantage of iPhone X's edge-to-edge display.</p>
     <p>The actual post describing how to adopt the new API is over on the <a href="https://webkit.org/blog/7929/designing-websites-for-iphone-x/">WebKit blog</a>.</p>
-    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>
+    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>env()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>
     <p>I hope that it helps you adopt these new features in your websites.</p>
     </div>
     <div id="bottomBar"><a href="#">About Me</a><a href="#">Contact</a><a href="#">Site Map</a></div>
index 5e61815..26a84f6 100644 (file)
@@ -7,7 +7,7 @@
     <style>
     #topBar {
         background-color: #729fcf;
-        padding: constant(safe-area-inset-top) constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
+        padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
     }
 
     #topBar a {
 
     @supports(padding: max(0px)) {
         #bottomBar {
-            padding-left: max(8px, constant(safe-area-inset-left));
-            padding-right: max(8px, constant(safe-area-inset-right));
-            padding-bottom: max(8px, constant(safe-area-inset-bottom));
+            padding-left: max(8px, env(safe-area-inset-left));
+            padding-right: max(8px, env(safe-area-inset-right));
+            padding-bottom: max(8px, env(safe-area-inset-bottom));
         }
 
         .post {
-            padding-left: max(12px, constant(safe-area-inset-left));
-            padding-right: max(12px, constant(safe-area-inset-right));
+            padding-left: max(12px, env(safe-area-inset-left));
+            padding-right: max(12px, env(safe-area-inset-right));
         }
     }
     </style>
@@ -97,7 +97,7 @@
     <p>Welcome to my sample blog!</p>
     <p>This post is here to help demonstrate how easy it is to take an existing site, along with full-width bars and fixed-position elements, and make it take full advantage of iPhone X's edge-to-edge display.</p>
     <p>The actual post describing how to adopt the new API is over on the <a href="https://webkit.org/blog/7929/designing-websites-for-iphone-x/">WebKit blog</a>.</p>
-    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>
+    <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>env()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>
     <p>I hope that it helps you adopt these new features in your websites.</p>
     </div>
     <div id="bottomBar"><a href="#">About Me</a><a href="#">Contact</a><a href="#">Site Map</a></div>
index 8eb4539..6d3e6db 100644 (file)
@@ -10,7 +10,7 @@
     }
 
     #unsafeArea {
-        background: repeating-linear-gradient(45deg, #a40000, #a40000 10px, #cc0000 10px, #cc0000 20px);
+        background: repeating-linear-gradient(45deg, rgb(246, 194, 194), rgb(246, 194, 194) 10px, rgb(238, 192, 193) 10px, rgb(238, 192, 193) 20px);
 
         position: fixed;
         top: 0;
@@ -20,7 +20,7 @@
     }
 
     #safeArea {
-        background-color: #4e9a06;
+        background-color: rgb(187, 251, 198);
 
         display: flex;
         align-items: center;
         
         position: fixed;
         top: constant(safe-area-inset-top);
+        top: env(safe-area-inset-top);
         left: constant(safe-area-inset-left);
+        left: env(safe-area-inset-left);
         right: constant(safe-area-inset-right);
+        right: env(safe-area-inset-right);
         bottom: constant(safe-area-inset-bottom);
+        bottom: env(safe-area-inset-bottom);
     }
 
     .horizontalInsetIndicator {
@@ -65,6 +69,7 @@
         position: fixed;
 
         left: calc(constant(safe-area-inset-left) + 45px);
+        left: calc(env(safe-area-inset-left) + 45px);
         width: 25px;
     }
 
     #leftInsetIndicator {
         left: 0;
         width: constant(safe-area-inset-left);
+        width: env(safe-area-inset-left);
     }
 
     #leftInsetIndicator .indicatorLabel {
         left: calc(constant(safe-area-inset-left) + 12px);
+        left: calc(env(safe-area-inset-left) + 12px);
     }
 
     #rightInsetIndicator {
         right: 0;
         width: constant(safe-area-inset-left);
+        width: env(safe-area-inset-left);
     }
 
     #rightInsetIndicator .indicatorLabel {
         right: calc(constant(safe-area-inset-right) + 12px);
+        right: calc(env(safe-area-inset-right) + 12px);
     }
 
     #bottomInsetIndicator {
         bottom: 0;
         height: constant(safe-area-inset-bottom);
+        height: env(safe-area-inset-bottom);
     }
 
     #bottomInsetIndicator .indicatorLabel {
         left: calc(constant(safe-area-inset-left) + 12px);
+        left: calc(env(safe-area-inset-left) + 12px);
         bottom: calc(constant(safe-area-inset-bottom) + 12px);
+        bottom: calc(env(safe-area-inset-bottom) + 12px);
     }
     </style>
 </head>
 <body>
     <div id="unsafeArea"></div>
     <div id="safeArea"><h1>Safe Area</h1></div>
-    <div id="leftInsetIndicator" class="horizontalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">constant(safe-area-inset-left)</div></div>
-    <div id="rightInsetIndicator" class="horizontalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">constant(safe-area-inset-right)</div></div>
-    <div id="bottomInsetIndicator" class="verticalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">constant(safe-area-inset-bottom)</div></div>
+    <div id="leftInsetIndicator" class="horizontalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">env(safe-area-inset-left)</div></div>
+    <div id="rightInsetIndicator" class="horizontalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">env(safe-area-inset-right)</div></div>
+    <div id="bottomInsetIndicator" class="verticalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">env(safe-area-inset-bottom)</div></div>
 </body>
 </html>
\ No newline at end of file