Add env() as an alias of constant()
authortimothy_horton@apple.com <timothy_horton@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 22 Sep 2017 20:15:14 +0000 (20:15 +0000)
committertimothy_horton@apple.com <timothy_horton@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 22 Sep 2017 20:15:14 +0000 (20:15 +0000)
https://bugs.webkit.org/show_bug.cgi?id=177371

Reviewed by Simon Fraser.

Source/WebCore:

* css/CSSValueKeywords.in:
* css/CSSVariableData.cpp:
(WebCore::CSSVariableData::checkVariablesForCyclesWithRange const):
(WebCore::CSSVariableData::resolveTokenRange const):
* css/parser/CSSVariableParser.cpp:
(WebCore::classifyBlock):
Add env() as an alias of constant() everywhere it is mentioned.

Source/WebInspectorUI:

* UserInterface/Models/CSSKeywordCompletions.js:
(WI.CSSKeywordCompletions.forProperty):
(WI.CSSKeywordCompletions.forFunction):
Add autocomplete support for env().

LayoutTests:

* TestExpectations:
* platform/ios-11/TestExpectations:
Duplicated constant() tests with env() instead.

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

18 files changed:
LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/fast/css/variables/env/invalid-env-name-fallback-expected.html [new file with mode: 0644]
LayoutTests/fast/css/variables/env/invalid-env-name-fallback.html [new file with mode: 0644]
LayoutTests/fast/css/variables/env/ios/safe-area-inset-env-set-expected.html [new file with mode: 0644]
LayoutTests/fast/css/variables/env/ios/safe-area-inset-env-set.html [new file with mode: 0644]
LayoutTests/fast/css/variables/env/safe-area-inset-env-cannot-override-expected.html [new file with mode: 0644]
LayoutTests/fast/css/variables/env/safe-area-inset-env-cannot-override.html [new file with mode: 0644]
LayoutTests/fast/css/variables/env/safe-area-inset-env-zero-expected.html [new file with mode: 0644]
LayoutTests/fast/css/variables/env/safe-area-inset-env-zero.html [new file with mode: 0644]
LayoutTests/platform/ios/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/css/CSSValueKeywords.in
Source/WebCore/css/CSSVariableData.cpp
Source/WebCore/css/parser/CSSVariableParser.cpp
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js
Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js

index 6c152db..4ad0a4f 100644 (file)
@@ -1,3 +1,14 @@
+2017-09-22  Tim Horton  <timothy_horton@apple.com>
+
+        Add env() as an alias of constant()
+        https://bugs.webkit.org/show_bug.cgi?id=177371
+
+        Reviewed by Simon Fraser.
+
+        * TestExpectations:
+        * platform/ios-11/TestExpectations:
+        Duplicated constant() tests with env() instead.
+
 2017-09-22  Ryan Haddad  <ryanhaddad@apple.com>
 
         Unreviewed test gardening for iOS.
index ca0fcdd..6a9c22c 100644 (file)
@@ -35,6 +35,7 @@ media/ios [ Skip ]
 media/controls/ipad [ Skip ]
 fast/text-autosizing [ Skip ]
 fast/css/variables/constants/ios [ Skip ]
+fast/css/variables/env/ios [ Skip ]
 http/tests/preload/viewport [ Skip ]
 
 # window.showModalDialog is only tested in DumpRenderTree on Mac.
