CSS Unit vh, vw, vmin and vmax in box-shadow are not applied.
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 24 Sep 2013 04:00:29 +0000 (04:00 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 24 Sep 2013 04:00:29 +0000 (04:00 +0000)
https://bugs.webkit.org/show_bug.cgi?id=121422

Patch by Gurpreet Kaur <k.gurpreet@samsung.com> on 2013-09-23
Reviewed by Darin Adler.

Source/WebCore:

Box-shadow properties were not applied incase its values
were given in vh, vw, vmax, vmin unit.

Tests: fast/css/box-shadow-negative-viewportlength.html
       fast/css/box-shadow-viewport-height.html
       fast/css/box-shadow-viewport-vmax.html
       fast/css/box-shadow-viewport-vmin.html
       fast/css/box-shadow-viewport-width.html

* css/CSSParser.cpp:
(WebCore::CSSParser::parseShadow):
* css/StyleResolver.cpp:
(WebCore::StyleResolver::applyProperty):
(WebCore::StyleResolver::MatchedProperties::~MatchedProperties):
(WebCore::StyleResolver::viewportPercentageHeight):
(WebCore::StyleResolver::viewportPercentageWidth):
(WebCore::StyleResolver::viewportPercentageMax):
(WebCore::StyleResolver::viewportPercentageMin):
* css/StyleResolver.h:
Parsing and calculating the shadow values which has been specified
in viewport units.The vh/vw units are calcultated as percent of
viewport height and viewport width respectively. 1vmax: 1vw or 1vh,
whatever is largest.1vmin: 1vw or 1vh, whatever is smallest.

LayoutTests:

* fast/css/box-shadow-negative-viewportlength-expected-mismatch.html: Added.
* fast/css/box-shadow-negative-viewportlength.html: Added.
* fast/css/box-shadow-viewport-height-expected-mismatch.html: Added.
* fast/css/box-shadow-viewport-height.html: Added.
* fast/css/box-shadow-viewport-vmax-expected-mismatch.html: Added.
* fast/css/box-shadow-viewport-vmax.html: Added.
* fast/css/box-shadow-viewport-vmin-expected-mismatch.html: Added.
* fast/css/box-shadow-viewport-vmin.html: Added.
* fast/css/box-shadow-viewport-width-expected-mismatch.html: Added.
* fast/css/box-shadow-viewport-width.html: Added.
Added new tests for verifying that box-shadow properties are
applied when its values are viewport units.
* fast/css/shadow-viewport-units-expected.txt:
* fast/css/shadow-viewport-units.html:
Rebaselining existing tests as per the new behavior. Support for shadow
properties with viewport units is added so modified the test case.

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

17 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css/box-shadow-negative-viewportlength-expected-mismatch.html [new file with mode: 0755]
LayoutTests/fast/css/box-shadow-negative-viewportlength.html [new file with mode: 0755]
LayoutTests/fast/css/box-shadow-viewport-height-expected-mismatch.html [new file with mode: 0755]
LayoutTests/fast/css/box-shadow-viewport-height.html [new file with mode: 0755]
LayoutTests/fast/css/box-shadow-viewport-vmax-expected-mismatch.html [new file with mode: 0755]
LayoutTests/fast/css/box-shadow-viewport-vmax.html [new file with mode: 0755]
LayoutTests/fast/css/box-shadow-viewport-vmin-expected-mismatch.html [new file with mode: 0755]
LayoutTests/fast/css/box-shadow-viewport-vmin.html [new file with mode: 0755]
LayoutTests/fast/css/box-shadow-viewport-width-expected-mismatch.html [new file with mode: 0755]
LayoutTests/fast/css/box-shadow-viewport-width.html [new file with mode: 0755]
LayoutTests/fast/css/shadow-viewport-units-expected.txt
LayoutTests/fast/css/shadow-viewport-units.html
Source/WebCore/ChangeLog
Source/WebCore/css/CSSParser.cpp
Source/WebCore/css/StyleResolver.cpp
Source/WebCore/css/StyleResolver.h

index eafc40e06af0e2d887825100ad50887d19a14512..5d93be96e0623683dac30ed3c55089f9393eed9e 100644 (file)
@@ -1,3 +1,27 @@
+2013-09-23  Gurpreet Kaur  <k.gurpreet@samsung.com>
+
+        CSS Unit vh, vw, vmin and vmax in box-shadow are not applied.
+        https://bugs.webkit.org/show_bug.cgi?id=121422
+
+        Reviewed by Darin Adler.
+
+        * fast/css/box-shadow-negative-viewportlength-expected-mismatch.html: Added.
+        * fast/css/box-shadow-negative-viewportlength.html: Added.
+        * fast/css/box-shadow-viewport-height-expected-mismatch.html: Added.
+        * fast/css/box-shadow-viewport-height.html: Added.
+        * fast/css/box-shadow-viewport-vmax-expected-mismatch.html: Added.
+        * fast/css/box-shadow-viewport-vmax.html: Added.
+        * fast/css/box-shadow-viewport-vmin-expected-mismatch.html: Added.
+        * fast/css/box-shadow-viewport-vmin.html: Added.
+        * fast/css/box-shadow-viewport-width-expected-mismatch.html: Added.
+        * fast/css/box-shadow-viewport-width.html: Added.
+        Added new tests for verifying that box-shadow properties are
+        applied when its values are viewport units.
+        * fast/css/shadow-viewport-units-expected.txt:
+        * fast/css/shadow-viewport-units.html:
+        Rebaselining existing tests as per the new behavior. Support for shadow
+        properties with viewport units is added so modified the test case.
+
 2013-09-23  Simon Fraser  <simon.fraser@apple.com>
 
         REGRESSION (r155998): when zooming in, tiles are too small
diff --git a/LayoutTests/fast/css/box-shadow-negative-viewportlength-expected-mismatch.html b/LayoutTests/fast/css/box-shadow-negative-viewportlength-expected-mismatch.html
new file mode 100755 (executable)
index 0000000..e550331
--- /dev/null
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            #boxshadowDiv{
+                margin-bottom: 10px;
+                height: 100px;
+                width: 100px;
+                background: #555;                         
+            }
+        </style>
+    </head>
+    <body>
+               <div id="boxshadowDiv"></div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/css/box-shadow-negative-viewportlength.html b/LayoutTests/fast/css/box-shadow-negative-viewportlength.html
new file mode 100755 (executable)
index 0000000..3c69732
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            #boxshadowDiv{
+                margin-bottom: 10px;
+                height: 100px;
+                width: 100px;
+                background: #555;
+                box-shadow: -5vh -2vw 1vh 1vw orange;
+            }
+        </style>
+    </head>
+    <body>
+               <div id="boxshadowDiv"></div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/css/box-shadow-viewport-height-expected-mismatch.html b/LayoutTests/fast/css/box-shadow-viewport-height-expected-mismatch.html
new file mode 100755 (executable)
index 0000000..39f400e
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            #boxshadowDiv{
+                margin-bottom: 10px;
+                height: 100px;
+                width: 100px;
+                background: #555;
+                background: #555;                
+            }
+        </style>
+    </head>
+    <body>
+               <div id="boxshadowDiv"></div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/css/box-shadow-viewport-height.html b/LayoutTests/fast/css/box-shadow-viewport-height.html
new file mode 100755 (executable)
index 0000000..59b42ef
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            #boxshadowDiv{
+                margin-bottom: 10px;
+                height: 100px;
+                width: 100px;
+                background: #555;
+                box-shadow: 5vh 5vh 1vh 1vh orange;
+            }
+        </style>
+    </head>
+    <body>  
+               <div id="boxshadowDiv"></div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/css/box-shadow-viewport-vmax-expected-mismatch.html b/LayoutTests/fast/css/box-shadow-viewport-vmax-expected-mismatch.html
new file mode 100755 (executable)
index 0000000..39f400e
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            #boxshadowDiv{
+                margin-bottom: 10px;
+                height: 100px;
+                width: 100px;
+                background: #555;
+                background: #555;                
+            }
+        </style>
+    </head>
+    <body>
+               <div id="boxshadowDiv"></div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/css/box-shadow-viewport-vmax.html b/LayoutTests/fast/css/box-shadow-viewport-vmax.html
new file mode 100755 (executable)
index 0000000..87d3f1b
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            #boxshadowDiv{
+                margin-bottom: 10px;
+                height: 100px;
+                width: 100px;
+                background: #555;
+                box-shadow: 5vmax 5vmax 1vmax 1vmax orange;
+            }
+        </style>
+    </head>
+    <body>  
+               <div id="boxshadowDiv"></div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/css/box-shadow-viewport-vmin-expected-mismatch.html b/LayoutTests/fast/css/box-shadow-viewport-vmin-expected-mismatch.html
new file mode 100755 (executable)
index 0000000..39f400e
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            #boxshadowDiv{
+                margin-bottom: 10px;
+                height: 100px;
+                width: 100px;
+                background: #555;
+                background: #555;                
+            }
+        </style>
+    </head>
+    <body>
+               <div id="boxshadowDiv"></div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/css/box-shadow-viewport-vmin.html b/LayoutTests/fast/css/box-shadow-viewport-vmin.html
new file mode 100755 (executable)
index 0000000..9bdc772
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            #boxshadowDiv{
+                margin-bottom: 10px;
+                height: 100px;
+                width: 100px;
+                background: #555;
+                box-shadow: 5vmin 5vmin 1vmin 1vmin orange;
+            }
+        </style>
+    </head>
+    <body>  
+               <div id="boxshadowDiv"></div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/css/box-shadow-viewport-width-expected-mismatch.html b/LayoutTests/fast/css/box-shadow-viewport-width-expected-mismatch.html
new file mode 100755 (executable)
index 0000000..39f400e
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            #boxshadowDiv{
+                margin-bottom: 10px;
+                height: 100px;
+                width: 100px;
+                background: #555;
+                background: #555;                
+            }
+        </style>
+    </head>
+    <body>
+               <div id="boxshadowDiv"></div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/css/box-shadow-viewport-width.html b/LayoutTests/fast/css/box-shadow-viewport-width.html
new file mode 100755 (executable)
index 0000000..b817bd4
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            #boxshadowDiv{
+                margin-bottom: 10px;
+                height: 100px;
+                width: 100px;
+                background: #555;
+                box-shadow: 5vw 5vw 1vw 1vw orange;
+            }
+        </style>
+    </head>
+    <body>  
+               <div id="boxshadowDiv"></div>
+    </body>
+</html>
\ No newline at end of file
index d14885eafc1e4c1b264fb3b3300170eb865288ca..921d56bb89d751466f258c9761b65a1aaa38e069 100644 (file)
@@ -1 +1 @@
-PASS: No shadow style
+PASS: Shadow style: rgb(0, 0, 0) 0px 0px 0px
index 1677d127509e59cea00668b986915a36d895994f..02e58cc02fcfdabe239284d66d6cfa2dffb58dee 100644 (file)
@@ -1,5 +1,5 @@
 <style>
