Changeset 257966 in webkit for trunk/Source/WebCore/css/CSSGradientValue.cpp

Timestamp:

Mar 5, 2020, 8:11:39 PM (5 years ago)

Author:

Darin Adler

Message:

Simplify gradient parsing
​https://bugs.webkit.org/show_bug.cgi?id=208417

Reviewed by Anders Carlsson.

• Use Optional<> and invalid Color to represent unspecified positions and colors. This is simpler and easier to get right than separate booleans.
• Simplified sorting of stops in legacy gradients to remove extra CSS value evaluation and unnecessary "sort in place" technique.
• Rewrote equals functions for CSS gradient value classes. The new pattern is to compare all the data members that hold parsed CSS data, handling null correctly, since the parser won't set inappropriate ones. The old code had complex logic to only compare certain data members, which was unnecessary and hard to read to tell if it was correct.
• Added some more use of WTFMove to cut down on reference count churn.

• css/CSSGradientValue.cpp:

(WebCore::CSSGradientValue::image): Removed unneeded call to get().
(WebCore::compareStops): Deleted.
(WebCore::CSSGradientValue::sortStopsIfNeeded): Deleted.
(WebCore::resolveStopColors): Take advantage of the fact that we know because
of parsing rules that the only stops without colors are midpoints to drastically
simplify this function to a trivial loop.
(WebCore::CSSGradientValue::hasColorDerivedFromElement const): Added.
Checks to see if any of the stop colors is derived from the element. The old
code confusingly would store the answer to this in the stop, but only in the
first stop with this property. Computing it without modifying the stop, and
memoizing it in the gradient preserves the same performance characteristics
as before without requiring a boolean in each stop in the stops vector.
(WebCore::CSSGradientValue::gradientWithStylesResolved): Call the new
hasColorDerivedFromElement function instead of having the logic here.
(WebCore::LinearGradientAdapter::normalizeStopsAndEndpointsOutsideRange):
Update since GradientStop now has optional offsets. By the time this
function is called they are all guaranteed to be filled in, so we can
just use the * operator.
(WebCore::RadialGradientAdapter::normalizeStopsAndEndpointsOutsideRange):
Ditto.
(WebCore::ConicGradientAdapter::normalizeStopsAndEndpointsOutsideRange):
Ditto.
(WebCore::CSSGradientValue::computeStops): Moved the sorting of stops for
the deprecated gradients here. Also updated since Gradient::ColorStop
no longer uses "m_" prefixes on its public struct data members. Some
simplification because we no longer need to explicitly set "specified"
to true since it's no longer a separate boolean.
(WebCore::positionFromValue): Handle a null pointer for value by returning
0, which is what the caller was doing explicitly before. Use float
instead of int for some internal computations that were mixing the two
for no good reason.
(WebCore::computeEndPoint): Removed null checks now that positionFromValue
does them for us, turning this into a one-liner.
(WebCore::CSSGradientValue::isCacheable const): Use hasColorDerivedFromElement.
(WebCore::CSSGradientValue::knownToBeOpaque const): Removed unnnecessary
checking the color both before and after when a color filter is involved.
(WebCore::CSSGradientValue::equals const): Added. Shared by all the equals
functions for derived classes.
(WebCore::appendGradientStops): Updated for changes to CSSGradientColorStop.
(WebCore::appendSpaceSeparatedOptionalCSSPtrText): Added template helper
for writing two optional CSS values with a space between.
(WebCore::writeColorStop): Ditto. Also converted to non-member function,
removed unneeded isMidpoint check, use appendSpaceSeparatedOptionalCSSPtrText.
(WebCore::CSSLinearGradientValue::customCSSText const): Call function
members so we don't have to expose CSSGradientValue data members as
protected things that can be accessed by derived classes. Some other
small refactoring, such as getting rid of extra boolean wroteFirstStop.
(WebCore::CSSLinearGradientValue::createGradient): Updated to use
function members instead of protected data members.
(WebCore::CSSLinearGradientValue::equals const): Compare all data
members and use CSSGradientValue::equals, makes this a 1-liner.
(WebCore::CSSRadialGradientValue::customCSSText const): Call function
members as described above and use appendSpaceSeparatedOptionalCSSPtrText.
(WebCore::CSSRadialGradientValue::createGradient): Ditto.
(WebCore::CSSRadialGradientValue::equals const): Compare all data
members and use CSSGradientValue::equals.
(WebCore::CSSConicGradientValue::customCSSText const): Call function
members as described above and use appendSpaceSeparatedOptionalCSSPtrText.
(WebCore::CSSConicGradientValue::createGradient): Ditto.
(WebCore::CSSConicGradientValue::equals const): Compare all data
members and use CSSGradientValue::equals, makes this a 1-liner.

• css/CSSGradientValue.h: Removed unneeded includes and forward declarations.

Renamed CSSGradientColorStop data members to not use m_ prefix since this is
a struct with public data members, and WebKit style says not to do that here.
Removed m_colorIsDerivedFromElement and isMidpoint from CSSGradientColorStop,
m_colorIsDerivedFromElement is now stored in the gradient, not the color stop,
and midpoints are any color stop with null color. Replaced the
CSSGradientValue::stopCount function, which mixed size_t and unsigned types,
with a hasTwoStops function, which is all the caller needs. Converted the
isFixedSize, fixedSize, isPending, and loadSubimages into static member
functions: they don't do any work and so don't need an instance. Removed
the unneeded gradient type argument to the cloning constructors. Removed
m_stopsSorted and added m_hasColorDerivedFromElement and
hasColorDerivedFromElement. Added getter functions that are protected so
the data members themselves can be private. Removed sortStopsIfNeeded
and writeColorStop.

• css/parser/CSSPropertyParserHelpers.cpp:

(WebCore::CSSPropertyParserHelpers::consumeDeprecatedGradientColorStop):
Updated for CSSGradientColorStop member renaming.
(WebCore::CSSPropertyParserHelpers::consumeDeprecatedGradient): Use
more WTFMove to save a little bit of reference count churn; in some cases
that means moving the setter calls to the end of the function after all
the error checking.
(WebCore::CSSPropertyParserHelpers::consumeGradientColorStops): Ditto.
Removed code to set isMidpoint and the FIXME-NEWPARSER comment that said
it could be removed. Used lambda to cut down on repeated code. Changed
parsing of stops with a second position to repeat the color instead of
relying on later computation to repeat it; this is required so we can
always treat an omitted color as a midpoint.
(WebCore::CSSPropertyParserHelpers::consumeDeprecatedRadialGradient): Ditto.
(WebCore::CSSPropertyParserHelpers::consumeRadialGradient): Ditto.
(WebCore::CSSPropertyParserHelpers::consumeLinearGradient): Ditto.
(WebCore::CSSPropertyParserHelpers::consumeConicGradient): Ditto.

• html/HTMLInputElement.cpp:

(WebCore::autoFillStrongPasswordMaskImage): Updated for the renamed
CSSGradientColorStop members, added a missing call to doneAddingStops,
and use some WTFMove to cut down on reference count churn.

File:

• trunk/Source/WebCore/css/CSSGradientValue.cpp (modified) (54 diffs)

trunk/Source/WebCore/css/CSSGradientValue.cpp

@@ -64 +64 @@
     auto newImage = GradientImage::create(createGradient(*this, renderer, size), size);
     if (cacheable)
-        saveCachedImageForSize(size, newImage.get());
+        saveCachedImageForSize(size, newImage);
     return newImage;
-}
-
-// Should only ever be called for deprecated gradients.
-static inline bool compareStops(const CSSGradientColorStop& a, const CSSGradientColorStop& b)
-{
-    double aVal = a.m_position->doubleValue(CSSUnitType::CSS_NUMBER);
-    double bVal = b.m_position->doubleValue(CSSUnitType::CSS_NUMBER);
-
-    return aVal < bVal;
-}
-
-void CSSGradientValue::sortStopsIfNeeded()
-{
-    ASSERT(m_gradientType == CSSDeprecatedLinearGradient || m_gradientType == CSSDeprecatedRadialGradient);
-    if (!m_stopsSorted) {
-        if (m_stops.size())
-            std::stable_sort(m_stops.begin(), m_stops.end(), compareStops);
-        m_stopsSorted = true;
-    }
 }
 
 struct GradientStop {
     Color color;
-    float offset { 0 };
-    bool specified { false };
-    bool isMidpoint { false };
+    Optional<float> offset;
+
+    bool isSpecified() const { return offset.hasValue(); }
+    bool isMidpoint() const { return !color.isValid(); }
 };
 
@@ -104 +86 @@
 }
 
-template<typename Function>
-void resolveStopColors(Vector<CSSGradientColorStop, 2>& stops, Function&& colorResolveFunction)
-{
-    for (size_t i = 0; i < stops.size(); ++i) {
-        auto& stop = stops[i];
-        if (stop.isMidpoint)
-            continue;
-        if (stop.m_color)
-            stop.m_resolvedColor = colorResolveFunction(*stop.m_color);
-        else if (i) {
-            auto& previousStop = stops[i - 1];
-            ASSERT(previousStop.m_color);
-            stop.m_color = previousStop.m_color;
-            stop.m_resolvedColor = previousStop.m_resolvedColor;
-        }
-    }
+template<typename Function> void resolveStopColors(Vector<CSSGradientColorStop, 2>& stops, Function&& colorResolveFunction)
+{
+    for (auto& stop : stops) {
+        if (stop.color)
+            stop.resolvedColor = colorResolveFunction(*stop.color);
+    }
+}
+
+bool CSSGradientValue::hasColorDerivedFromElement() const
+{
+    if (!m_hasColorDerivedFromElement) {
+        m_hasColorDerivedFromElement = false;
+        for (auto& stop : m_stops) {
+            if (stop.color && Style::BuilderState::isColorFromPrimitiveValueDerivedFromElement(*stop.color)) {
+                m_hasColorDerivedFromElement = true;
+                break;
+            }
+        }
+    }
+    return *m_hasColorDerivedFromElement;
 }
 
 Ref<CSSGradientValue> CSSGradientValue::gradientWithStylesResolved(Style::BuilderState& builderState)
 {
-    bool colorIsDerivedFromElement = false;
-    for (auto& stop : m_stops) {
-        if (!stop.isMidpoint && stop.m_color && Style::BuilderState::isColorFromPrimitiveValueDerivedFromElement(*stop.m_color)) {
-            stop.m_colorIsDerivedFromElement = true;
-            colorIsDerivedFromElement = true;
-            break;
-        }
-    }
-    auto result = colorIsDerivedFromElement ? clone(*this) : makeRef(*this);
+    auto result = hasColorDerivedFromElement() ? clone(*this) : makeRef(*this);
     resolveStopColors(result->m_stops, [&](const CSSPrimitiveValue& colorValue) {
         return builderState.colorFromPrimitiveValue(colorValue);
@@ -153 +131 @@
     {
     }
-    
+
     float gradientLength() const
     {
@@ -163 +141 @@
     void normalizeStopsAndEndpointsOutsideRange(Vector<GradientStop>& stops)
     {
-        float firstOffset = stops.first().offset;
-        float lastOffset = stops.last().offset;
+        float firstOffset = *stops.first().offset;
+        float lastOffset = *stops.last().offset;
         if (firstOffset != lastOffset) {
             float scale = lastOffset - firstOffset;
 
             for (auto& stop : stops)
-                stop.offset = (stop.offset - firstOffset) / scale;
+                stop.offset = (*stop.offset - firstOffset) / scale;
 
             auto p0 = m_data.point0;
@@ -210 +188 @@
         // Rather than scaling the points < 0, we truncate them, so only scale according to the largest point.
         float firstOffset = 0;
-        float lastOffset = stops.last().offset;
+        float lastOffset = *stops.last().offset;
         float scale = lastOffset - firstOffset;
 
@@ -216 +194 @@
         size_t firstZeroOrGreaterIndex = numStops;
         for (size_t i = 0; i < numStops; ++i) {
-            if (stops[i].offset >= 0) {
+            if (*stops[i].offset >= 0) {
                 firstZeroOrGreaterIndex = i;
                 break;
@@ -223 +201 @@
 
         if (firstZeroOrGreaterIndex > 0) {
-            if (firstZeroOrGreaterIndex < numStops && stops[firstZeroOrGreaterIndex].offset > 0) {
-                float prevOffset = stops[firstZeroOrGreaterIndex - 1].offset;
-                float nextOffset = stops[firstZeroOrGreaterIndex].offset;
+            if (firstZeroOrGreaterIndex < numStops && *stops[firstZeroOrGreaterIndex].offset > 0) {
+                float prevOffset = *stops[firstZeroOrGreaterIndex - 1].offset;
+                float nextOffset = *stops[firstZeroOrGreaterIndex].offset;
 
                 float interStopProportion = -prevOffset / (nextOffset - prevOffset);
@@ -244 +222 @@
 
         for (auto& stop : stops)
-            stop.offset /= scale;
+            *stop.offset /= scale;
 
         m_data.startRadius *= scale;
@@ -265 +243 @@
         size_t firstZeroOrGreaterIndex = numStops;
         for (size_t i = 0; i < numStops; ++i) {
-            if (stops[i].offset >= 0) {
+            if (*stops[i].offset >= 0) {
                 firstZeroOrGreaterIndex = i;
                 break;
@@ -272 +250 @@
 
         if (firstZeroOrGreaterIndex > 0) {
-            if (firstZeroOrGreaterIndex < numStops && stops[firstZeroOrGreaterIndex].offset > 0) {
-                float prevOffset = stops[firstZeroOrGreaterIndex - 1].offset;
-                float nextOffset = stops[firstZeroOrGreaterIndex].offset;
+            if (firstZeroOrGreaterIndex < numStops && *stops[firstZeroOrGreaterIndex].offset > 0) {
+                float prevOffset = *stops[firstZeroOrGreaterIndex - 1].offset;
+                float nextOffset = *stops[firstZeroOrGreaterIndex].offset;
                 
                 float interStopProportion = -prevOffset / (nextOffset - prevOffset);
@@ -294 +272 @@
         size_t lastOneOrLessIndex = numStops;
         for (int i = numStops - 1; i >= 0; --i) {
-            if (stops[i].offset <= 1) {
+            if (*stops[i].offset <= 1) {
                 lastOneOrLessIndex = i;
                 break;
@@ -301 +279 @@
         
         if (lastOneOrLessIndex < numStops - 1) {
-            if (lastOneOrLessIndex < numStops && stops[lastOneOrLessIndex].offset < 1) {
-                float prevOffset = stops[lastOneOrLessIndex].offset;
-                float nextOffset = stops[lastOneOrLessIndex + 1].offset;
+            if (lastOneOrLessIndex < numStops && *stops[lastOneOrLessIndex].offset < 1) {
+                float prevOffset = *stops[lastOneOrLessIndex].offset;
+                float nextOffset = *stops[lastOneOrLessIndex + 1].offset;
                 
                 float interStopProportion = (1 - prevOffset) / (nextOffset - prevOffset);
@@ -327 +305 @@
 {
     if (m_gradientType == CSSDeprecatedLinearGradient || m_gradientType == CSSDeprecatedRadialGradient) {
-        sortStopsIfNeeded();
-
         Gradient::ColorStopVector result;
         result.reserveInitialCapacity(m_stops.size());
@@ -334 +310 @@
         for (auto& stop : m_stops) {
             float offset;
-            if (stop.m_position->isPercentage())
-                offset = stop.m_position->floatValue(CSSUnitType::CSS_PERCENTAGE) / 100;
+            if (stop.position->isPercentage())
+                offset = stop.position->floatValue(CSSUnitType::CSS_PERCENTAGE) / 100;
             else
-                offset = stop.m_position->floatValue(CSSUnitType::CSS_NUMBER);
-
-            Color color = stop.m_resolvedColor;
+                offset = stop.position->floatValue(CSSUnitType::CSS_NUMBER);
+
+            Color color = stop.resolvedColor;
             if (style.hasAppleColorFilter())
                 style.appleColorFilter().transformColor(color);
@@ -345 +321 @@
         }
 
+        std::stable_sort(result.begin(), result.end(), [] (const Gradient::ColorStop& a, const Gradient::ColorStop& b) {
+            return a.offset < b.offset;
+        });
+
         return result;
     }
@@ -356 +336 @@
         auto& stop = m_stops[i];
 
-        stops[i].isMidpoint = stop.isMidpoint;
-
-        Color color = stop.m_resolvedColor;
+        Color color = stop.resolvedColor;
         if (style.hasAppleColorFilter())
             style.appleColorFilter().transformColor(color);
@@ -364 +342 @@
         stops[i].color = color;
 
-        if (stop.m_position) {
-            auto& positionValue = *stop.m_position;
+        if (stop.position) {
+            auto& positionValue = *stop.position;
             if (positionValue.isPercentage())
                 stops[i].offset = positionValue.floatValue(CSSUnitType::CSS_PERCENTAGE) / 100;
@@ -383 +361 @@
                 stops[i].offset = 0;
             }
-            stops[i].specified = true;
         } else {
             // If the first color-stop does not have a position, its position defaults to 0%.
             // If the last color-stop does not have a position, its position defaults to 100%.
-            if (!i) {
+            if (!i)
                 stops[i].offset = 0;
-                stops[i].specified = true;
-            } else if (numStops > 1 && i == numStops - 1) {
+            else if (numStops > 1 && i == numStops - 1)
                 stops[i].offset = 1;
-                stops[i].specified = true;
-            }
         }
 
@@ -399 +373 @@
         // color-stop before it in the list, its position is changed to be equal to the
         // largest specified position of any color-stop before it.
-        if (stops[i].specified && i > 0) {
+        if (stops[i].isSpecified() && i > 0) {
             size_t prevSpecifiedIndex;
             for (prevSpecifiedIndex = i - 1; prevSpecifiedIndex; --prevSpecifiedIndex) {
-                if (stops[prevSpecifiedIndex].specified)
+                if (stops[prevSpecifiedIndex].isSpecified())
                     break;
             }
 
-            if (stops[i].offset < stops[prevSpecifiedIndex].offset)
+            if (*stops[i].offset < *stops[prevSpecifiedIndex].offset)
                 stops[i].offset = stops[prevSpecifiedIndex].offset;
         }
     }
 
-    ASSERT(stops[0].specified && stops[numStops - 1].specified);
+    ASSERT(stops[0].isSpecified() && stops[numStops - 1].isSpecified());
 
     // If any color-stop still does not have a position, then, for each run of adjacent
@@ -421 +395 @@
 
         for (size_t i = 0; i < numStops; ++i) {
-            if (!stops[i].specified && !inUnspecifiedRun) {
+            if (!stops[i].isSpecified() && !inUnspecifiedRun) {
                 unspecifiedRunStart = i;
                 inUnspecifiedRun = true;
-            } else if (stops[i].specified && inUnspecifiedRun) {
+            } else if (stops[i].isSpecified() && inUnspecifiedRun) {
                 size_t unspecifiedRunEnd = i;
 
                 if (unspecifiedRunStart < unspecifiedRunEnd) {
-                    float lastSpecifiedOffset = stops[unspecifiedRunStart - 1].offset;
-                    float nextSpecifiedOffset = stops[unspecifiedRunEnd].offset;
+                    float lastSpecifiedOffset = *stops[unspecifiedRunStart - 1].offset;
+                    float nextSpecifiedOffset = *stops[unspecifiedRunEnd].offset;
                     float delta = (nextSpecifiedOffset - lastSpecifiedOffset) / (unspecifiedRunEnd - unspecifiedRunStart + 1);
 
@@ -455 +429 @@
     // extra stops and generate hard lines.
     for (size_t x = 1; x < stops.size() - 1;) {
-        if (!stops[x].isMidpoint) {
+        if (!stops[x].isMidpoint()) {
             ++x;
             continue;
@@ -465 +439 @@
         Color color2 = stops[x + 1].color;
         // Likewise find the position of previous and next color stop.
-        float offset1 = stops[x - 1].offset;
-        float offset2 = stops[x + 1].offset;
-        float offset = stops[x].offset;
+        float offset1 = *stops[x - 1].offset;
+        float offset2 = *stops[x + 1].offset;
+        float offset = *stops[x].offset;
 
         // Check if everything coincides or the midpoint is exactly in the middle.
@@ -480 +454 @@
             // Morph the midpoint to a regular stop with the color of the next color stop.
             stops[x].color = color2;
-            stops[x].isMidpoint = false;
             continue;
         }
@@ -488 +461 @@
             // Morph the midpoint to a regular stop with the color of the previous color stop.
             stops[x].color = color1;
-            stops[x].isMidpoint = false;
             continue;
         }
@@ -509 +481 @@
         // calculate colors
         for (size_t y = 0; y < 9; ++y) {
-            float relativeOffset = (newStops[y].offset - offset1) / (offset2 - offset1);
+            float relativeOffset = (*newStops[y].offset - offset1) / (offset2 - offset1);
             float multiplier = std::pow(relativeOffset, std::log(.5f) / std::log(midpoint));
             // FIXME: Why not premultiply here?
@@ -528 +500 @@
         // If the difference in the positions of the first and last color-stops is 0,
         // the gradient defines a solid-color image with the color of the last color-stop in the rule.
-        float gradientRange = stops.last().offset - stops.first().offset;
+        float gradientRange = *stops.last().offset - *stops.first().offset;
         if (!gradientRange) {
             stops.first().offset = 0;
@@ -541 +513 @@
 
             // Work backwards from the first, adding stops until we get one before 0.
-            float firstOffset = stops[0].offset;
+            float firstOffset = *stops[0].offset;
             if (firstOffset > 0) {
                 float currOffset = firstOffset;
@@ -555 +527 @@
 
                     if (srcStopOrdinal)
-                        currOffset -= stops[originalFirstStopIndex + srcStopOrdinal].offset - stops[originalFirstStopIndex + srcStopOrdinal - 1].offset;
+                        currOffset -= *stops[originalFirstStopIndex + srcStopOrdinal].offset - *stops[originalFirstStopIndex + srcStopOrdinal - 1].offset;
                     srcStopOrdinal = (srcStopOrdinal + originalNumStops - 1) % originalNumStops;
                 }
@@ -561 +533 @@
 
             // Work forwards from the end, adding stops until we get one after 1.
-            float lastOffset = stops[stops.size() - 1].offset;
+            float lastOffset = *stops[stops.size() - 1].offset;
             if (lastOffset < maxExtent) {
                 float currOffset = lastOffset;
@@ -574 +546 @@
                         break;
                     if (srcStopOrdinal < originalNumStops - 1)
-                        currOffset += stops[srcStopIndex + 1].offset - stops[srcStopIndex].offset;
+                        currOffset += *stops[srcStopIndex + 1].offset - *stops[srcStopIndex].offset;
                     srcStopOrdinal = (srcStopOrdinal + 1) % originalNumStops;
                 }
@@ -582 +554 @@
 
     // If the gradient goes outside the 0-1 range, normalize it by moving the endpoints, and adjusting the stops.
-    if (stops.size() > 1 && (stops.first().offset < 0 || stops.last().offset > 1))
+    if (stops.size() > 1 && (*stops.first().offset < 0 || *stops.last().offset > 1))
         gradientAdapter.normalizeStopsAndEndpointsOutsideRange(stops);
     
@@ -588 +560 @@
     result.reserveInitialCapacity(stops.size());
     for (auto& stop : stops)
-        result.uncheckedAppend({ stop.offset, stop.color });
+        result.uncheckedAppend({ *stop.offset, stop.color });
 
     return result;
@@ -595 +567 @@
 static float positionFromValue(const CSSPrimitiveValue* value, const CSSToLengthConversionData& conversionData, const FloatSize& size, bool isHorizontal)
 {
-    int origin = 0;
-    int sign = 1;
-    int edgeDistance = isHorizontal ? size.width() : size.height();
-    
+    if (!value)
+        return 0;
+
+    float origin = 0;
+    float sign = 1;
+    float edgeDistance = isHorizontal ? size.width() : size.height();
+
     // In this case the center of the gradient is given relative to an edge in the
     // form of: [ top | bottom | right | left ] [ <percentage> | <length> ].
     if (value->isPair()) {
         CSSValueID originID = value->pairValue()->first()->valueID();
-        value = value->pairValue()->second();
-        
         if (originID == CSSValueRight || originID == CSSValueBottom) {
             // For right/bottom, the offset is relative to the far edge.
@@ -610 +583 @@
             sign = -1;
         }
-    }
-    
+        value = value->pairValue()->second();
+    }
+
     if (value->isNumber())
         return origin + sign * value->floatValue() * conversionData.zoom();
-    
+
     if (value->isPercentage())
-        return origin + sign * value->floatValue() / 100.f * edgeDistance;
-
-    if (value->isCalculatedPercentageWithLength()) {
-        Ref<CalculationValue> calculationValue { value->cssCalcValue()->createCalculationValue(conversionData) };
-        return origin + sign * calculationValue->evaluate(edgeDistance);
-    }
-    
+        return origin + sign * value->floatValue() / 100 * edgeDistance;
+
+    if (value->isCalculatedPercentageWithLength())
+        return origin + sign * value->cssCalcValue()->createCalculationValue(conversionData)->evaluate(edgeDistance);
+
     switch (value->valueID()) {
     case CSSValueTop:
@@ -632 +604 @@
     case CSSValueBottom:
         ASSERT(!isHorizontal);
-        return size.height();
+        return edgeDistance;
     case CSSValueRight:
         ASSERT(isHorizontal);
-        return size.width();
+        return edgeDistance;
     case CSSValueCenter:
         return origin + sign * .5f * edgeDistance;
@@ -645 +617 @@
 }
 
-FloatPoint CSSGradientValue::computeEndPoint(CSSPrimitiveValue* horizontal, CSSPrimitiveValue* vertical, const CSSToLengthConversionData& conversionData, const FloatSize& size)
-{
-    FloatPoint result;
-
-    if (horizontal)
-        result.setX(positionFromValue(horizontal, conversionData, size, true));
-
-    if (vertical)
-        result.setY(positionFromValue(vertical, conversionData, size, false));
-
-    return result;
+// Resolve points/radii to front end values.
+static FloatPoint computeEndPoint(const CSSPrimitiveValue* horizontal, const CSSPrimitiveValue* vertical, const CSSToLengthConversionData& conversionData, const FloatSize& size)
+{
+    return { positionFromValue(horizontal, conversionData, size, true), positionFromValue(vertical, conversionData, size, false) };
 }
 
 bool CSSGradientValue::isCacheable() const
 {
+    if (hasColorDerivedFromElement())
+        return false;
     for (auto& stop : m_stops) {
-        if (stop.m_colorIsDerivedFromElement)
+        if (stop.position && stop.position->isFontRelativeLength())
             return false;
-
-        if (!stop.m_position)
-            continue;
-
-        if (stop.m_position->isFontRelativeLength())
+    }
+    return true;
+}
+
+bool CSSGradientValue::knownToBeOpaque(const RenderElement& renderer) const
+{
+    bool hasColorFilter = renderer.style().hasAppleColorFilter();
+    for (auto& stop : m_stops) {
+        Color color = stop.resolvedColor;
+        if (hasColorFilter)
+            renderer.style().appleColorFilter().transformColor(color);
+        if (!color.isOpaque())
             return false;
     }
-
     return true;
 }
 
-bool CSSGradientValue::knownToBeOpaque(const RenderElement& renderer) const
-{
-    bool hasColorFilter = renderer.style().hasAppleColorFilter();
-
-    for (auto& stop : m_stops) {
-        if (hasColorFilter) {
-            Color stopColor = stop.m_resolvedColor;
-            renderer.style().appleColorFilter().transformColor(stopColor);
-            if (!stopColor.isOpaque())
-                return false;
-        }
-
-        if (!stop.m_resolvedColor.isOpaque())
-            return false;
-    }
-    return true;
+bool CSSGradientValue::equals(const CSSGradientValue& other) const
+{
+    return compareCSSValuePtr(m_firstX, other.m_firstX)
+        && compareCSSValuePtr(m_firstY, other.m_firstY)
+        && compareCSSValuePtr(m_secondX, other.m_secondX)
+        && compareCSSValuePtr(m_secondY, other.m_secondY)
+        && m_stops == other.m_stops
+        && m_gradientType == other.m_gradientType
+        && m_repeating == other.m_repeating;
 }
 
@@ -695 +661 @@
 {
     for (auto& stop : stops) {
-        double position = stop.m_position->doubleValue(CSSUnitType::CSS_NUMBER);
+        double position = stop.position->doubleValue(CSSUnitType::CSS_NUMBER);
         if (!position)
-            builder.append(", from(", stop.m_color->cssText(), ')');
+            builder.append(", from(", stop.color->cssText(), ')');
         else if (position == 1)
-            builder.append(", to(", stop.m_color->cssText(), ')');
+            builder.append(", to(", stop.color->cssText(), ')');
         else
-            builder.append(", color-stop(", position, ", ", stop.m_color->cssText(), ')');
-    }
-}
-
-void CSSGradientValue::writeColorStop(StringBuilder& builder, const CSSGradientColorStop& stop) const
-{
-    if (!stop.isMidpoint && stop.m_color)
-        builder.append(stop.m_color->cssText());
-
-    if (stop.m_position) {
-        if (!stop.isMidpoint)
-            builder.append(' ');
-        builder.append(stop.m_position->cssText());
-    }
+            builder.append(", color-stop(", position, ", ", stop.color->cssText(), ')');
+    }
+}
+
+template<typename T, typename U> static void appendSpaceSeparatedOptionalCSSPtrText(StringBuilder& builder, const T& a, const U& b)
+{
+    if (a && b)
+        builder.append(a->cssText(), ' ', b->cssText());
+    else if (a)
+        builder.append(a->cssText());
+    else if (b)
+        builder.append(b->cssText());
+}
+
+static void writeColorStop(StringBuilder& builder, const CSSGradientColorStop& stop)
+{
+    appendSpaceSeparatedOptionalCSSPtrText(builder, stop.color, stop.position);
 }
 
@@ -720 +689 @@
 {
     StringBuilder result;
-    if (m_gradientType == CSSDeprecatedLinearGradient) {
-        result.append("-webkit-gradient(linear, ", m_firstX->cssText(), ' ', m_firstY->cssText(), ", ", m_secondX->cssText(), ' ', m_secondY->cssText());
-        appendGradientStops(result, m_stops);
-    } else if (m_gradientType == CSSPrefixedLinearGradient) {
-        if (m_repeating)
+    if (gradientType() == CSSDeprecatedLinearGradient) {
+        result.append("-webkit-gradient(linear, ", firstX()->cssText(), ' ', firstY()->cssText(), ", ", secondX()->cssText(), ' ', secondY()->cssText());
+        appendGradientStops(result, stops());
+    } else if (gradientType() == CSSPrefixedLinearGradient) {
+        if (isRepeating())
             result.appendLiteral("-webkit-repeating-linear-gradient(");
         else
@@ -731 +700 @@
         if (m_angle)
             result.append(m_angle->cssText());
-        else {
-            if (m_firstX && m_firstY)
-                result.append(m_firstX->cssText(), ' ', m_firstY->cssText());
-            else if (m_firstX)
-                result.append(m_firstX->cssText());
-            else if (m_firstY)
-                result.append(m_firstY->cssText());
-        }
-
-        for (auto& stop : m_stops) {
+        else
+            appendSpaceSeparatedOptionalCSSPtrText(result, firstX(), firstY());
+
+        for (auto& stop : stops()) {
             result.appendLiteral(", ");
             writeColorStop(result, stop);
         }
     } else {
-        if (m_repeating)
+        if (isRepeating())
             result.appendLiteral("repeating-linear-gradient(");
         else
@@ -755 +718 @@
             result.append(m_angle->cssText());
             wroteSomething = true;
-        } else if ((m_firstX || m_firstY) && !(!m_firstX && m_firstY && m_firstY->valueID() == CSSValueBottom)) {
+        } else if ((firstX() || firstY()) && !(!firstX() && firstY() && firstY()->valueID() == CSSValueBottom)) {
             result.appendLiteral("to ");
-            if (m_firstX && m_firstY)
-                result.append(m_firstX->cssText(), ' ', m_firstY->cssText());
-            else if (m_firstX)
-                result.append(m_firstX->cssText());
-            else
-                result.append(m_firstY->cssText());
+            appendSpaceSeparatedOptionalCSSPtrText(result, firstX(), firstY());
             wroteSomething = true;
         }
 
-        if (wroteSomething)
-            result.appendLiteral(", ");
-
-        bool wroteFirstStop = false;
-        for (auto& stop : m_stops) {
-            if (wroteFirstStop)
+        for (auto& stop : stops()) {
+            if (wroteSomething)
                 result.appendLiteral(", ");
-            wroteFirstStop = true;
+            wroteSomething = true;
             writeColorStop(result, stop);
         }
@@ -860 +814 @@
     if (m_angle) {
         float angle = m_angle->floatValue(CSSUnitType::CSS_DEG);
-        endPointsFromAngle(angle, size, firstPoint, secondPoint, m_gradientType);
+        endPointsFromAngle(angle, size, firstPoint, secondPoint, gradientType());
     } else {
-        switch (m_gradientType) {
+        switch (gradientType()) {
         case CSSDeprecatedLinearGradient:
-            firstPoint = computeEndPoint(m_firstX.get(), m_firstY.get(), conversionData, size);
-            if (m_secondX || m_secondY)
-                secondPoint = computeEndPoint(m_secondX.get(), m_secondY.get(), conversionData, size);
+            firstPoint = computeEndPoint(firstX(), firstY(), conversionData, size);
+            if (secondX() || secondY())
+                secondPoint = computeEndPoint(secondX(), secondY(), conversionData, size);
             else {
-                if (m_firstX)
+                if (firstX())
                     secondPoint.setX(size.width() - firstPoint.x());
-                if (m_firstY)
+                if (firstY())
                     secondPoint.setY(size.height() - firstPoint.y());
             }
             break;
         case CSSPrefixedLinearGradient:
-            firstPoint = computeEndPoint(m_firstX.get(), m_firstY.get(), conversionData, size);
-            if (m_firstX)
+            firstPoint = computeEndPoint(firstX(), firstY(), conversionData, size);
+            if (firstX())
                 secondPoint.setX(size.width() - firstPoint.x());
-            if (m_firstY)
+            if (firstY())
                 secondPoint.setY(size.height() - firstPoint.y());
             break;
         case CSSLinearGradient:
-            if (m_firstX && m_firstY) {
+            if (firstX() && firstY()) {
                 // "Magic" corners, so the 50% line touches two corners.
                 float rise = size.width();
                 float run = size.height();
-                if (m_firstX && m_firstX->valueID() == CSSValueLeft)
+                if (firstX() && firstX()->valueID() == CSSValueLeft)
                     run *= -1;
-                if (m_firstY && m_firstY->valueID() == CSSValueBottom)
+                if (firstY() && firstY()->valueID() == CSSValueBottom)
                     rise *= -1;
                 // Compute angle, and flip it back to "bearing angle" degrees.
                 float angle = 90 - rad2deg(atan2(rise, run));
-                endPointsFromAngle(angle, size, firstPoint, secondPoint, m_gradientType);
-            } else if (m_firstX || m_firstY) { 
-                secondPoint = computeEndPoint(m_firstX.get(), m_firstY.get(), conversionData, size);
-                if (m_firstX)
+                endPointsFromAngle(angle, size, firstPoint, secondPoint, gradientType());
+            } else if (firstX() || firstY()) {
+                secondPoint = computeEndPoint(firstX(), firstY(), conversionData, size);
+                if (firstX())
                     firstPoint.setX(size.width() - secondPoint.x());
-                if (m_firstY)
+                if (firstY())
                     firstPoint.setY(size.height() - secondPoint.y());
             } else
@@ -918 +872 @@
 bool CSSLinearGradientValue::equals(const CSSLinearGradientValue& other) const
 {
-    if (m_gradientType == CSSDeprecatedLinearGradient)
-        return other.m_gradientType == m_gradientType
-            && compareCSSValuePtr(m_firstX, other.m_firstX)
-            && compareCSSValuePtr(m_firstY, other.m_firstY)
-            && compareCSSValuePtr(m_secondX, other.m_secondX)
-            && compareCSSValuePtr(m_secondY, other.m_secondY)
-            && m_stops == other.m_stops;
-
-    if (m_gradientType != other.m_gradientType)
-        return false;
-
-    if (m_repeating != other.m_repeating)
-        return false;
-
-    if (m_angle)
-        return compareCSSValuePtr(m_angle, other.m_angle) && m_stops == other.m_stops;
-
-    if (other.m_angle)
-        return false;
-
-    bool equalXandY = false;
-    if (m_firstX && m_firstY)
-        equalXandY = compareCSSValuePtr(m_firstX, other.m_firstX) && compareCSSValuePtr(m_firstY, other.m_firstY);
-    else if (m_firstX)
-        equalXandY = compareCSSValuePtr(m_firstX, other.m_firstX) && !other.m_firstY;
-    else if (m_firstY)
-        equalXandY = compareCSSValuePtr(m_firstY, other.m_firstY) && !other.m_firstX;
-    else
-        equalXandY = !other.m_firstX && !other.m_firstY;
-
-    return equalXandY && m_stops == other.m_stops;
+    return CSSGradientValue::equals(other) && compareCSSValuePtr(m_angle, other.m_angle);
 }
 
@@ -955 +879 @@
     StringBuilder result;
 
-    if (m_gradientType == CSSDeprecatedRadialGradient) {
-        result.append("-webkit-gradient(radial, ", m_firstX->cssText(), ' ', m_firstY->cssText(), ", ", m_firstRadius->cssText(),
-            ", ", m_secondX->cssText(), ' ', m_secondY->cssText(), ", ", m_secondRadius->cssText());
-        appendGradientStops(result, m_stops);
-    } else if (m_gradientType == CSSPrefixedRadialGradient) {
-        if (m_repeating)
+    if (gradientType() == CSSDeprecatedRadialGradient) {
+        result.append("-webkit-gradient(radial, ", firstX()->cssText(), ' ', firstY()->cssText(), ", ", m_firstRadius->cssText(),
+            ", ", secondX()->cssText(), ' ', secondY()->cssText(), ", ", m_secondRadius->cssText());
+        appendGradientStops(result, stops());
+    } else if (gradientType() == CSSPrefixedRadialGradient) {
+        if (isRepeating())
             result.appendLiteral("-webkit-repeating-radial-gradient(");
         else
             result.appendLiteral("-webkit-radial-gradient(");
 
-        if (m_firstX && m_firstY)
-            result.append(m_firstX->cssText(), ' ', m_firstY->cssText());
-        else if (m_firstX)
-            result.append(m_firstX->cssText());
-        else if (m_firstY)
-            result.append(m_firstY->cssText());
+        if (firstX() || firstY())
+            appendSpaceSeparatedOptionalCSSPtrText(result, firstX(), firstY());
         else
             result.appendLiteral("center");
@@ -987 +907 @@
             result.append(", ", m_endHorizontalSize->cssText(), ' ', m_endVerticalSize->cssText());
 
-        for (auto& stop : m_stops) {
+        for (auto& stop : stops()) {
             result.appendLiteral(", ");
             writeColorStop(result, stop);
         }
     } else {
-        if (m_repeating)
+        if (isRepeating())
             result.appendLiteral("repeating-radial-gradient(");
         else
@@ -1020 +940 @@
         }
 
-        if (m_firstX || m_firstY) {
+        if (firstX() || firstY()) {
             if (wroteSomething)
                 result.append(' ');
             result.appendLiteral("at ");
-            if (m_firstX && m_firstY)
-                result.append(m_firstX->cssText(), ' ', m_firstY->cssText());
-            else if (m_firstX)
-                result.append(m_firstX->cssText());
-            else
-                result.append(m_firstY->cssText());
+            appendSpaceSeparatedOptionalCSSPtrText(result, firstX(), firstY());
             wroteSomething = true;
         }
@@ -1037 +952 @@
 
         bool wroteFirstStop = false;
-        for (auto& stop : m_stops) {
+        for (auto& stop : stops()) {
             if (wroteFirstStop)
                 result.appendLiteral(", ");
@@ -1144 +1059 @@
     CSSToLengthConversionData conversionData(&renderer.style(), renderer.document().documentElement()->renderStyle(), &renderer.view());
 
-    FloatPoint firstPoint = computeEndPoint(m_firstX.get(), m_firstY.get(), conversionData, size);
-    if (!m_firstX)
+    FloatPoint firstPoint = computeEndPoint(firstX(), firstY(), conversionData, size);
+    if (!firstX())
         firstPoint.setX(size.width() / 2);
-    if (!m_firstY)
+    if (!firstY())
         firstPoint.setY(size.height() / 2);
 
-    FloatPoint secondPoint = computeEndPoint(m_secondX.get(), m_secondY.get(), conversionData, size);
-    if (!m_secondX)
+    FloatPoint secondPoint = computeEndPoint(secondX(), secondY(), conversionData, size);
+    if (!secondX())
         secondPoint.setX(size.width() / 2);
-    if (!m_secondY)
+    if (!secondY())
         secondPoint.setY(size.height() / 2);
 
@@ -1267 +1182 @@
     // computeStops() only uses maxExtent for repeating gradients.
     float maxExtent = 0;
-    if (m_repeating) {
+    if (isRepeating()) {
         FloatPoint corner;
         maxExtent = distanceToFarthestCorner(secondPoint, size, corner);
@@ -1283 +1198 @@
 bool CSSRadialGradientValue::equals(const CSSRadialGradientValue& other) const
 {
-    if (m_gradientType == CSSDeprecatedRadialGradient)
-        return other.m_gradientType == m_gradientType
-            && compareCSSValuePtr(m_firstX, other.m_firstX)
-            && compareCSSValuePtr(m_firstY, other.m_firstY)
-            && compareCSSValuePtr(m_secondX, other.m_secondX)
-            && compareCSSValuePtr(m_secondY, other.m_secondY)
-            && compareCSSValuePtr(m_firstRadius, other.m_firstRadius)
-            && compareCSSValuePtr(m_secondRadius, other.m_secondRadius)
-            && m_stops == other.m_stops;
-
-    if (m_gradientType != other.m_gradientType)
-        return false;
-
-    if (m_repeating != other.m_repeating)
-        return false;
-
-    bool equalXandY = false;
-    if (m_firstX && m_firstY)
-        equalXandY = compareCSSValuePtr(m_firstX, other.m_firstX) && compareCSSValuePtr(m_firstY, other.m_firstY);
-    else if (m_firstX)
-        equalXandY = compareCSSValuePtr(m_firstX, other.m_firstX) && !other.m_firstY;
-    else if (m_firstY)
-        equalXandY = compareCSSValuePtr(m_firstY, other.m_firstY) && !other.m_firstX;
-    else
-        equalXandY = !other.m_firstX && !other.m_firstY;
-
-    if (!equalXandY)
-        return false;
-
-    bool equalShape = true;
-    bool equalSizingBehavior = true;
-    bool equalHorizontalAndVerticalSize = true;
-
-    if (m_shape)
-        equalShape = compareCSSValuePtr(m_shape, other.m_shape);
-    else if (m_sizingBehavior)
-        equalSizingBehavior = compareCSSValuePtr(m_sizingBehavior, other.m_sizingBehavior);
-    else if (m_endHorizontalSize && m_endVerticalSize)
-        equalHorizontalAndVerticalSize = compareCSSValuePtr(m_endHorizontalSize, other.m_endHorizontalSize) && compareCSSValuePtr(m_endVerticalSize, other.m_endVerticalSize);
-    else {
-        equalShape = !other.m_shape;
-        equalSizingBehavior = !other.m_sizingBehavior;
-        equalHorizontalAndVerticalSize = !other.m_endHorizontalSize && !other.m_endVerticalSize;
-    }
-    return equalShape && equalSizingBehavior && equalHorizontalAndVerticalSize && m_stops == other.m_stops;
-}
-
+    return CSSGradientValue::equals(other)
+        && compareCSSValuePtr(m_shape, other.m_shape)
+        && compareCSSValuePtr(m_sizingBehavior, other.m_sizingBehavior)
+        && compareCSSValuePtr(m_endHorizontalSize, other.m_endHorizontalSize)
+        && compareCSSValuePtr(m_endVerticalSize, other.m_endVerticalSize);
+}
 
 String CSSConicGradientValue::customCSSText() const
@@ -1335 +1209 @@
     StringBuilder result;
 
-    if (m_repeating)
+    if (isRepeating())
         result.appendLiteral("repeating-conic-gradient(");
     else
@@ -1347 +1221 @@
     }
 
-    if (m_firstX && m_firstY) {
+    if (firstX() && firstY()) {
         if (wroteSomething)
             result.append(' ');
-        result.append("at ", m_firstX->cssText(), ' ', m_firstY->cssText());
+        result.appendLiteral("at ");
+        appendSpaceSeparatedOptionalCSSPtrText(result, firstX(), firstY());
         wroteSomething = true;
     }
@@ -1358 +1233 @@
 
     bool wroteFirstStop = false;
-    for (auto& stop : m_stops) {
+    for (auto& stop : stops()) {
         if (wroteFirstStop)
             result.appendLiteral(", ");
@@ -1375 +1250 @@
     CSSToLengthConversionData conversionData(&renderer.style(), renderer.document().documentElement()->renderStyle(), &renderer.view());
 
-    FloatPoint centerPoint = computeEndPoint(m_firstX.get(), m_firstY.get(), conversionData, size);
-    if (!m_firstX)
+    FloatPoint centerPoint = computeEndPoint(firstX(), firstY(), conversionData, size);
+    if (!firstX())
         centerPoint.setX(size.width() / 2);
-    if (!m_firstY)
+    if (!firstY())
         centerPoint.setY(size.height() / 2);
 
@@ -1396 +1271 @@
 bool CSSConicGradientValue::equals(const CSSConicGradientValue& other) const
 {
-    if (m_repeating != other.m_repeating)
-        return false;
-
-    if (!compareCSSValuePtr(m_angle, other.m_angle))
-        return false;
-
-    bool equalXandY = false;
-    if (m_firstX && m_firstY)
-        equalXandY = compareCSSValuePtr(m_firstX, other.m_firstX) && compareCSSValuePtr(m_firstY, other.m_firstY);
-    else if (m_firstX)
-        equalXandY = compareCSSValuePtr(m_firstX, other.m_firstX) && !other.m_firstY;
-    else if (m_firstY)
-        equalXandY = compareCSSValuePtr(m_firstY, other.m_firstY) && !other.m_firstX;
-    else
-        equalXandY = !other.m_firstX && !other.m_firstY;
-
-    return equalXandY && m_stops == other.m_stops;
+    return CSSGradientValue::equals(other) && compareCSSValuePtr(m_angle, other.m_angle);
 }