diff --git a/LayoutTests/fast/css/variables/env/invalid-env-name-fallback-expected.html b/LayoutTests/fast/css/variables/env/invalid-env-name-fallback-expected.html
new file mode 100644 (file)
index 0000000..5cb46a9
--- /dev/null
@@ -0,0 +1,14 @@
+<style>
+div {
+    position: absolute;
+    left: 100px;
+    top: 100px;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+}
+</style>
+<body>
+<div></div>
+<p>The box should be at 100, 100.</p>
+
diff --git a/LayoutTests/fast/css/variables/env/invalid-env-name-fallback.html b/LayoutTests/fast/css/variables/env/invalid-env-name-fallback.html
new file mode 100644 (file)
index 0000000..87dfc0d
--- /dev/null
@@ -0,0 +1,21 @@
+<script>
+if (window.internals)
+    internals.settings.setConstantPropertiesEnabled(true);
+</script>
+<style>
+div {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+
+    --valid-fallback: 100px;
+
+    top: env(some-unknown-name, var(--valid-fallback));
+    left: env(--some-invalid-name, var(--valid-fallback));
+}
+</style>
+<body>
+<div></div>
+<p>The box should be at 100, 100.</p>
+
diff --git a/LayoutTests/fast/css/variables/env/ios/safe-area-inset-env-set-expected.html b/LayoutTests/fast/css/variables/env/ios/safe-area-inset-env-set-expected.html
new file mode 100644 (file)
index 0000000..c4dee78
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
+<head>
+    <script>
+    if (window.internals)
+        internals.settings.setViewportFitEnabled(true);
+    </script>
+    <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
+    <style>
+    #a {
+        position: absolute;
+        left: 25px;
+        top: 50px;
+        width: 100px;
+        height: 100px;
+        background-color: green;
+    }
+
+    #b {
+        position: absolute;
+        left: 75px;
+        top: 100px;
+        width: 100px;
+        height: 100px;
+        background-color: blue;
+    }
+    </style>
+</head>
+<body>
+    <div id="a"></div>
+    <div id="b"></div>
+    <p>The boxes should be at 25, 50 and 75, 100.</p>
+</body>
\ No newline at end of file
diff --git a/LayoutTests/fast/css/variables/env/ios/safe-area-inset-env-set.html b/LayoutTests/fast/css/variables/env/ios/safe-area-inset-env-set.html
new file mode 100644 (file)
index 0000000..dd7a8a4
--- /dev/null
@@ -0,0 +1,56 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
+<script>
+if (window.internals) {
+    internals.settings.setConstantPropertiesEnabled(true);
+    internals.settings.setViewportFitEnabled(true);
+}
+</script>
+<head>
+    <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
+    <style>
+        #a {
+            position: absolute;
+            left: env(safe-area-inset-right);
+            top: env(safe-area-inset-top);
+            width: 100px;
+            height: 100px;
+            background-color: green;
+        }
+
+        #b {
+            position: absolute;
+            left: env(safe-area-inset-bottom);
+            top: env(safe-area-inset-left);
+            width: 100px;
+            height: 100px;
+            background-color: blue;
+        }
+    </style>
+    <script>
+        function getUIScript()
+        {
+            return `
+            (function() {
+                uiController.setSafeAreaInsets(50, 25, 75, 100);
+                uiController.doAfterVisibleContentRectUpdate(function () {
+                    uiController.uiScriptComplete();
+                });
+            })();`
+        }
+
+        if (window.testRunner) {
+            testRunner.waitUntilDone();
+            window.onload = function () {
+                testRunner.runUIScript(getUIScript(), function(result) {
+                    testRunner.notifyDone();
+                });
+            }
+        }
+    </script>
+</head>
+<body>
+    <div id="a"></div>
+    <div id="b"></div>
+    <p>The boxes should be at 25, 50 and 75, 100.</p>
+</body>
+
diff --git a/LayoutTests/fast/css/variables/env/safe-area-inset-env-cannot-override-expected.html b/LayoutTests/fast/css/variables/env/safe-area-inset-env-cannot-override-expected.html
new file mode 100644 (file)
index 0000000..fb05184
--- /dev/null
@@ -0,0 +1,24 @@
+<style>
+#a {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+}
+
+#b {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100px;
+    height: 100px;
+    background-color: blue;
+}
+</style>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+<p>The boxes should both be at 0, 0.</p>
+
diff --git a/LayoutTests/fast/css/variables/env/safe-area-inset-env-cannot-override.html b/LayoutTests/fast/css/variables/env/safe-area-inset-env-cannot-override.html
new file mode 100644 (file)
index 0000000..296823a
--- /dev/null
@@ -0,0 +1,37 @@
+<script>
+if (window.internals)
+    internals.settings.setConstantPropertiesEnabled(true);
+</script>
+<style>
+html {
+    --safe-area-inset-bottom: 50px;
+    safe-area-inset-left: 50px;
+}
+
+#a {
+    position: absolute;
+    --safe-area-inset-right: 100px;
+    safe-area-inset-top: 100px;
+    left: env(safe-area-inset-right);
+    top: env(safe-area-inset-top);
+    width: 100px;
+    height: 100px;
+    background-color: green;
+}
+
+#b {
+    position: absolute;
+    --safe-area-inset-bottom: 200px;
+    safe-area-inset-left: 200px;
+    left: env(safe-area-inset-bottom);
+    top: env(safe-area-inset-left);
+    width: 100px;
+    height: 100px;
+    background-color: blue;
+}
+</style>
+<body>
+<div id="a"></div>
+<div id="b"></div>
+<p>The boxes should both be at 0, 0.</p>
+
diff --git a/LayoutTests/fast/css/variables/env/safe-area-inset-env-zero-expected.html b/LayoutTests/fast/css/variables/env/safe-area-inset-env-zero-expected.html
new file mode 100644 (file)
index 0000000..058d492
--- /dev/null
@@ -0,0 +1,14 @@
+<style>
+div {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+}
+</style>
+<body>
+<div></div>
+<p>The box should be at 0, 0.</p>
+
diff --git a/LayoutTests/fast/css/variables/env/safe-area-inset-env-zero.html b/LayoutTests/fast/css/variables/env/safe-area-inset-env-zero.html
new file mode 100644 (file)
index 0000000..cebfbc4
--- /dev/null
@@ -0,0 +1,21 @@
+<script>
+if (window.internals)
+    internals.settings.setConstantPropertiesEnabled(true);
+</script>
+<style>
+div {
+    position: absolute;
+    left: 100px;
+    top: 100px;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+
+    top: env(safe-area-inset-top);
+    left: env(safe-area-inset-left);
+}
+</style>
+<body>
+<div></div>
+<p>The box should be at 0, 0.</p>
+
index 995c9e7..1329dc7 100644 (file)
@@ -506,6 +506,7 @@ fast/viewport/ios/viewport-fit-contain.html [ Pass ]
 fast/viewport/ios/viewport-fit-cover.html [ Pass ]
 fast/viewport/ios/viewport-fit-auto.html [ Pass ]
 fast/css/variables/constants/ios [ Pass ]
+fast/css/variables/env/ios [ Pass ]
 
 # This test relies on APIs not available on iOS
 fast/images/animated-image-mp4.html [ Skip ]
index f53e166..0852a6b 100644 (file)
@@ -1,3 +1,18 @@
+2017-09-22  Tim Horton  <timothy_horton@apple.com>
+
+        Add env() as an alias of constant()
+        https://bugs.webkit.org/show_bug.cgi?id=177371
+
+        Reviewed by Simon Fraser.
+
+        * css/CSSValueKeywords.in:
+        * css/CSSVariableData.cpp:
+        (WebCore::CSSVariableData::checkVariablesForCyclesWithRange const):
+        (WebCore::CSSVariableData::resolveTokenRange const):
+        * css/parser/CSSVariableParser.cpp:
+        (WebCore::classifyBlock):
+        Add env() as an alias of constant() everywhere it is mentioned.
+
 2017-09-22  Basuke Suzuki  <Basuke.Suzuki@sony.com>
 
         [Curl] Use didReceiveBuffer instead of didReceiveData
index 4c94e3e..c76ea7a 100644 (file)
@@ -847,9 +847,10 @@ var
 -internal-variable-value
 
 //
-// UA Constants
+// Environment Variables
 //
 constant
+env
 
 //
 // CSS_PROP_BREAK_BEFORE/AFTER/INSIDE
index 82b2dd9..8add6fb 100644 (file)
@@ -100,7 +100,7 @@ bool CSSVariableData::checkVariablesForCycles(const AtomicString& name, CustomPr
 bool CSSVariableData::checkVariablesForCyclesWithRange(CSSParserTokenRange range, CustomPropertyValueMap& customProperties, HashSet<AtomicString>& seenProperties, HashSet<AtomicString>& invalidProperties) const
 {
     while (!range.atEnd()) {
-        if (range.peek().functionId() == CSSValueVar || range.peek().functionId() == CSSValueConstant) {
+        if (range.peek().functionId() == CSSValueVar || range.peek().functionId() == CSSValueConstant || range.peek().functionId() == CSSValueEnv) {
             CSSParserTokenRange block = range.consumeBlock();
             
             block.consumeWhitespace();
@@ -170,7 +170,7 @@ bool CSSVariableData::resolveTokenRange(const CustomPropertyValueMap& customProp
 {
     bool success = true;
     while (!range.atEnd()) {
-        if (range.peek().functionId() == CSSValueVar || range.peek().functionId() == CSSValueConstant)
+        if (range.peek().functionId() == CSSValueVar || range.peek().functionId() == CSSValueConstant || range.peek().functionId() == CSSValueEnv)
             success &= resolveVariableReference(customProperties, range.consumeBlock(), result);
         else
             result.append(range.consume());
index 68f152c..0799d7b 100644 (file)
@@ -70,7 +70,7 @@ static bool classifyBlock(CSSParserTokenRange range, bool& hasReferences, bool&
                 hasReferences = true;
                 continue;
             }
-            if (token.functionId() == CSSValueConstant && parserContext.constantPropertiesEnabled) {
+            if ((token.functionId() == CSSValueConstant || token.functionId() == CSSValueEnv) && parserContext.constantPropertiesEnabled) {
                 if (!isValidConstantReference(block, hasAtApplyRule, parserContext))
                     return false; // Bail if any references are invalid
                 hasReferences = true;
index f4b98f9..f41e35e 100644 (file)
@@ -1,3 +1,15 @@
+2017-09-22  Tim Horton  <timothy_horton@apple.com>
+
+        Add env() as an alias of constant()
+        https://bugs.webkit.org/show_bug.cgi?id=177371
+
+        Reviewed by Simon Fraser.
+
+        * UserInterface/Models/CSSKeywordCompletions.js:
+        (WI.CSSKeywordCompletions.forProperty):
+        (WI.CSSKeywordCompletions.forFunction):
+        Add autocomplete support for env().
+
 2017-09-21  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Add autocompletion suggestions for CSS functions (constant(), linear-gradient(), etc)
index 5686042..434f841 100644 (file)
@@ -97,7 +97,7 @@ WI.CSSCompletions = class CSSCompletions
                 return;
 
             var propertyNamesForCodeMirror = {};
-            var valueKeywordsForCodeMirror = {"inherit": true, "initial": true, "unset": true, "revert": true, "var": true, "constant": true};
+            var valueKeywordsForCodeMirror = {"inherit": true, "initial": true, "unset": true, "revert": true, "var": true, "constant": true, "env": true};
             var colorKeywordsForCodeMirror = {};
 
             function nameForCodeMirror(name)
index 1c0bc0b..74794d0 100644 (file)
@@ -33,7 +33,7 @@ WI.CSSKeywordCompletions = {};
 
 WI.CSSKeywordCompletions.forProperty = function(propertyName)
 {
-    let acceptedKeywords = ["initial", "unset", "revert", "var()", "constant()"];
+    let acceptedKeywords = ["initial", "unset", "revert", "var()", "constant()", "env()"];
     let isNotPrefixed = propertyName.charAt(0) !== "-";
 
     if (propertyName in WI.CSSKeywordCompletions._propertyKeywordMap)
@@ -68,7 +68,7 @@ WI.CSSKeywordCompletions.forFunction = function(functionName)
 
     if (functionName === "var")
         suggestions = [];
-    else if (functionName === "constant")
+    else if (functionName === "constant" || functionName == "env")
         suggestions = suggestions.concat(["safe-area-inset-top", "safe-area-inset-right", "safe-area-inset-bottom", "safe-area-inset-left"]);
     else if (functionName === "image-set")
         suggestions.push("url()");