CSS3 calc: mixed percent/absolute expressions for gradients
authormikelawther@chromium.org <mikelawther@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 Mar 2012 03:14:35 +0000 (03:14 +0000)
committermikelawther@chromium.org <mikelawther@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 Mar 2012 03:14:35 +0000 (03:14 +0000)
https://bugs.webkit.org/show_bug.cgi?id=81182

Reviewed by Ojan Vafai.

Source/WebCore:

* css/CSSGradientValue.cpp:
(WebCore::CSSGradientValue::addStops):
(WebCore::positionFromValue):

LayoutTests:

Add new tests for mixed percent/absolute expressions.

* css3/calc/css3-radial-gradients-expected.html:
* css3/calc/css3-radial-gradients.html:
* css3/calc/gradient-color-stops-expected.html:
* css3/calc/gradient-color-stops.html:

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

LayoutTests/ChangeLog
LayoutTests/css3/calc/css3-radial-gradients-expected.html
LayoutTests/css3/calc/css3-radial-gradients.html
LayoutTests/css3/calc/gradient-color-stops-expected.html
LayoutTests/css3/calc/gradient-color-stops.html
Source/WebCore/ChangeLog
Source/WebCore/css/CSSGradientValue.cpp

index 606c05d..5d5dcc5 100644 (file)
@@ -1,3 +1,17 @@
+2012-03-15  Mike Lawther  <mikelawther@chromium.org>
+
+        CSS3 calc: mixed percent/absolute expressions for gradients
+        https://bugs.webkit.org/show_bug.cgi?id=81182
+
+        Reviewed by Ojan Vafai.
+
+        Add new tests for mixed percent/absolute expressions.
+
+        * css3/calc/css3-radial-gradients-expected.html:
+        * css3/calc/css3-radial-gradients.html:
+        * css3/calc/gradient-color-stops-expected.html:
+        * css3/calc/gradient-color-stops.html:
+
 2012-03-15  David Grogan  <dgrogan@chromium.org>
 
         IndexedDB Tests: use self instead of window
index 607a855..bcef22a 100644 (file)
     background-image: -webkit-radial-gradient(20% 20%, circle closest-corner, red -50%, green, blue 150%);
     background-image: -moz-radial-gradient(20% 20%, circle closest-corner, red -50%, green, blue 150%);
 }
+
+.gradient8 {
+    background-image: -webkit-radial-gradient(circle closest-side, red, green 40px, blue);
+    background-image: -moz-radial-gradient(circle closest-side, red, green 40px, blue);
+}
 </style>
 <body>
     <div class="gradient1 box"></div>
@@ -53,4 +58,5 @@
     <div class="gradient6 box"></div>
     <br>
     <div class="gradient7 box"></div>
+    <div class="gradient8 box"></div>
 </body>
index f446352..406010b 100644 (file)
     background-image: -webkit-radial-gradient(-webkit-calc(20%) -webkit-calc(20%), circle closest-corner, red -50%, green, blue -webkit-calc(150%));
     background-image: -moz-radial-gradient(-webkit-calc(20%) -webkit-calc(20%), circle closest-corner, red -50%, green, blue -webkit-calc(150%));
 }
+
+.gradient8 {
+    background-image: -webkit-radial-gradient(circle closest-side, red, green -webkit-calc(50% + 10px), blue);
+    background-image: -moz-radial-gradient(circle closest-side, red, green -moz-calc(50% + 10px), blue);
+}
 </style>
 <body>
     <div class="gradient1 box"></div>
@@ -53,4 +58,5 @@
     <div class="gradient6 box"></div>
     <br>
     <div class="gradient7 box"></div>
+    <div class="gradient8 box"></div>
 </body>
index d247535..1c1b2df 100644 (file)
     background-image: -webkit-linear-gradient(left, red, green 120%, blue);
     background-image: -moz-linear-gradient(left, red, green 120%, blue);
 }