-#a { text-shadow: 0px 0px 0vh black; } /* Should be invalid - we don't yet support viewport units in shadow */
+#a { text-shadow: 0px 0px 0vh black; } /* Should be valid - we support viewport units in shadow */
 </style>
 <div id="a"></div>
 <script>
@@ -11,8 +11,8 @@ window.addEventListener("load", function () {
     var output = document.createElement("p");
     document.body.appendChild(output);
     if (window.getComputedStyle(a).textShadow == "none")
-        output.innerText = "PASS: No shadow style";
+        output.innerText = "FAIL: No shadow style";
     else
-        output.innerText = "FAIL: Shadow style: " + window.getComputedStyle(a).textShadow;
+        output.innerText = "PASS: Shadow style: " + window.getComputedStyle(a).textShadow;
 }, false);
 </script>
index 589ac5eaa728f9bce26d10ae55bb3fd2085bc31e..ec489b902dfdb71b0989c767b470be05ab4d8ad4 100644 (file)
@@ -1,3 +1,34 @@
+2013-09-23  Gurpreet Kaur  <k.gurpreet@samsung.com>
+
+        CSS Unit vh, vw, vmin and vmax in box-shadow are not applied.
+        https://bugs.webkit.org/show_bug.cgi?id=121422
+
+        Reviewed by Darin Adler.
+
+        Box-shadow properties were not applied incase its values
+        were given in vh, vw, vmax, vmin unit.
+
+        Tests: fast/css/box-shadow-negative-viewportlength.html
+               fast/css/box-shadow-viewport-height.html
+               fast/css/box-shadow-viewport-vmax.html
+               fast/css/box-shadow-viewport-vmin.html
+               fast/css/box-shadow-viewport-width.html
+
+        * css/CSSParser.cpp:
+        (WebCore::CSSParser::parseShadow):
+        * css/StyleResolver.cpp:
+        (WebCore::StyleResolver::applyProperty):
+        (WebCore::StyleResolver::MatchedProperties::~MatchedProperties):
+        (WebCore::StyleResolver::viewportPercentageHeight):
+        (WebCore::StyleResolver::viewportPercentageWidth):
+        (WebCore::StyleResolver::viewportPercentageMax):
+        (WebCore::StyleResolver::viewportPercentageMin):
+        * css/StyleResolver.h:
+        Parsing and calculating the shadow values which has been specified
+        in viewport units.The vh/vw units are calcultated as percent of
+        viewport height and viewport width respectively. 1vmax: 1vw or 1vh,
+        whatever is largest.1vmin: 1vw or 1vh, whatever is smallest.
+
 2013-09-23  Ryuan Choi  <ryuan.choi@samsung.com>
 
         Unreviewed build fix for CMake ports with INDEXED_DATABASE after r156296
index d17931e8d08055ec8cfebd2e5ccf7a4c68ad0cc9..ce0c038a83474902840f2191dcb110bfad4e4a13 100644 (file)
@@ -6606,13 +6606,6 @@ PassRefPtr<CSSValueList> CSSParser::parseShadow(CSSParserValueList* valueList, C
             if (!context.allowLength())
                 return 0;
 
-            // We don't support viewport units for shadow values.
-            if (val->unit == CSSPrimitiveValue::CSS_VW
-                || val->unit == CSSPrimitiveValue::CSS_VH
-                || val->unit == CSSPrimitiveValue::CSS_VMIN
-                || val->unit == CSSPrimitiveValue::CSS_VMAX)
-                return 0;
-
             // Blur radius must be non-negative.
             if (context.allowBlur && !validUnit(val, FLength | FNonNeg, CSSStrictMode))
                 return 0;
index dee988fdd0eb1790529e8a21ffe1924b5470b601..a34dc99c67ef0d7bf604cda9020e0af6a28b476d 100644 (file)
@@ -2387,9 +2387,17 @@ void StyleResolver::applyProperty(CSSPropertyID id, CSSValue* value)
                 continue;
             ShadowValue* item = static_cast<ShadowValue*>(currValue);
             int x = item->x->computeLength<int>(state.style(), state.rootElementStyle(), zoomFactor);
+            if (item->x->isViewportPercentageLength())
+                x = viewportPercentageValue(*item->x, x);
             int y = item->y->computeLength<int>(state.style(), state.rootElementStyle(), zoomFactor);
+            if (item->y->isViewportPercentageLength())
+                y = viewportPercentageValue(*item->y, y);
             int blur = item->blur ? item->blur->computeLength<int>(state.style(), state.rootElementStyle(), zoomFactor) : 0;
+            if (item->blur && item->blur->isViewportPercentageLength())
+                blur = viewportPercentageValue(*item->blur, blur);
             int spread = item->spread ? item->spread->computeLength<int>(state.style(), state.rootElementStyle(), zoomFactor) : 0;
+            if (item->spread && item->spread->isViewportPercentageLength())
+                spread = viewportPercentageValue(*item->spread, spread);
             ShadowStyle shadowStyle = item->style && item->style->getValueID() == CSSValueInset ? Inset : Normal;
             Color color;
             if (item->color)
@@ -4057,4 +4065,22 @@ inline StyleResolver::MatchedProperties::~MatchedProperties()
 {
 }
 
+int StyleResolver::viewportPercentageValue(CSSPrimitiveValue& unit, int percentage)
+{
+    int viewPortHeight = document().renderView()->viewportSize().height() * percentage / 100.0f;
+    int viewPortWidth = document().renderView()->viewportSize().width() * percentage / 100.0f;
+
+    if (unit.isViewportPercentageHeight())
+        return viewPortHeight;
+    if (unit.isViewportPercentageWidth())
+        return viewPortWidth;
+    if (unit.isViewportPercentageMax())
+        return max(viewPortWidth, viewPortHeight);
+    if (unit.isViewportPercentageMin())
+        return min(viewPortWidth, viewPortHeight);
+
+    ASSERT_NOT_REACHED();
+    return 0;
+}
+
 } // namespace WebCore
index d532f9c96407fa6af26f40d04772ed5dd5af3c5f..e48896371cb972e13220138dcf9cc9ab1f660033 100644 (file)
@@ -585,6 +585,8 @@ private:
     bool classNamesAffectedByRules(const SpaceSplitString&) const;
     bool sharingCandidateHasIdenticalStyleAffectingAttributes(StyledElement*) const;
 
+    int viewportPercentageValue(CSSPrimitiveValue& unit, int percentage);
+
     unsigned m_matchedPropertiesCacheAdditionsSinceLastSweep;
 
     typedef HashMap<unsigned, MatchedPropertiesCacheItem> MatchedPropertiesCache;