+
+.linear6 {
+    background-image: -webkit-linear-gradient(left, red, green 120px, blue);
+    background-image: -moz-linear-gradient(left, red, green 120px, blue);
+}
+
 </style>
 <body>
   <div class="linear1 box"></div>
@@ -41,4 +47,5 @@
   <br>
   <div class="linear4 box"></div>
   <div class="linear5 box"></div>
+  <div class="linear6 box"></div>
 </body>
index 7fdc04a..66d4c45 100644 (file)
     background-image: -webkit-linear-gradient(left, red, green -webkit-calc(120%), blue);
     background-image: -moz-linear-gradient(left, red, green -webkit-calc(120%), blue);
 }
+
+.linear6 {
+    background-image: -webkit-linear-gradient(left, red, green -webkit-calc(50% + 20px), blue);
+    background-image: -moz-linear-gradient(left, red, green -moz-calc(50% + 20px), blue);
+}
 </style>
 <body>
     <div class="linear1 box"></div>
@@ -41,4 +46,5 @@
     <br>
     <div class="linear4 box"></div>
     <div class="linear5 box"></div>
+    <div class="linear6 box"></div>
 </body>
index 0598514..dd22f31 100644 (file)
@@ -1,3 +1,14 @@
+2012-03-15  Mike Lawther  <mikelawther@chromium.org>
+
+        CSS3 calc: mixed percent/absolute expressions for gradients
+        https://bugs.webkit.org/show_bug.cgi?id=81182
+
+        Reviewed by Ojan Vafai.
+
+        * css/CSSGradientValue.cpp:
+        (WebCore::CSSGradientValue::addStops):
+        (WebCore::positionFromValue):
+
 2012-03-15  Leo Yang  <leo.yang@torchmobile.com.cn>
 
         [BlackBerry] Sync up MIMETypeRegistry.cpp
index d8d7253..eabc521 100644 (file)
@@ -26,6 +26,7 @@
 #include "config.h"
 #include "CSSGradientValue.h"
 
+#include "CSSCalculationValue.h"
 #include "CSSStyleSelector.h"
 #include "CSSValueKeywords.h"
 #include "GeneratorGeneratedImage.h"
@@ -152,12 +153,16 @@ void CSSGradientValue::addStops(Gradient* gradient, RenderObject* renderer, Rend
         if (stop.m_position) {
             if (stop.m_position->isPercentage())
                 stops[i].offset = stop.m_position->getFloatValue(CSSPrimitiveValue::CSS_PERCENTAGE) / 100;
-            else if (stop.m_position->isLength()) {
-                float length = stop.m_position->computeLength<float>(style, rootStyle, style->effectiveZoom());
+            else if (stop.m_position->isLength() || stop.m_position->isCalculatedPercentageWithLength()) {
                 if (!computedGradientLength) {
                     FloatSize gradientSize(gradientStart - gradientEnd);
                     gradientLength = gradientSize.diagonalLength();
                 }
+                float length;
+                if (stop.m_position->isLength())
+                    length = stop.m_position->computeLength<float>(style, rootStyle, style->effectiveZoom());
+                else 
+                    length = stop.m_position->cssCalcValue()->toCalcValue(style, rootStyle, style->effectiveZoom())->evaluate(gradientLength);
                 stops[i].offset = (gradientLength > 0) ? length / gradientLength : 0;
             } else {
                 ASSERT_NOT_REACHED();
@@ -365,8 +370,12 @@ static float positionFromValue(CSSPrimitiveValue* value, RenderStyle* style, Ren
     if (value->isNumber())
         return value->getFloatValue() * zoomFactor;
 
+    int edgeDistance = isHorizontal ? size.width() : size.height();
     if (value->isPercentage())
-        return value->getFloatValue() / 100.f * (isHorizontal ? size.width() : size.height());
+        return value->getFloatValue() / 100.f * edgeDistance;
+
+    if (value->isCalculatedPercentageWithLength())
+        return value->cssCalcValue()->toCalcValue(style, rootStyle, style->effectiveZoom())->evaluate(edgeDistance);
 
     switch (value->getIdent()) {
     case CSSValueTop: