AX: Implement updated CSS3 Speech for 'speak' and 'speak-as' properties
[WebKit-https.git] / Source / WebCore / css / CSSComputedStyleDeclaration.cpp
index 1fd9987..d6b421d 100644 (file)
@@ -1,6 +1,6 @@
 /*
  * Copyright (C) 2004 Zack Rusin <zack@kde.org>
- * Copyright (C) 2004-2014 Apple Inc. All rights reserved.
+ * Copyright (C) 2004-2017 Apple Inc. All rights reserved.
  * Copyright (C) 2007 Alexey Proskuryakov <ap@webkit.org>
  * Copyright (C) 2007 Nicholas Shanks <webkit@nickshanks.com>
  * Copyright (C) 2011 Sencha, Inc. All rights reserved.
 #include "config.h"
 #include "CSSComputedStyleDeclaration.h"
 
-#include "AnimationController.h"
 #include "BasicShapeFunctions.h"
-#include "BasicShapes.h"
+#include "CSSAnimationController.h"
 #include "CSSAnimationTriggerScrollValue.h"
 #include "CSSAspectRatioValue.h"
 #include "CSSBasicShapes.h"
 #include "CSSBorderImage.h"
 #include "CSSBorderImageSliceValue.h"
-#include "CSSCustomPropertyValue.h"
 #include "CSSFontFeatureValue.h"
+#include "CSSFontStyleValue.h"
 #include "CSSFontValue.h"
 #include "CSSFontVariationValue.h"
 #include "CSSFunctionValue.h"
 #include "CSSLineBoxContainValue.h"
-#include "CSSParser.h"
 #include "CSSPrimitiveValue.h"
 #include "CSSPrimitiveValueMappings.h"
 #include "CSSPropertyNames.h"
+#include "CSSPropertyParser.h"
 #include "CSSReflectValue.h"
 #include "CSSSelector.h"
 #include "CSSShadowValue.h"
 #include "CSSValuePool.h"
 #include "ComposedTreeAncestorIterator.h"
 #include "ContentData.h"
-#include "CounterContent.h"
 #include "CursorList.h"
+#include "DeprecatedCSSOMValue.h"
 #include "Document.h"
-#include "ExceptionCode.h"
+#include "DocumentTimeline.h"
+#include "FontCascade.h"
+#include "FontSelectionValueInlines.h"
 #include "FontTaggedSettings.h"
-#include "HTMLFrameOwnerElement.h"
 #include "NodeRenderStyle.h"
 #include "Pair.h"
-#include "PseudoElement.h"
 #include "Rect.h"
 #include "RenderBlock.h"
 #include "RenderBox.h"
 #include "SVGElement.h"
 #include "Settings.h"
 #include "ShapeValue.h"
-#include "StyleInheritedData.h"
 #include "StyleProperties.h"
 #include "StylePropertyShorthand.h"
 #include "StylePropertyShorthandFunctions.h"
 #include "StyleResolver.h"
 #include "StyleScope.h"
-#include "Text.h"
-#include "WebKitCSSTransformValue.h"
+#include "StyleScrollSnapPoints.h"
 #include "WebKitFontFamilyNames.h"
 #include "WillChangeData.h"
 #include <wtf/NeverDestroyed.h>
 #include <wtf/text/StringBuilder.h>
 
-#if ENABLE(CSS_GRID_LAYOUT)
 #include "CSSGridLineNamesValue.h"
 #include "CSSGridTemplateAreasValue.h"
 #include "RenderGrid.h"
-#endif
 
 #if ENABLE(DASHBOARD_SUPPORT)
 #include "DashboardRegion.h"
 #endif
 
-#if ENABLE(CSS_SCROLL_SNAP)
-#include "LengthRepeat.h"
-#include "StyleScrollSnapPoints.h"
-#endif
-
 #if ENABLE(CSS_ANIMATIONS_LEVEL_2)
 #include "AnimationTrigger.h"
 #endif
@@ -148,9 +138,12 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyBoxShadow,
     CSSPropertyBoxSizing,
     CSSPropertyCaptionSide,
+    CSSPropertyCaretColor,
     CSSPropertyClear,
     CSSPropertyClip,
     CSSPropertyColor,
+    CSSPropertyCounterIncrement,
+    CSSPropertyCounterReset,
     CSSPropertyContent,
     CSSPropertyCursor,
     CSSPropertyDirection,
@@ -159,10 +152,15 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyFloat,
     CSSPropertyFontFamily,
     CSSPropertyFontSize,
+    CSSPropertyFontStretch,
     CSSPropertyFontStyle,
     CSSPropertyFontSynthesis,
     CSSPropertyFontVariant,
     CSSPropertyFontWeight,
+#if ENABLE(VARIATION_FONTS)
+    CSSPropertyFontOpticalSizing,
+#endif
+    CSSPropertyHangingPunctuation,
     CSSPropertyHeight,
 #if ENABLE(CSS_IMAGE_ORIENTATION)
     CSSPropertyImageOrientation,
@@ -185,6 +183,8 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyMaxWidth,
     CSSPropertyMinHeight,
     CSSPropertyMinWidth,
+    CSSPropertyObjectFit,
+    CSSPropertyObjectPosition,
     CSSPropertyOpacity,
     CSSPropertyOrphans,
     CSSPropertyOutlineColor,
@@ -205,7 +205,7 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyPosition,
     CSSPropertyResize,
     CSSPropertyRight,
-    CSSPropertySpeak,
+    CSSPropertySpeakAs,
     CSSPropertyTableLayout,
     CSSPropertyTabSize,
     CSSPropertyTextAlign,
@@ -226,6 +226,7 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyTextTransform,
     CSSPropertyTop,
     CSSPropertyTransform,
+    CSSPropertyTransformBox,
     CSSPropertyTransformOrigin,
     CSSPropertyTransformStyle,
     CSSPropertyTransitionDelay,
@@ -238,15 +239,23 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyWhiteSpace,
     CSSPropertyWidows,
     CSSPropertyWidth,
+    CSSPropertyWillChange,
     CSSPropertyWordBreak,
     CSSPropertyWordSpacing,
     CSSPropertyWordWrap,
 #if ENABLE(CSS_SCROLL_SNAP)
-    CSSPropertyWebkitScrollSnapType,
-    CSSPropertyWebkitScrollSnapPointsX,
-    CSSPropertyWebkitScrollSnapPointsY,
-    CSSPropertyWebkitScrollSnapDestination,
-    CSSPropertyWebkitScrollSnapCoordinate,
+    CSSPropertyScrollSnapMargin,
+    CSSPropertyScrollSnapMarginLeft,
+    CSSPropertyScrollSnapMarginTop,
+    CSSPropertyScrollSnapMarginRight,
+    CSSPropertyScrollSnapMarginBottom,
+    CSSPropertyScrollPadding,
+    CSSPropertyScrollPaddingLeft,
+    CSSPropertyScrollPaddingTop,
+    CSSPropertyScrollPaddingRight,
+    CSSPropertyScrollPaddingBottom,
+    CSSPropertyScrollSnapType,
+    CSSPropertyScrollSnapAlign,
 #endif
     CSSPropertyZIndex,
     CSSPropertyZoom,
@@ -305,15 +314,17 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyAlignSelf,
     CSSPropertyFilter,
     CSSPropertyFlexBasis,
+    CSSPropertyFlexDirection,
+    CSSPropertyFlexFlow,
     CSSPropertyFlexGrow,
     CSSPropertyFlexShrink,
-    CSSPropertyFlexDirection,
     CSSPropertyFlexWrap,
     CSSPropertyJustifyContent,
-#if ENABLE(CSS_GRID_LAYOUT)
     CSSPropertyJustifySelf,
     CSSPropertyJustifyItems,
-#endif
+    CSSPropertyPlaceContent,
+    CSSPropertyPlaceItems,
+    CSSPropertyPlaceSelf,
 #if ENABLE(FILTERS_LEVEL_2)
     CSSPropertyWebkitBackdropFilter,
 #endif
@@ -325,7 +336,9 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyFontVariantNumeric,
     CSSPropertyFontVariantAlternates,
     CSSPropertyFontVariantEastAsian,
-#if ENABLE(CSS_GRID_LAYOUT)
+#if ENABLE(VARIATION_FONTS)
+    CSSPropertyFontVariationSettings,
+#endif
     CSSPropertyGridAutoColumns,
     CSSPropertyGridAutoFlow,
     CSSPropertyGridAutoRows,
@@ -338,7 +351,6 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyGridRowStart,
     CSSPropertyGridColumnGap,
     CSSPropertyGridRowGap,
-#endif
     CSSPropertyWebkitHyphenateCharacter,
     CSSPropertyWebkitHyphenateLimitAfter,
     CSSPropertyWebkitHyphenateLimitBefore,
@@ -347,7 +359,7 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyWebkitInitialLetter,
     CSSPropertyWebkitLineAlign,
     CSSPropertyWebkitLineBoxContain,
-    CSSPropertyWebkitLineBreak,
+    CSSPropertyLineBreak,
     CSSPropertyWebkitLineClamp,
     CSSPropertyWebkitLineGrid,
     CSSPropertyWebkitLineSnap,
@@ -406,22 +418,17 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyWebkitUserDrag,
     CSSPropertyWebkitUserModify,
     CSSPropertyWebkitUserSelect,
-#if ENABLE(CSS_REGIONS)
-    CSSPropertyWebkitFlowInto,
-    CSSPropertyWebkitFlowFrom,
-    CSSPropertyWebkitRegionBreakAfter,
-    CSSPropertyWebkitRegionBreakBefore,
-    CSSPropertyWebkitRegionBreakInside,
-    CSSPropertyWebkitRegionFragment,
-#endif
-    CSSPropertyShapeMargin,
     CSSPropertyShapeImageThreshold,
+    CSSPropertyShapeMargin,
+    CSSPropertyShapeOutside,
+    CSSPropertyShapeRendering,
     CSSPropertyBufferedRendering,
     CSSPropertyClipPath,
     CSSPropertyClipRule,
     CSSPropertyCx,
     CSSPropertyCy,
     CSSPropertyMask,
+    CSSPropertyMaskType,
     CSSPropertyFilter,
     CSSPropertyFloodColor,
     CSSPropertyFloodOpacity,
@@ -437,13 +444,12 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyMarkerEnd,
     CSSPropertyMarkerMid,
     CSSPropertyMarkerStart,
-    CSSPropertyMaskType,
     CSSPropertyPaintOrder,
     CSSPropertyR,
     CSSPropertyRx,
     CSSPropertyRy,
-    CSSPropertyShapeRendering,
     CSSPropertyStroke,
+    CSSPropertyStrokeColor,
     CSSPropertyStrokeDasharray,
     CSSPropertyStrokeDashoffset,
     CSSPropertyStrokeLinecap,
@@ -592,11 +598,10 @@ static Ref<CSSPrimitiveValue> valueForNinePieceImageQuad(const LengthBox& box)
 static Ref<CSSValue> valueForNinePieceImageRepeat(const NinePieceImage& image)
 {
     auto& cssValuePool = CSSValuePool::singleton();
-    RefPtr<CSSPrimitiveValue> horizontalRepeat = cssValuePool.createIdentifierValue(valueForRepeatRule(image.horizontalRule()));
-
+    auto horizontalRepeat = cssValuePool.createIdentifierValue(valueForRepeatRule(image.horizontalRule()));
     RefPtr<CSSPrimitiveValue> verticalRepeat;
     if (image.horizontalRule() == image.verticalRule())
-        verticalRepeat = horizontalRepeat;
+        verticalRepeat = horizontalRepeat.copyRef();
     else
         verticalRepeat = cssValuePool.createIdentifierValue(valueForRepeatRule(image.verticalRule()));
     return cssValuePool.createValue(Pair::create(WTFMove(horizontalRepeat), WTFMove(verticalRepeat)));
@@ -674,57 +679,116 @@ static Ref<CSSValue> valueForReflection(const StyleReflection* reflection, const
     return CSSReflectValue::create(direction.releaseNonNull(), offset.releaseNonNull(), valueForNinePieceImage(reflection->mask()));
 }
 
-static Ref<CSSValueList> createPositionListForLayer(CSSPropertyID propertyID, const FillLayer* layer, const RenderStyle& style)
+static Ref<CSSValueList> createPositionListForLayer(CSSPropertyID propertyID, const FillLayer& layer, const RenderStyle& style)
 {
-    auto positionList = CSSValueList::createSpaceSeparated();
-    if (layer->isBackgroundOriginSet()) {
+    auto list = CSSValueList::createSpaceSeparated();
+    if (layer.isBackgroundXOriginSet()) {
         ASSERT_UNUSED(propertyID, propertyID == CSSPropertyBackgroundPosition || propertyID == CSSPropertyWebkitMaskPosition);
-        positionList.get().append(CSSValuePool::singleton().createValue(layer->backgroundXOrigin()));
+        list->append(CSSValuePool::singleton().createValue(layer.backgroundXOrigin()));
     }
-    positionList.get().append(zoomAdjustedPixelValueForLength(layer->xPosition(), style));
-    if (layer->isBackgroundOriginSet()) {
+    list->append(zoomAdjustedPixelValueForLength(layer.xPosition(), style));
+    if (layer.isBackgroundYOriginSet()) {
         ASSERT(propertyID == CSSPropertyBackgroundPosition || propertyID == CSSPropertyWebkitMaskPosition);
-        positionList.get().append(CSSValuePool::singleton().createValue(layer->backgroundYOrigin()));
+        list->append(CSSValuePool::singleton().createValue(layer.backgroundYOrigin()));
     }
-    positionList.get().append(zoomAdjustedPixelValueForLength(layer->yPosition(), style));
-    return positionList;
+    list->append(zoomAdjustedPixelValueForLength(layer.yPosition(), style));
+    return list;
 }
 
-static RefPtr<CSSValue> positionOffsetValue(const RenderStyle& style, CSSPropertyID propertyID)
+static Length getOffsetComputedLength(const RenderStyle& style, CSSPropertyID propertyID)
 {
-    Length length;
+    // If specified as a length, the corresponding absolute length; if specified as
+    // a percentage, the specified value; otherwise, 'auto'. Hence, we can just
+    // return the value in the style.
+    //
+    // See http://www.w3.org/TR/CSS21/cascade.html#computed-value
     switch (propertyID) {
-        case CSSPropertyLeft:
-            length = style.left();
-            break;
-        case CSSPropertyRight:
-            length = style.right();
-            break;
-        case CSSPropertyTop:
-            length = style.top();
-            break;
-        case CSSPropertyBottom:
-            length = style.bottom();
-            break;
-        default:
-            return nullptr;
+    case CSSPropertyLeft:
+        return style.left();
+    case CSSPropertyRight:
+        return style.right();
+    case CSSPropertyTop:
+        return style.top();
+    case CSSPropertyBottom:
+        return style.bottom();
+    default:
+        ASSERT_NOT_REACHED();
     }
 
-    if (style.hasOutOfFlowPosition()) {
-        if (length.isFixed())
-            return zoomAdjustedPixelValue(length.value(), style);
+    return { };
+}
 
-        return CSSValuePool::singleton().createValue(length);
+static LayoutUnit getOffsetUsedStyleRelative(RenderBox& box, CSSPropertyID propertyID)
+{
+    // For relatively positioned boxes, the offset is with respect to the top edges
+    // of the box itself. This ties together top/bottom and left/right to be
+    // opposites of each other.
+    //
+    // See http://www.w3.org/TR/CSS2/visuren.html#relative-positioning
+    //
+    // Specifically;
+    //   Since boxes are not split or stretched as a result of 'left' or
+    //   'right', the used values are always: left = -right.
+    // and
+    //   Since boxes are not split or stretched as a result of 'top' or
+    //   'bottom', the used values are always: top = -bottom.
+    switch (propertyID) {
+    case CSSPropertyTop:
+        return box.relativePositionOffset().height();
+    case CSSPropertyBottom:
+        return -(box.relativePositionOffset().height());
+    case CSSPropertyLeft:
+        return box.relativePositionOffset().width();
+    case CSSPropertyRight:
+        return -(box.relativePositionOffset().width());
+    default:
+        ASSERT_NOT_REACHED();
     }
 
-    if (style.hasInFlowPosition()) {
-        // FIXME: It's not enough to simply return "auto" values for one offset if the other side is defined.
-        // In other words if left is auto and right is not auto, then left's computed value is negative right().
-        // So we should get the opposite length unit and see if it is auto.
-        return CSSValuePool::singleton().createValue(length);
+    return 0;
+}
+
+static LayoutUnit getOffsetUsedStyleOutOfFlowPositioned(RenderBlock& container, RenderBox& box, CSSPropertyID propertyID)
+{
+    // For out-of-flow positioned boxes, the offset is how far an box's margin
+    // edge is offset below the edge of the box's containing block.
+    // See http://www.w3.org/TR/CSS2/visuren.html#position-props
+
+    // Margins are included in offsetTop/offsetLeft so we need to remove them here.
+    switch (propertyID) {
+    case CSSPropertyTop:
+        return box.offsetTop() - box.marginTop();
+    case CSSPropertyBottom:
+        return container.clientHeight() - (box.offsetTop() + box.offsetHeight()) - box.marginBottom();
+    case CSSPropertyLeft:
+        return box.offsetLeft() - box.marginLeft();
+    case CSSPropertyRight:
+        return container.clientWidth() - (box.offsetLeft() + box.offsetWidth()) - box.marginRight();
+    default:
+        ASSERT_NOT_REACHED();
     }
 
-    return CSSValuePool::singleton().createIdentifierValue(CSSValueAuto);
+    return 0;
+}
+
+static RefPtr<CSSValue> positionOffsetValue(const RenderStyle& style, CSSPropertyID propertyID, RenderObject* renderer)
+{
+    // If the element is not displayed; return the "computed value".
+    if (!renderer || !renderer->isBox())
+        return zoomAdjustedPixelValueForLength(getOffsetComputedLength(style, propertyID), style);
+
+    // We should return the "used value".
+    auto& box = downcast<RenderBox>(*renderer);
+    auto* containingBlock = box.containingBlock();
+    if (box.isRelativelyPositioned() || !containingBlock)
+        return zoomAdjustedPixelValue(getOffsetUsedStyleRelative(box, propertyID), style);
+    if (renderer->isOutOfFlowPositioned())
+        return zoomAdjustedPixelValue(getOffsetUsedStyleOutOfFlowPositioned(*containingBlock, box, propertyID), style);
+    // In-flow element.
+    auto offset = getOffsetComputedLength(style, propertyID);
+    if (offset.isAuto())
+        return CSSValuePool::singleton().createIdentifierValue(CSSValueAuto);
+    return zoomAdjustedPixelValueForLength(offset, style);
 }
 
 RefPtr<CSSPrimitiveValue> ComputedStyleExtractor::currentColorOrValidColor(const RenderStyle* style, const Color& color) const
@@ -751,39 +815,38 @@ static Ref<CSSPrimitiveValue> autoOrZoomAdjustedValue(Length length, const Rende
     return zoomAdjustedPixelValue(valueForLength(length, 0), style);
 }
 
-static Ref<CSSValueList> getBorderRadiusCornerValues(const LengthSize& radius, const RenderStyle& style)
+static Ref<CSSValueList> borderRadiusCornerValues(const LengthSize& radius, const RenderStyle& style)
 {
     auto list = CSSValueList::createSpaceSeparated();
-    list.get().append(percentageOrZoomAdjustedValue(radius.width(), style));
-    list.get().append(percentageOrZoomAdjustedValue(radius.height(), style));
+    list->append(percentageOrZoomAdjustedValue(radius.width, style));
+    list->append(percentageOrZoomAdjustedValue(radius.height, style));
     return list;
 }
 
-static Ref<CSSValue> getBorderRadiusCornerValue(const LengthSize& radius, const RenderStyle& style)
+static Ref<CSSValue> borderRadiusCornerValue(const LengthSize& radius, const RenderStyle& style)
 {
-    if (radius.width() == radius.height())
-        return percentageOrZoomAdjustedValue(radius.width(), style);
-
-    return getBorderRadiusCornerValues(radius, style);
+    if (radius.width == radius.height)
+        return percentageOrZoomAdjustedValue(radius.width, style);
+    return borderRadiusCornerValues(radius, style);
 }
 
-static Ref<CSSValueList> getBorderRadiusShorthandValue(const RenderStyle& style)
+static Ref<CSSValueList> borderRadiusShorthandValue(const RenderStyle& style)
 {
     auto list = CSSValueList::createSlashSeparated();
-    bool showHorizontalBottomLeft = style.borderTopRightRadius().width() != style.borderBottomLeftRadius().width();
-    bool showHorizontalBottomRight = showHorizontalBottomLeft || (style.borderBottomRightRadius().width() != style.borderTopLeftRadius().width());
-    bool showHorizontalTopRight = showHorizontalBottomRight || (style.borderTopRightRadius().width() != style.borderTopLeftRadius().width());
+    bool showHorizontalBottomLeft = style.borderTopRightRadius().width != style.borderBottomLeftRadius().width;
+    bool showHorizontalBottomRight = showHorizontalBottomLeft || (style.borderBottomRightRadius().width != style.borderTopLeftRadius().width);
+    bool showHorizontalTopRight = showHorizontalBottomRight || (style.borderTopRightRadius().width != style.borderTopLeftRadius().width);
 
-    bool showVerticalBottomLeft = style.borderTopRightRadius().height() != style.borderBottomLeftRadius().height();
-    bool showVerticalBottomRight = showVerticalBottomLeft || (style.borderBottomRightRadius().height() != style.borderTopLeftRadius().height());
-    bool showVerticalTopRight = showVerticalBottomRight || (style.borderTopRightRadius().height() != style.borderTopLeftRadius().height());
+    bool showVerticalBottomLeft = style.borderTopRightRadius().height != style.borderBottomLeftRadius().height;
+    bool showVerticalBottomRight = showVerticalBottomLeft || (style.borderBottomRightRadius().height != style.borderTopLeftRadius().height);
+    bool showVerticalTopRight = showVerticalBottomRight || (style.borderTopRightRadius().height != style.borderTopLeftRadius().height);
 
-    RefPtr<CSSValueList> topLeftRadius = getBorderRadiusCornerValues(style.borderTopLeftRadius(), style);
-    RefPtr<CSSValueList> topRightRadius = getBorderRadiusCornerValues(style.borderTopRightRadius(), style);
-    RefPtr<CSSValueList> bottomRightRadius = getBorderRadiusCornerValues(style.borderBottomRightRadius(), style);
-    RefPtr<CSSValueList> bottomLeftRadius = getBorderRadiusCornerValues(style.borderBottomLeftRadius(), style);
+    auto topLeftRadius = borderRadiusCornerValues(style.borderTopLeftRadius(), style);
+    auto topRightRadius = borderRadiusCornerValues(style.borderTopRightRadius(), style);
+    auto bottomRightRadius = borderRadiusCornerValues(style.borderBottomRightRadius(), style);
+    auto bottomLeftRadius = borderRadiusCornerValues(style.borderBottomLeftRadius(), style);
 
-    RefPtr<CSSValueList> horizontalRadii = CSSValueList::createSpaceSeparated();
+    auto horizontalRadii = CSSValueList::createSpaceSeparated();
     horizontalRadii->append(*topLeftRadius->item(0));
     if (showHorizontalTopRight)
         horizontalRadii->append(*topRightRadius->item(0));
@@ -792,9 +855,9 @@ static Ref<CSSValueList> getBorderRadiusShorthandValue(const RenderStyle& style)
     if (showHorizontalBottomLeft)
         horizontalRadii->append(*bottomLeftRadius->item(0));
 
-    list.get().append(horizontalRadii.releaseNonNull());
+    list->append(WTFMove(horizontalRadii));
 
-    RefPtr<CSSValueList> verticalRadiiList = CSSValueList::createSpaceSeparated();
+    auto verticalRadiiList = CSSValueList::createSpaceSeparated();
     verticalRadiiList->append(*topLeftRadius->item(1));
     if (showVerticalTopRight)
         verticalRadiiList->append(*topRightRadius->item(1));
@@ -803,8 +866,8 @@ static Ref<CSSValueList> getBorderRadiusShorthandValue(const RenderStyle& style)
     if (showVerticalBottomLeft)
         verticalRadiiList->append(*bottomLeftRadius->item(1));
 
-    if (!verticalRadiiList->equals(downcast<CSSValueList>(*list.get().item(0))))
-        list.get().append(verticalRadiiList.releaseNonNull());
+    if (!verticalRadiiList->equals(downcast<CSSValueList>(*list->item(0))))
+        list->append(WTFMove(verticalRadiiList));
 
     return list;
 }
@@ -818,12 +881,12 @@ static LayoutRect sizingBox(RenderObject& renderer)
     return box.style().boxSizing() == BORDER_BOX ? box.borderBoxRect() : box.computedCSSContentBoxRect();
 }
 
-static Ref<WebKitCSSTransformValue> matrixTransformValue(const TransformationMatrix& transform, const RenderStyle& style)
+static Ref<CSSFunctionValue> matrixTransformValue(const TransformationMatrix& transform, const RenderStyle& style)
 {
-    RefPtr<WebKitCSSTransformValue> transformValue;
+    RefPtr<CSSFunctionValue> transformValue;
     auto& cssValuePool = CSSValuePool::singleton();
     if (transform.isAffine()) {
-        transformValue = WebKitCSSTransformValue::create(WebKitCSSTransformValue::MatrixTransformOperation);
+        transformValue = CSSFunctionValue::create(CSSValueMatrix);
 
         transformValue->append(cssValuePool.createValue(transform.a(), CSSPrimitiveValue::CSS_NUMBER));
         transformValue->append(cssValuePool.createValue(transform.b(), CSSPrimitiveValue::CSS_NUMBER));
@@ -832,7 +895,7 @@ static Ref<WebKitCSSTransformValue> matrixTransformValue(const TransformationMat
         transformValue->append(zoomAdjustedNumberValue(transform.e(), style));
         transformValue->append(zoomAdjustedNumberValue(transform.f(), style));
     } else {
-        transformValue = WebKitCSSTransformValue::create(WebKitCSSTransformValue::Matrix3DTransformOperation);
+        transformValue = CSSFunctionValue::create(CSSValueMatrix3d);
 
         transformValue->append(cssValuePool.createValue(transform.m11(), CSSPrimitiveValue::CSS_NUMBER));
         transformValue->append(cssValuePool.createValue(transform.m12(), CSSPrimitiveValue::CSS_NUMBER));
@@ -873,7 +936,7 @@ static Ref<CSSValue> computedTransform(RenderObject* renderer, const RenderStyle
 
     // FIXME: Need to print out individual functions (https://bugs.webkit.org/show_bug.cgi?id=23924)
     auto list = CSSValueList::createSpaceSeparated();
-    list.get().append(matrixTransformValue(transform, style));
+    list->append(matrixTransformValue(transform, style));
     return WTFMove(list);
 }
 
@@ -920,7 +983,7 @@ Ref<CSSValue> ComputedStyleExtractor::valueForFilter(const RenderStyle& style, c
 
         if (filterOperation.type() == FilterOperation::REFERENCE) {
             ReferenceFilterOperation& referenceOperation = downcast<ReferenceFilterOperation>(filterOperation);
-            list.get().append(cssValuePool.createValue(referenceOperation.url(), CSSPrimitiveValue::CSS_URI));
+            list->append(cssValuePool.createValue(referenceOperation.url(), CSSPrimitiveValue::CSS_URI));
         } else {
             RefPtr<CSSFunctionValue> filterValue;
             switch (filterOperation.type()) {
@@ -982,13 +1045,12 @@ Ref<CSSValue> ComputedStyleExtractor::valueForFilter(const RenderStyle& style, c
                 filterValue = CSSFunctionValue::create(CSSValueInvalid);
                 break;
             }
-            list.get().append(filterValue.releaseNonNull());
+            list->append(filterValue.releaseNonNull());
         }
     }
     return WTFMove(list);
 }
 
-#if ENABLE(CSS_GRID_LAYOUT)
 static Ref<CSSValue> specifiedValueForGridTrackBreadth(const GridLength& trackBreadth, const RenderStyle& style)
 {
     if (!trackBreadth.isLength())
@@ -1006,16 +1068,19 @@ static Ref<CSSValue> specifiedValueForGridTrackSize(const GridTrackSize& trackSi
     case LengthTrackSizing:
         return specifiedValueForGridTrackBreadth(trackSize.minTrackBreadth(), style);
     case FitContentTrackSizing: {
-        auto fitContentTrackSize = CSSValueList::createCommaSeparated();
+        auto fitContentTrackSize = CSSFunctionValue::create(CSSValueFitContent);
         fitContentTrackSize->append(zoomAdjustedPixelValueForLength(trackSize.fitContentTrackBreadth().length(), style));
-        return CSSFunctionValue::create("fit-content(", WTFMove(fitContentTrackSize));
+        return WTFMove(fitContentTrackSize);
     }
     default:
         ASSERT(trackSize.type() == MinMaxTrackSizing);
-        auto minMaxTrackBreadths = CSSValueList::createCommaSeparated();
+        if (trackSize.minTrackBreadth().isAuto() && trackSize.maxTrackBreadth().isFlex())
+            return CSSValuePool::singleton().createValue(trackSize.maxTrackBreadth().flex(), CSSPrimitiveValue::CSS_FR);
+
+        auto minMaxTrackBreadths = CSSFunctionValue::create(CSSValueMinmax);
         minMaxTrackBreadths->append(specifiedValueForGridTrackBreadth(trackSize.minTrackBreadth(), style));
         minMaxTrackBreadths->append(specifiedValueForGridTrackBreadth(trackSize.maxTrackBreadth(), style));
-        return CSSFunctionValue::create("minmax(", WTFMove(minMaxTrackBreadths));
+        return WTFMove(minMaxTrackBreadths);
     }
 }
 
@@ -1149,7 +1214,7 @@ static Ref<CSSValue> valueForGridTrackList(GridTrackSizingDirection direction, R
     } else {
         for (unsigned i = 0; i < trackSizes.size(); ++i) {
             addValuesForNamedGridLinesAtIndex(collector, i, list.get());
-            list.get().append(specifiedValueForGridTrackSize(trackSizes[i], style));
+            list->append(specifiedValueForGridTrackSize(trackSizes[i], style));
         }
         insertionIndex = trackSizes.size();
     }
@@ -1170,80 +1235,68 @@ static Ref<CSSValue> valueForGridPosition(const GridPosition& position)
 
     auto list = CSSValueList::createSpaceSeparated();
     if (position.isSpan()) {
-        list.get().append(cssValuePool.createIdentifierValue(CSSValueSpan));
-        list.get().append(cssValuePool.createValue(position.spanPosition(), CSSPrimitiveValue::CSS_NUMBER));
+        list->append(cssValuePool.createIdentifierValue(CSSValueSpan));
+        list->append(cssValuePool.createValue(position.spanPosition(), CSSPrimitiveValue::CSS_NUMBER));
     } else
-        list.get().append(cssValuePool.createValue(position.integerPosition(), CSSPrimitiveValue::CSS_NUMBER));
+        list->append(cssValuePool.createValue(position.integerPosition(), CSSPrimitiveValue::CSS_NUMBER));
 
     if (!position.namedGridLine().isNull())
-        list.get().append(cssValuePool.createValue(position.namedGridLine(), CSSPrimitiveValue::CSS_STRING));
+        list->append(cssValuePool.createValue(position.namedGridLine(), CSSPrimitiveValue::CSS_STRING));
     return WTFMove(list);
 }
-#endif
 
 static Ref<CSSValue> createTransitionPropertyValue(const Animation& animation)
 {
-    if (animation.animationMode() == Animation::AnimateNone)
+    switch (animation.animationMode()) {
+    case Animation::AnimateNone:
         return CSSValuePool::singleton().createIdentifierValue(CSSValueNone);
-    if (animation.animationMode() == Animation::AnimateAll)
+    case Animation::AnimateAll:
         return CSSValuePool::singleton().createIdentifierValue(CSSValueAll);
-    return CSSValuePool::singleton().createValue(getPropertyNameString(animation.property()), CSSPrimitiveValue::CSS_STRING);
+    case Animation::AnimateSingleProperty:
+        return CSSValuePool::singleton().createValue(getPropertyNameString(animation.property()), CSSPrimitiveValue::CSS_STRING);
+    case Animation::AnimateUnknownProperty:
+        return CSSValuePool::singleton().createValue(animation.unknownProperty(), CSSPrimitiveValue::CSS_STRING);
+    }
+    ASSERT_NOT_REACHED();
+    return CSSValuePool::singleton().createIdentifierValue(CSSValueNone);
 }
 
-static Ref<CSSValueList> getTransitionPropertyValue(const AnimationList* animList)
+static Ref<CSSValueList> transitionPropertyValue(const AnimationList* animationList)
 {
     auto list = CSSValueList::createCommaSeparated();
-    if (animList) {
-        for (size_t i = 0; i < animList->size(); ++i)
-            list.get().append(createTransitionPropertyValue(animList->animation(i)));
+    if (animationList) {
+        for (size_t i = 0; i < animationList->size(); ++i)
+            list->append(createTransitionPropertyValue(animationList->animation(i)));
     } else
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueAll));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueAll));
     return list;
 }
 
 #if ENABLE(CSS_SCROLL_SNAP)
-static Ref<CSSValueList> scrollSnapDestination(const RenderStyle& style, const LengthSize& destination)
-{
-    auto list = CSSValueList::createSpaceSeparated();
-    list.get().append(zoomAdjustedPixelValueForLength(destination.width(), style));
-    list.get().append(zoomAdjustedPixelValueForLength(destination.height(), style));
-    return list;
-}
 
-static Ref<CSSValue> scrollSnapPoints(const RenderStyle& style, const ScrollSnapPoints* points)
+static Ref<CSSValueList> valueForScrollSnapType(const ScrollSnapType& type)
 {
-    if (!points)
-        return CSSValuePool::singleton().createIdentifierValue(CSSValueNone);
-
-    if (points->usesElements)
-        return CSSValuePool::singleton().createIdentifierValue(CSSValueElements);
-    auto list = CSSValueList::createSpaceSeparated();
-    for (auto& point : points->offsets)
-        list.get().append(zoomAdjustedPixelValueForLength(point, style));
-    if (points->hasRepeat)
-        list.get().append(CSSValuePool::singleton().createValue(LengthRepeat::create(zoomAdjustedPixelValueForLength(points->repeatOffset, style))));
-    return WTFMove(list);
+    auto value = CSSValueList::createSpaceSeparated();
+    if (type.strictness == ScrollSnapStrictness::None)
+        value->append(CSSValuePool::singleton().createValue(CSSValueNone));
+    else {
+        value->append(CSSPrimitiveValue::create(type.axis));
+        value->append(CSSPrimitiveValue::create(type.strictness));
+    }
+    return value;
 }
 
-static Ref<CSSValue> scrollSnapCoordinates(const RenderStyle& style, const Vector<LengthSize>& coordinates)
+static Ref<CSSValueList> valueForScrollSnapAlignment(const ScrollSnapAlign& alignment)
 {
-    if (coordinates.isEmpty())
-        return CSSValuePool::singleton().createIdentifierValue(CSSValueNone);
-
-    auto list = CSSValueList::createCommaSeparated();
-
-    for (auto& coordinate : coordinates) {
-        auto pair = CSSValueList::createSpaceSeparated();
-        pair.get().append(zoomAdjustedPixelValueForLength(coordinate.width(), style));
-        pair.get().append(zoomAdjustedPixelValueForLength(coordinate.height(), style));
-        list.get().append(WTFMove(pair));
-    }
-
-    return WTFMove(list);
+    auto value = CSSValueList::createSpaceSeparated();
+    value->append(CSSPrimitiveValue::create(alignment.x));
+    value->append(CSSPrimitiveValue::create(alignment.y));
+    return value;
 }
+
 #endif
 
-static Ref<CSSValue> getWillChangePropertyValue(const WillChangeData* willChangeData)
+static Ref<CSSValue> willChangePropertyValue(const WillChangeData* willChangeData)
 {
     auto& cssValuePool = CSSValuePool::singleton();
     if (!willChangeData || !willChangeData->numFeatures())
@@ -1254,13 +1307,13 @@ static Ref<CSSValue> getWillChangePropertyValue(const WillChangeData* willChange
         WillChangeData::FeaturePropertyPair feature = willChangeData->featureAt(i);
         switch (feature.first) {
         case WillChangeData::ScrollPosition:
-            list.get().append(cssValuePool.createIdentifierValue(CSSValueScrollPosition));
+            list->append(cssValuePool.createIdentifierValue(CSSValueScrollPosition));
             break;
         case WillChangeData::Contents:
-            list.get().append(cssValuePool.createIdentifierValue(CSSValueContents));
+            list->append(cssValuePool.createIdentifierValue(CSSValueContents));
             break;
         case WillChangeData::Property:
-            list.get().append(cssValuePool.createIdentifierValue(feature.second));
+            list->append(cssValuePool.createIdentifierValue(feature.second));
             break;
         case WillChangeData::Invalid:
             ASSERT_NOT_REACHED();
@@ -1457,39 +1510,39 @@ static Ref<CSSValue> fontVariantEastAsianPropertyValue(FontVariantEastAsianVaria
     return WTFMove(valueList);
 }
 
-static Ref<CSSValueList> getDelayValue(const AnimationList* animList)
+static Ref<CSSValueList> delayValue(const AnimationList* animationList)
 {
     auto& cssValuePool = CSSValuePool::singleton();
     auto list = CSSValueList::createCommaSeparated();
-    if (animList) {
-        for (size_t i = 0; i < animList->size(); ++i)
-            list.get().append(cssValuePool.createValue(animList->animation(i).delay(), CSSPrimitiveValue::CSS_S));
+    if (animationList) {
+        for (size_t i = 0; i < animationList->size(); ++i)
+            list->append(cssValuePool.createValue(animationList->animation(i).delay(), CSSPrimitiveValue::CSS_S));
     } else {
         // Note that initialAnimationDelay() is used for both transitions and animations
-        list.get().append(cssValuePool.createValue(Animation::initialDelay(), CSSPrimitiveValue::CSS_S));
+        list->append(cssValuePool.createValue(Animation::initialDelay(), CSSPrimitiveValue::CSS_S));
     }
     return list;
 }
 
-static Ref<CSSValueList> getDurationValue(const AnimationList* animList)
+static Ref<CSSValueList> durationValue(const AnimationList* animationList)
 {
     auto& cssValuePool = CSSValuePool::singleton();
     auto list = CSSValueList::createCommaSeparated();
-    if (animList) {
-        for (size_t i = 0; i < animList->size(); ++i)
-            list.get().append(cssValuePool.createValue(animList->animation(i).duration(), CSSPrimitiveValue::CSS_S));
+    if (animationList) {
+        for (size_t i = 0; i < animationList->size(); ++i)
+            list->append(cssValuePool.createValue(animationList->animation(i).duration(), CSSPrimitiveValue::CSS_S));
     } else {
         // Note that initialAnimationDuration() is used for both transitions and animations
-        list.get().append(cssValuePool.createValue(Animation::initialDuration(), CSSPrimitiveValue::CSS_S));
+        list->append(cssValuePool.createValue(Animation::initialDuration(), CSSPrimitiveValue::CSS_S));
     }
     return list;
 }
 
-static Ref<CSSValue> createTimingFunctionValue(const TimingFunction* timingFunction)
+static Ref<CSSValue> createTimingFunctionValue(const TimingFunction& timingFunction)
 {
-    switch (timingFunction->type()) {
+    switch (timingFunction.type()) {
     case TimingFunction::CubicBezierFunction: {
-        auto& function = *static_cast<const CubicBezierTimingFunction*>(timingFunction);
+        auto& function = static_cast<const CubicBezierTimingFunction&>(timingFunction);
         if (function.timingFunctionPreset() != CubicBezierTimingFunction::Custom) {
             CSSValueID valueId = CSSValueInvalid;
             switch (function.timingFunctionPreset()) {
@@ -1512,59 +1565,60 @@ static Ref<CSSValue> createTimingFunctionValue(const TimingFunction* timingFunct
         return CSSCubicBezierTimingFunctionValue::create(function.x1(), function.y1(), function.x2(), function.y2());
     }
     case TimingFunction::StepsFunction: {
-        auto& function = *static_cast<const StepsTimingFunction*>(timingFunction);
+        auto& function = static_cast<const StepsTimingFunction&>(timingFunction);
         return CSSStepsTimingFunctionValue::create(function.numberOfSteps(), function.stepAtStart());
     }
     case TimingFunction::SpringFunction: {
-        auto& function = *static_cast<const SpringTimingFunction*>(timingFunction);
+        auto& function = static_cast<const SpringTimingFunction&>(timingFunction);
         return CSSSpringTimingFunctionValue::create(function.mass(), function.stiffness(), function.damping(), function.initialVelocity());
     }
     default:
-        ASSERT(timingFunction->type() == TimingFunction::LinearFunction);
+        ASSERT(timingFunction.type() == TimingFunction::LinearFunction);
         return CSSValuePool::singleton().createIdentifierValue(CSSValueLinear);
     }
 }
 
-static Ref<CSSValueList> getTimingFunctionValue(const AnimationList* animList)
+static Ref<CSSValueList> timingFunctionValue(const AnimationList* animationList)
 {
     auto list = CSSValueList::createCommaSeparated();
-    if (animList) {
-        for (size_t i = 0; i < animList->size(); ++i)
-            list.get().append(createTimingFunctionValue(animList->animation(i).timingFunction().get()));
+    if (animationList) {
+        for (size_t i = 0; i < animationList->size(); ++i)
+            list->append(createTimingFunctionValue(*animationList->animation(i).timingFunction()));
     } else
         // Note that initialAnimationTimingFunction() is used for both transitions and animations
-        list.get().append(createTimingFunctionValue(Animation::initialTimingFunction().get()));
+        list->append(createTimingFunctionValue(Animation::initialTimingFunction()));
     return list;
 }
 
 #if ENABLE(CSS_ANIMATIONS_LEVEL_2)
-static Ref<CSSValue> createAnimationTriggerValue(const AnimationTrigger* trigger, const RenderStyle& style)
+
+static Ref<CSSValue> createAnimationTriggerValue(const AnimationTrigger& trigger, const RenderStyle& style)
 {
-    switch (trigger->type()) {
+    switch (trigger.type()) {
     case AnimationTrigger::AnimationTriggerType::ScrollAnimationTriggerType: {
-        auto& scrollAnimationTrigger = downcast<ScrollAnimationTrigger>(*trigger);
+        auto& scrollAnimationTrigger = downcast<ScrollAnimationTrigger>(trigger);
         if (scrollAnimationTrigger.endValue().isAuto())
             return CSSAnimationTriggerScrollValue::create(zoomAdjustedPixelValueForLength(scrollAnimationTrigger.startValue(), style));
         return CSSAnimationTriggerScrollValue::create(zoomAdjustedPixelValueForLength(scrollAnimationTrigger.startValue(), style),
                                                       zoomAdjustedPixelValueForLength(scrollAnimationTrigger.endValue(), style));
     }
     default:
-        ASSERT(trigger->type() == AnimationTrigger::AnimationTriggerType::AutoAnimationTriggerType);
+        ASSERT(trigger.type() == AnimationTrigger::AnimationTriggerType::AutoAnimationTriggerType);
         return CSSValuePool::singleton().createIdentifierValue(CSSValueAuto);
     }
 }
 
-static Ref<CSSValueList> getAnimationTriggerValue(const AnimationList* animList, const RenderStyle& style)
+static Ref<CSSValueList> animationTriggerValue(const AnimationList* animationList, const RenderStyle& style)
 {
     auto list = CSSValueList::createCommaSeparated();
-    if (animList) {
-        for (size_t i = 0; i < animList->size(); ++i)
-            list.get().append(createAnimationTriggerValue(animList->animation(i).trigger().get(), style));
+    if (animationList) {
+        for (size_t i = 0; i < animationList->size(); ++i)
+            list->append(createAnimationTriggerValue(*animationList->animation(i).trigger(), style));
     } else
-        list.get().append(createAnimationTriggerValue(Animation::initialTrigger().get(), style));
-
+        list->append(createAnimationTriggerValue(Animation::initialTrigger().get(), style));
     return list;
 }
+
 #endif
 
 static Ref<CSSValue> createLineBoxContainValue(unsigned lineBoxContain)
@@ -1607,9 +1661,7 @@ CSSComputedStyleDeclaration::CSSComputedStyleDeclaration(Element& element, bool
     (pseudoElementName.substringSharingImpl(nameWithoutColonsStart))));
 }
 
-CSSComputedStyleDeclaration::~CSSComputedStyleDeclaration()
-{
-}
+CSSComputedStyleDeclaration::~CSSComputedStyleDeclaration() = default;
 
 void CSSComputedStyleDeclaration::ref()
 {
@@ -1641,7 +1693,7 @@ String CSSComputedStyleDeclaration::cssText() const
 
 ExceptionOr<void> CSSComputedStyleDeclaration::setCssText(const String&)
 {
-    return Exception { NO_MODIFICATION_ALLOWED_ERR };
+    return Exception { NoModificationAllowedError };
 }
 
 RefPtr<CSSPrimitiveValue> ComputedStyleExtractor::getFontSizeCSSValuePreferringKeyword()
@@ -1687,6 +1739,8 @@ static CSSValueID identifierForFamily(const AtomicString& family)
         return CSSValueSansSerif;
     if (family == serifFamily)
         return CSSValueSerif;
+    if (family == systemUiFamily)
+        return CSSValueSystemUi;
     return CSSValueInvalid;
 }
 
@@ -1701,7 +1755,7 @@ static Ref<CSSValue> renderTextDecorationFlagsToCSSValue(int textDecoration)
 {
     auto& cssValuePool = CSSValuePool::singleton();
     // Blink value is ignored.
-    RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
+    auto list = CSSValueList::createSpaceSeparated();
     if (textDecoration & TextDecorationUnderline)
         list->append(cssValuePool.createIdentifierValue(CSSValueUnderline));
     if (textDecoration & TextDecorationOverline)
@@ -1715,7 +1769,7 @@ static Ref<CSSValue> renderTextDecorationFlagsToCSSValue(int textDecoration)
 
     if (!list->length())
         return cssValuePool.createIdentifierValue(CSSValueNone);
-    return list.releaseNonNull();
+    return WTFMove(list);
 }
 
 static Ref<CSSValue> renderTextDecorationStyleFlagsToCSSValue(TextDecorationStyle textDecorationStyle)
@@ -1759,7 +1813,7 @@ static Ref<CSSValue> renderEmphasisPositionFlagsToCSSValue(TextEmphasisPosition
     ASSERT(!((textEmphasisPosition & TextEmphasisPositionOver) && (textEmphasisPosition & TextEmphasisPositionUnder)));
     ASSERT(!((textEmphasisPosition & TextEmphasisPositionLeft) && (textEmphasisPosition & TextEmphasisPositionRight)));
     auto& cssValuePool = CSSValuePool::singleton();
-    RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
+    auto list = CSSValueList::createSpaceSeparated();
     if (textEmphasisPosition & TextEmphasisPositionOver)
         list->append(cssValuePool.createIdentifierValue(CSSValueOver));
     if (textEmphasisPosition & TextEmphasisPositionUnder)
@@ -1768,16 +1822,34 @@ static Ref<CSSValue> renderEmphasisPositionFlagsToCSSValue(TextEmphasisPosition
         list->append(cssValuePool.createIdentifierValue(CSSValueLeft));
     if (textEmphasisPosition & TextEmphasisPositionRight)
         list->append(cssValuePool.createIdentifierValue(CSSValueRight));
-
     if (!list->length())
         return cssValuePool.createIdentifierValue(CSSValueNone);
-    return list.releaseNonNull();
+    return WTFMove(list);
 }
 
+static Ref<CSSValue> speakAsToCSSValue(ESpeakAs speakAs)
+{
+    auto& cssValuePool = CSSValuePool::singleton();
+    auto list = CSSValueList::createSpaceSeparated();
+    if (speakAs & SpeakNormal)
+        list->append(cssValuePool.createIdentifierValue(CSSValueNormal));
+    if (speakAs & SpeakSpellOut)
+        list->append(cssValuePool.createIdentifierValue(CSSValueSpellOut));
+    if (speakAs & SpeakDigits)
+        list->append(cssValuePool.createIdentifierValue(CSSValueDigits));
+    if (speakAs & SpeakLiteralPunctuation)
+        list->append(cssValuePool.createIdentifierValue(CSSValueLiteralPunctuation));
+    if (speakAs & SpeakNoPunctuation)
+        list->append(cssValuePool.createIdentifierValue(CSSValueNoPunctuation));
+    if (!list->length())
+        return cssValuePool.createIdentifierValue(CSSValueNormal);
+    return WTFMove(list);
+}
+    
 static Ref<CSSValue> hangingPunctuationToCSSValue(HangingPunctuation hangingPunctuation)
 {
     auto& cssValuePool = CSSValuePool::singleton();
-    RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
+    auto list = CSSValueList::createSpaceSeparated();
     if (hangingPunctuation & FirstHangingPunctuation)
         list->append(cssValuePool.createIdentifierValue(CSSValueFirst));
     if (hangingPunctuation & AllowEndHangingPunctuation)
@@ -1788,7 +1860,7 @@ static Ref<CSSValue> hangingPunctuationToCSSValue(HangingPunctuation hangingPunc
         list->append(cssValuePool.createIdentifierValue(CSSValueLast));
     if (!list->length())
         return cssValuePool.createIdentifierValue(CSSValueNone);
-    return list.releaseNonNull();
+    return WTFMove(list);
 }
     
 static Ref<CSSValue> fillRepeatToCSSValue(EFillRepeat xRepeat, EFillRepeat yRepeat)
@@ -1804,8 +1876,8 @@ static Ref<CSSValue> fillRepeatToCSSValue(EFillRepeat xRepeat, EFillRepeat yRepe
         return cssValuePool.createIdentifierValue(CSSValueRepeatY);
 
     auto list = CSSValueList::createSpaceSeparated();
-    list.get().append(cssValuePool.createValue(xRepeat));
-    list.get().append(cssValuePool.createValue(yRepeat));
+    list->append(cssValuePool.createValue(xRepeat));
+    list->append(cssValuePool.createValue(yRepeat));
     return WTFMove(list);
 }
 
@@ -1828,42 +1900,40 @@ static Ref<CSSValue> fillSizeToCSSValue(const FillSize& fillSize, const RenderSt
     if (fillSize.type == Cover)
         return CSSValuePool::singleton().createIdentifierValue(CSSValueCover);
 
-    if (fillSize.size.height().isAuto())
-        return zoomAdjustedPixelValueForLength(fillSize.size.width(), style);
+    if (fillSize.size.height.isAuto())
+        return zoomAdjustedPixelValueForLength(fillSize.size.width, style);
 
     auto list = CSSValueList::createSpaceSeparated();
-    list.get().append(zoomAdjustedPixelValueForLength(fillSize.size.width(), style));
-    list.get().append(zoomAdjustedPixelValueForLength(fillSize.size.height(), style));
+    list->append(zoomAdjustedPixelValueForLength(fillSize.size.width, style));
+    list->append(zoomAdjustedPixelValueForLength(fillSize.size.height, style));
     return WTFMove(list);
 }
 
-static Ref<CSSValue> altTextToCSSValue(const RenderStyle* style)
+static Ref<CSSValue> altTextToCSSValue(const RenderStyle& style)
 {
-    return CSSValuePool::singleton().createValue(style->contentAltText(), CSSPrimitiveValue::CSS_STRING);
+    return CSSValuePool::singleton().createValue(style.contentAltText(), CSSPrimitiveValue::CSS_STRING);
 }
     
-static Ref<CSSValueList> contentToCSSValue(const RenderStyle* style)
+static Ref<CSSValueList> contentToCSSValue(const RenderStyle& style)
 {
     auto& cssValuePool = CSSValuePool::singleton();
     auto list = CSSValueList::createSpaceSeparated();
-    for (const ContentData* contentData = style->contentData(); contentData; contentData = contentData->next()) {
+    for (auto* contentData = style.contentData(); contentData; contentData = contentData->next()) {
         if (is<CounterContentData>(*contentData))
-            list.get().append(cssValuePool.createValue(downcast<CounterContentData>(*contentData).counter().identifier(), CSSPrimitiveValue::CSS_COUNTER_NAME));
+            list->append(cssValuePool.createValue(downcast<CounterContentData>(*contentData).counter().identifier(), CSSPrimitiveValue::CSS_COUNTER_NAME));
         else if (is<ImageContentData>(*contentData))
-            list.get().append(downcast<ImageContentData>(*contentData).image().cssValue());
+            list->append(downcast<ImageContentData>(*contentData).image().cssValue());
         else if (is<TextContentData>(*contentData))
-            list.get().append(cssValuePool.createValue(downcast<TextContentData>(*contentData).text(), CSSPrimitiveValue::CSS_STRING));
+            list->append(cssValuePool.createValue(downcast<TextContentData>(*contentData).text(), CSSPrimitiveValue::CSS_STRING));
     }
-    if (style->hasFlowFrom())
-        list.get().append(cssValuePool.createValue(style->regionThread(), CSSPrimitiveValue::CSS_STRING));
     return list;
 }
 
-static RefPtr<CSSValue> counterToCSSValue(const RenderStyle* style, CSSPropertyID propertyID)
+static Ref<CSSValue> counterToCSSValue(const RenderStyle& style, CSSPropertyID propertyID)
 {
-    const CounterDirectiveMap* map = style->counterDirectives();
+    auto* map = style.counterDirectives();
     if (!map)
-        return nullptr;
+        return CSSValuePool::singleton().createIdentifierValue(CSSValueNone);
 
     auto& cssValuePool = CSSValuePool::singleton();
     auto list = CSSValueList::createSpaceSeparated();
@@ -1884,14 +1954,21 @@ static void logUnimplementedPropertyID(CSSPropertyID propertyID)
     LOG_ERROR("WebKit does not yet implement getComputedStyle for '%s'.", getPropertyName(propertyID));
 }
 
-static Ref<CSSValueList> fontFamilyFromStyle(const RenderStyle* style)
+static Ref<CSSValueList> fontFamilyListFromStyle(const RenderStyle& style)
 {
     auto list = CSSValueList::createCommaSeparated();
-    for (unsigned i = 0; i < style->fontCascade().familyCount(); ++i)
-        list.get().append(valueForFamily(style->fontCascade().familyAt(i)));
+    for (unsigned i = 0; i < style.fontCascade().familyCount(); ++i)
+        list->append(valueForFamily(style.fontCascade().familyAt(i)));
     return list;
 }
 
+static Ref<CSSValue> fontFamilyFromStyle(const RenderStyle& style)
+{
+    if (style.fontCascade().familyCount() == 1)
+        return valueForFamily(style.fontCascade().familyAt(0));
+    return fontFamilyListFromStyle(style);
+}
+
 static Ref<CSSPrimitiveValue> lineHeightFromStyle(const RenderStyle& style)
 {
     Length length = style.lineHeight();
@@ -1902,7 +1979,7 @@ static Ref<CSSPrimitiveValue> lineHeightFromStyle(const RenderStyle& style)
         // for how high to be in pixels does include things like minimum font size and the zoom factor.
         // On the other hand, since font-size doesn't include the zoom factor, we really can't do
         // that here either.
-        return zoomAdjustedPixelValue(static_cast<int>(length.percent() * style.fontDescription().specifiedSize()) / 100, style);
+        return zoomAdjustedPixelValue(static_cast<int>(length.percent() * style.fontDescription().computedSize()) / 100, style);
     }
     return zoomAdjustedPixelValue(floatValueForLength(length, 0), style);
 }
@@ -1912,226 +1989,244 @@ static Ref<CSSPrimitiveValue> fontSizeFromStyle(const RenderStyle& style)
     return zoomAdjustedPixelValue(style.fontDescription().computedSize(), style);
 }
 
-static Ref<CSSPrimitiveValue> fontStyleFromStyle(const RenderStyle* style)
+Ref<CSSPrimitiveValue> ComputedStyleExtractor::fontNonKeywordWeightFromStyleValue(FontSelectionValue weight)
+{
+    return CSSValuePool::singleton().createValue(static_cast<float>(weight), CSSPrimitiveValue::CSS_NUMBER);
+}
+
+Ref<CSSPrimitiveValue> ComputedStyleExtractor::fontWeightFromStyleValue(FontSelectionValue weight)
+{
+    if (auto value = fontWeightKeyword(weight))
+        return CSSValuePool::singleton().createIdentifierValue(value.value());
+    return fontNonKeywordWeightFromStyleValue(weight);
+}
+
+static Ref<CSSPrimitiveValue> fontWeightFromStyle(const RenderStyle& style)
+{
+    return ComputedStyleExtractor::fontWeightFromStyleValue(style.fontDescription().weight());
+}
+
+Ref<CSSPrimitiveValue> ComputedStyleExtractor::fontNonKeywordStretchFromStyleValue(FontSelectionValue stretch)
+{
+    return CSSValuePool::singleton().createValue(static_cast<float>(stretch), CSSPrimitiveValue::CSS_PERCENTAGE);
+}
+
+Ref<CSSPrimitiveValue> ComputedStyleExtractor::fontStretchFromStyleValue(FontSelectionValue stretch)
+{
+    if (auto keyword = fontStretchKeyword(stretch))
+        return CSSValuePool::singleton().createIdentifierValue(keyword.value());
+    return fontNonKeywordStretchFromStyleValue(stretch);
+}
+
+static Ref<CSSPrimitiveValue> fontStretchFromStyle(const RenderStyle& style)
+{
+    return ComputedStyleExtractor::fontStretchFromStyleValue(style.fontDescription().stretch());
+}
+
+Ref<CSSFontStyleValue> ComputedStyleExtractor::fontNonKeywordStyleFromStyleValue(FontSelectionValue italic)
+{
+    return CSSFontStyleValue::create(CSSValuePool::singleton().createIdentifierValue(CSSValueOblique), CSSValuePool::singleton().createValue(static_cast<float>(italic), CSSPrimitiveValue::CSS_DEG));
+}
+
+Ref<CSSFontStyleValue> ComputedStyleExtractor::fontStyleFromStyleValue(FontSelectionValue italic, FontStyleAxis fontStyleAxis)
+{
+    if (auto keyword = fontStyleKeyword(italic, fontStyleAxis))
+        return CSSFontStyleValue::create(CSSValuePool::singleton().createIdentifierValue(keyword.value()));
+    return fontNonKeywordStyleFromStyleValue(italic);
+}
+
+static Ref<CSSFontStyleValue> fontStyleFromStyle(const RenderStyle& style)
 {
-    if (style->fontDescription().italic())
-        return CSSValuePool::singleton().createIdentifierValue(CSSValueItalic);
-    return CSSValuePool::singleton().createIdentifierValue(CSSValueNormal);
+    return ComputedStyleExtractor::fontStyleFromStyleValue(style.fontDescription().italic(), style.fontDescription().fontStyleAxis());
 }
 
-static Ref<CSSValue> fontVariantFromStyle(const RenderStyle* style)
+static Ref<CSSValue> fontVariantFromStyle(const RenderStyle& style)
 {
-    if (style->fontDescription().variantSettings().isAllNormal())
+    if (style.fontDescription().variantSettings().isAllNormal())
         return CSSValuePool::singleton().createIdentifierValue(CSSValueNormal);
 
     auto list = CSSValueList::createSpaceSeparated();
 
-    switch (style->fontDescription().variantCommonLigatures()) {
+    switch (style.fontDescription().variantCommonLigatures()) {
     case FontVariantLigatures::Normal:
         break;
     case FontVariantLigatures::Yes:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueCommonLigatures));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueCommonLigatures));
         break;
     case FontVariantLigatures::No:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueNoCommonLigatures));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueNoCommonLigatures));
         break;
     }
 
-    switch (style->fontDescription().variantDiscretionaryLigatures()) {
+    switch (style.fontDescription().variantDiscretionaryLigatures()) {
     case FontVariantLigatures::Normal:
         break;
     case FontVariantLigatures::Yes:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueDiscretionaryLigatures));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueDiscretionaryLigatures));
         break;
     case FontVariantLigatures::No:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueNoDiscretionaryLigatures));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueNoDiscretionaryLigatures));
         break;
     }
 
-    switch (style->fontDescription().variantHistoricalLigatures()) {
+    switch (style.fontDescription().variantHistoricalLigatures()) {
     case FontVariantLigatures::Normal:
         break;
     case FontVariantLigatures::Yes:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueHistoricalLigatures));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueHistoricalLigatures));
         break;
     case FontVariantLigatures::No:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueNoHistoricalLigatures));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueNoHistoricalLigatures));
         break;
     }
 
-    switch (style->fontDescription().variantContextualAlternates()) {
+    switch (style.fontDescription().variantContextualAlternates()) {
     case FontVariantLigatures::Normal:
         break;
     case FontVariantLigatures::Yes:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueContextual));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueContextual));
         break;
     case FontVariantLigatures::No:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueNoContextual));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueNoContextual));
         break;
     }
 
-    switch (style->fontDescription().variantPosition()) {
+    switch (style.fontDescription().variantPosition()) {
     case FontVariantPosition::Normal:
         break;
     case FontVariantPosition::Subscript:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueSub));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueSub));
         break;
     case FontVariantPosition::Superscript:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueSuper));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueSuper));
         break;
     }
 
-    switch (style->fontDescription().variantCaps()) {
+    switch (style.fontDescription().variantCaps()) {
     case FontVariantCaps::Normal:
         break;
     case FontVariantCaps::Small:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueSmallCaps));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueSmallCaps));
         break;
     case FontVariantCaps::AllSmall:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueAllSmallCaps));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueAllSmallCaps));
         break;
     case FontVariantCaps::Petite:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValuePetiteCaps));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValuePetiteCaps));
         break;
     case FontVariantCaps::AllPetite:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueAllPetiteCaps));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueAllPetiteCaps));
         break;
     case FontVariantCaps::Unicase:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueUnicase));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueUnicase));
         break;
     case FontVariantCaps::Titling:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueTitlingCaps));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueTitlingCaps));
         break;
     }
 
-    switch (style->fontDescription().variantNumericFigure()) {
+    switch (style.fontDescription().variantNumericFigure()) {
     case FontVariantNumericFigure::Normal:
         break;
     case FontVariantNumericFigure::LiningNumbers:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueLiningNums));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueLiningNums));
         break;
     case FontVariantNumericFigure::OldStyleNumbers:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueOldstyleNums));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueOldstyleNums));
         break;
     }
 
-    switch (style->fontDescription().variantNumericSpacing()) {
+    switch (style.fontDescription().variantNumericSpacing()) {
     case FontVariantNumericSpacing::Normal:
         break;
     case FontVariantNumericSpacing::ProportionalNumbers:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueProportionalNums));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueProportionalNums));
         break;
     case FontVariantNumericSpacing::TabularNumbers:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueTabularNums));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueTabularNums));
         break;
     }
 
-    switch (style->fontDescription().variantNumericFraction()) {
+    switch (style.fontDescription().variantNumericFraction()) {
     case FontVariantNumericFraction::Normal:
         break;
     case FontVariantNumericFraction::DiagonalFractions:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueDiagonalFractions));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueDiagonalFractions));
         break;
     case FontVariantNumericFraction::StackedFractions:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueStackedFractions));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueStackedFractions));
         break;
     }
 
-    switch (style->fontDescription().variantNumericOrdinal()) {
+    switch (style.fontDescription().variantNumericOrdinal()) {
     case FontVariantNumericOrdinal::Normal:
         break;
     case FontVariantNumericOrdinal::Yes:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueOrdinal));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueOrdinal));
         break;
     }
 
-    switch (style->fontDescription().variantNumericSlashedZero()) {
+    switch (style.fontDescription().variantNumericSlashedZero()) {
     case FontVariantNumericSlashedZero::Normal:
         break;
     case FontVariantNumericSlashedZero::Yes:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueSlashedZero));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueSlashedZero));
         break;
     }
 
-    switch (style->fontDescription().variantAlternates()) {
+    switch (style.fontDescription().variantAlternates()) {
     case FontVariantAlternates::Normal:
         break;
     case FontVariantAlternates::HistoricalForms:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueHistoricalForms));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueHistoricalForms));
         break;
     }
 
-    switch (style->fontDescription().variantEastAsianVariant()) {
+    switch (style.fontDescription().variantEastAsianVariant()) {
     case FontVariantEastAsianVariant::Normal:
         break;
     case FontVariantEastAsianVariant::Jis78:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueJis78));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueJis78));
         break;
     case FontVariantEastAsianVariant::Jis83:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueJis83));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueJis83));
         break;
     case FontVariantEastAsianVariant::Jis90:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueJis90));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueJis90));
         break;
     case FontVariantEastAsianVariant::Jis04:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueJis04));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueJis04));
         break;
     case FontVariantEastAsianVariant::Simplified:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueSimplified));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueSimplified));
         break;
     case FontVariantEastAsianVariant::Traditional:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueTraditional));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueTraditional));
         break;
     }
 
-    switch (style->fontDescription().variantEastAsianWidth()) {
+    switch (style.fontDescription().variantEastAsianWidth()) {
     case FontVariantEastAsianWidth::Normal:
         break;
     case FontVariantEastAsianWidth::Full:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueFullWidth));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueFullWidth));
         break;
     case FontVariantEastAsianWidth::Proportional:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueProportionalWidth));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueProportionalWidth));
         break;
     }
 
-    switch (style->fontDescription().variantEastAsianRuby()) {
+    switch (style.fontDescription().variantEastAsianRuby()) {
     case FontVariantEastAsianRuby::Normal:
         break;
     case FontVariantEastAsianRuby::Yes:
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueRuby));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueRuby));
         break;
     }
 
     return WTFMove(list);
 }
 
-static Ref<CSSPrimitiveValue> fontWeightFromStyle(const RenderStyle* style)
-{
-    switch (style->fontDescription().weight()) {
-    case FontWeight100:
-        return CSSValuePool::singleton().createIdentifierValue(CSSValue100);
-    case FontWeight200:
-        return CSSValuePool::singleton().createIdentifierValue(CSSValue200);
-    case FontWeight300:
-        return CSSValuePool::singleton().createIdentifierValue(CSSValue300);
-    case FontWeightNormal:
-        return CSSValuePool::singleton().createIdentifierValue(CSSValueNormal);
-    case FontWeight500:
-        return CSSValuePool::singleton().createIdentifierValue(CSSValue500);
-    case FontWeight600:
-        return CSSValuePool::singleton().createIdentifierValue(CSSValue600);
-    case FontWeightBold:
-        return CSSValuePool::singleton().createIdentifierValue(CSSValueBold);
-    case FontWeight800:
-        return CSSValuePool::singleton().createIdentifierValue(CSSValue800);
-    case FontWeight900:
-        return CSSValuePool::singleton().createIdentifierValue(CSSValue900);
-    }
-    ASSERT_NOT_REACHED();
-    return CSSValuePool::singleton().createIdentifierValue(CSSValueNormal);
-}
-
 static Ref<CSSValue> fontSynthesisFromStyle(const RenderStyle& style)
 {
     if (style.fontDescription().fontSynthesis() == FontSynthesisNone)
@@ -2139,17 +2234,19 @@ static Ref<CSSValue> fontSynthesisFromStyle(const RenderStyle& style)
 
     auto list = CSSValueList::createSpaceSeparated();
     if (style.fontDescription().fontSynthesis() & FontSynthesisStyle)
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueStyle));
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueStyle));
     if (style.fontDescription().fontSynthesis() & FontSynthesisWeight)
-        list.get().append(CSSValuePool::singleton().createIdentifierValue(CSSValueWeight));
-    return Ref<CSSValue>(list.get());
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueWeight));
+    if (style.fontDescription().fontSynthesis() & FontSynthesisSmallCaps)
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueSmallCaps));
+    return WTFMove(list);
 }
 
 typedef const Length& (RenderStyle::*RenderStyleLengthGetter)() const;
 typedef LayoutUnit (RenderBoxModelObject::*RenderBoxComputedCSSValueGetter)() const;
 
 template<RenderStyleLengthGetter lengthGetter, RenderBoxComputedCSSValueGetter computedCSSValueGetter>
-inline RefPtr<CSSValue> zoomAdjustedPaddingOrMarginPixelValue(const RenderStyle& style, RenderObject* renderer)
+static RefPtr<CSSValue> zoomAdjustedPaddingOrMarginPixelValue(const RenderStyle& style, RenderObject* renderer)
 {
     Length unzoomzedLength = (style.*lengthGetter)();
     if (!is<RenderBox>(renderer) || unzoomzedLength.isFixed())
@@ -2158,11 +2255,14 @@ inline RefPtr<CSSValue> zoomAdjustedPaddingOrMarginPixelValue(const RenderStyle&
 }
 
 template<RenderStyleLengthGetter lengthGetter>
-inline bool paddingOrMarginIsRendererDependent(const RenderStyle* style, RenderObject* renderer)
+static bool paddingOrMarginIsRendererDependent(const RenderStyle* style, RenderObject* renderer)
 {
-    if (!renderer || !renderer->isBox())
-        return false;
-    return !(style && (style->*lengthGetter)().isFixed());
+    return renderer && style && renderer->isBox() && !(style->*lengthGetter)().isFixed();
+}
+
+static bool positionOffsetValueIsRendererDependent(const RenderStyle* style, RenderObject* renderer)
+{
+    return renderer && style && renderer->isBox();
 }
 
 static CSSValueID convertToPageBreak(BreakBetween value)
@@ -2198,35 +2298,28 @@ static CSSValueID convertToColumnBreak(BreakInside value)
     return CSSValueAuto;
 }
 
-#if ENABLE(CSS_REGIONS)
-static CSSValueID convertToRegionBreak(BreakBetween value)
-{
-    if (value == RegionBreakBetween)
-        return CSSValueAlways;
-    if (value == AvoidBreakBetween || value == AvoidRegionBreakBetween)
-        return CSSValueAvoid;
-    return CSSValueAuto;
-}
-    
-static CSSValueID convertToRegionBreak(BreakInside value)
+static inline bool isNonReplacedInline(RenderObject& renderer)
 {
-    if (value == AvoidBreakInside || value == AvoidRegionBreakInside)
-        return CSSValueAvoid;
-    return CSSValueAuto;
+    return renderer.isInline() && !renderer.isReplaced();
 }
-#endif
-    
+
 static bool isLayoutDependent(CSSPropertyID propertyID, const RenderStyle* style, RenderObject* renderer)
 {
     switch (propertyID) {
+    case CSSPropertyTop:
+    case CSSPropertyBottom:
+    case CSSPropertyLeft:
+    case CSSPropertyRight:
+        return positionOffsetValueIsRendererDependent(style, renderer);
     case CSSPropertyWidth:
     case CSSPropertyHeight:
+        return renderer && !renderer->isRenderSVGModelObject() && !isNonReplacedInline(*renderer);
     case CSSPropertyPerspectiveOrigin:
     case CSSPropertyTransformOrigin:
     case CSSPropertyTransform:
-    case CSSPropertyFilter:
+    case CSSPropertyFilter: // Why are filters layout-dependent?
 #if ENABLE(FILTERS_LEVEL_2)
-    case CSSPropertyWebkitBackdropFilter:
+    case CSSPropertyWebkitBackdropFilter: // Ditto for backdrop-filter.
 #endif
         return true;
     case CSSPropertyMargin: {
@@ -2257,19 +2350,17 @@ static bool isLayoutDependent(CSSPropertyID propertyID, const RenderStyle* style
         return paddingOrMarginIsRendererDependent<&RenderStyle::paddingBottom>(style, renderer);
     case CSSPropertyPaddingLeft:
         return paddingOrMarginIsRendererDependent<&RenderStyle::paddingLeft>(style, renderer); 
-#if ENABLE(CSS_GRID_LAYOUT)
     case CSSPropertyGridTemplateColumns:
     case CSSPropertyGridTemplateRows:
     case CSSPropertyGridTemplate:
     case CSSPropertyGrid:
         return renderer && renderer->isRenderGrid();
-#endif
     default:
         return false;
     }
 }
 
-Element* ComputedStyleExtractor::styledElement()
+Element* ComputedStyleExtractor::styledElement() const
 {
     if (!m_element)
         return nullptr;
@@ -2281,49 +2372,17 @@ Element* ComputedStyleExtractor::styledElement()
     return m_element.get();
 }
 
-#if ENABLE(CSS_GRID_LAYOUT)
-static StyleSelfAlignmentData resolveLegacyJustifyItems(const StyleSelfAlignmentData& data)
-{
-    if (data.positionType() == LegacyPosition)
-        return { data.position(), OverflowAlignmentDefault };
-    return data;
-}
 
-static StyleSelfAlignmentData resolveJustifyItemsAuto(const StyleSelfAlignmentData& data, Node* parent)
+RenderElement* ComputedStyleExtractor::styledRenderer() const
 {
-    if (data.position() != ItemPositionAuto)
-        return data;
-
-    // If the inherited value of justify-items includes the 'legacy' keyword, 'auto' computes to the inherited value.
-    const auto& inheritedValue = (!parent || !parent->computedStyle()) ? RenderStyle::initialDefaultAlignment() : parent->computedStyle()->justifyItems();
-    if (inheritedValue.positionType() == LegacyPosition)
-        return inheritedValue;
-    if (inheritedValue.position() == ItemPositionAuto)
-        return resolveJustifyItemsAuto(inheritedValue, parent->parentNode());
-    return { ItemPositionNormal, OverflowAlignmentDefault };
-}
-
-static StyleSelfAlignmentData resolveJustifySelfAuto(const StyleSelfAlignmentData& data, Node* parent)
-{
-    if (data.position() != ItemPositionAuto)
-        return data;
-
-    // The 'auto' keyword computes to the computed value of justify-items on the parent or 'normal' if the box has no parent.
-    if (!parent || !parent->computedStyle())
-        return { ItemPositionNormal, OverflowAlignmentDefault };
-    return resolveLegacyJustifyItems(resolveJustifyItemsAuto(parent->computedStyle()->justifyItems(), parent->parentNode()));
-}
-#endif
-
-static StyleSelfAlignmentData resolveAlignSelfAuto(const StyleSelfAlignmentData& data, Node* parent)
-{
-    if (data.position() != ItemPositionAuto)
-        return data;
-
-    // The 'auto' keyword computes to the computed value of align-items on the parent or 'normal' if the box has no parent.
-    if (!parent || !parent->computedStyle())
-        return { ItemPositionNormal, OverflowAlignmentDefault };
-    return parent->computedStyle()->alignItems();
+    auto* element = styledElement();
+    if (!element)
+        return nullptr;
+    if (m_pseudoElementSpecifier != NOPSEUDO && element == m_element.get())
+        return nullptr;
+    if (element->hasDisplayContents())
+        return nullptr;
+    return element->renderer();
 }
 
 static bool isImplicitlyInheritedGridOrFlexProperty(CSSPropertyID propertyID)
@@ -2331,10 +2390,8 @@ static bool isImplicitlyInheritedGridOrFlexProperty(CSSPropertyID propertyID)
     // It would be nice if grid and flex worked within normal CSS mechanisms and not invented their own inheritance system.
     switch (propertyID) {
     case CSSPropertyAlignSelf:
-#if ENABLE(CSS_GRID_LAYOUT)
     case CSSPropertyJustifySelf:
     case CSSPropertyJustifyItems:
-#endif
     // FIXME: In StyleResolver::adjustRenderStyle z-index is adjusted based on the parent display property for grid/flex.
     case CSSPropertyZIndex:
         return true;
@@ -2343,6 +2400,13 @@ static bool isImplicitlyInheritedGridOrFlexProperty(CSSPropertyID propertyID)
     }
 }
 
+// In CSS 2.1 the returned object should actually contain the "used values"
+// rather then the "computed values" (despite the name saying otherwise).
+//
+// See;
+// http://www.w3.org/TR/CSS21/cascade.html#used-value
+// http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
+// https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle#Notes
 RefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(CSSPropertyID propertyID, EUpdateLayout updateLayout) const
 {
     return ComputedStyleExtractor(m_element.ptr(), m_allowVisitedStyle, m_pseudoElementSpecifier).propertyValue(propertyID, updateLayout);
@@ -2404,8 +2468,11 @@ static inline const RenderStyle* computeRenderStyleForProperty(Element& element,
 {
     auto* renderer = element.renderer();
 
-    if (renderer && renderer->isComposited() && AnimationController::supportsAcceleratedAnimationOfProperty(propertyID)) {
-        ownedStyle = renderer->animation().getAnimatedStyleForRenderer(*renderer);
+    if (renderer && renderer->isComposited() && CSSAnimationController::supportsAcceleratedAnimationOfProperty(propertyID)) {
+        if (auto timeline = element.document().existingTimeline())
+            ownedStyle = timeline->animatedStyleForRenderer(*renderer);
+        else
+            ownedStyle = renderer->animation().animatedStyleForRenderer(*renderer);
         if (pseudoElementSpecifier && !element.isPseudoElement()) {
             // FIXME: This cached pseudo style will only exist if the animation has been run at least once.
             return ownedStyle->getCachedPseudoStyle(pseudoElementSpecifier);
@@ -2432,11 +2499,11 @@ static Ref<CSSValue> shapePropertyValue(const RenderStyle& style, const ShapeVal
 
     ASSERT(shapeValue->type() == ShapeValue::Type::Shape);
 
-    RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
+    auto list = CSSValueList::createSpaceSeparated();
     list->append(valueForBasicShape(style, *shapeValue->shape()));
     if (shapeValue->cssBox() != BoxMissing)
         list->append(CSSValuePool::singleton().createValue(shapeValue->cssBox()));
-    return list.releaseNonNull();
+    return WTFMove(list);
 }
 
 static Ref<CSSValueList> valueForItemPositionWithOverflowAlignment(const StyleSelfAlignmentData& data)
@@ -2444,11 +2511,17 @@ static Ref<CSSValueList> valueForItemPositionWithOverflowAlignment(const StyleSe
     auto& cssValuePool = CSSValuePool::singleton();
     auto result = CSSValueList::createSpaceSeparated();
     if (data.positionType() == LegacyPosition)
-        result.get().append(cssValuePool.createIdentifierValue(CSSValueLegacy));
-    result.get().append(cssValuePool.createValue(data.position()));
+        result->append(cssValuePool.createIdentifierValue(CSSValueLegacy));
+    if (data.position() == ItemPositionBaseline)
+        result->append(cssValuePool.createIdentifierValue(CSSValueBaseline));
+    else if (data.position() == ItemPositionLastBaseline) {
+        result->append(cssValuePool.createIdentifierValue(CSSValueLast));
+        result->append(cssValuePool.createIdentifierValue(CSSValueBaseline));
+    } else
+        result->append(cssValuePool.createValue(data.position()));
     if (data.position() >= ItemPositionCenter && data.overflow() != OverflowAlignmentDefault)
-        result.get().append(cssValuePool.createValue(data.overflow()));
-    ASSERT(result.get().length() <= 2);
+        result->append(cssValuePool.createValue(data.overflow()));
+    ASSERT(result->length() <= 2);
     return result;
 }
 
@@ -2456,25 +2529,71 @@ static Ref<CSSValueList> valueForContentPositionAndDistributionWithOverflowAlign
 {
     auto& cssValuePool = CSSValuePool::singleton();
     auto result = CSSValueList::createSpaceSeparated();
+    // Handle content-distribution values
     if (data.distribution() != ContentDistributionDefault)
-        result.get().append(cssValuePool.createValue(data.distribution()));
-    if (data.distribution() == ContentDistributionDefault || data.position() != ContentPositionNormal) {
-        bool gridEnabled = false;
-#if ENABLE(CSS_GRID_LAYOUT)
-        gridEnabled = RuntimeEnabledFeatures::sharedFeatures().isCSSGridLayoutEnabled();
-#endif
-        if (data.position() != ContentPositionNormal || gridEnabled)
-            result.get().append(cssValuePool.createValue(data.position()));
-        else
-            result.get().append(cssValuePool.createIdentifierValue(normalBehaviorValueID));
+        result->append(cssValuePool.createValue(data.distribution()));
+
+    bool gridEnabled = false;
+    gridEnabled = RuntimeEnabledFeatures::sharedFeatures().isCSSGridLayoutEnabled();
+
+    // Handle content-position values (either as fallback or actual value)
+    switch (data.position()) {
+    case ContentPositionNormal:
+        // Handle 'normal' value, not valid as content-distribution fallback.
+        if (data.distribution() == ContentDistributionDefault)
+            result->append(cssValuePool.createIdentifierValue(gridEnabled ? CSSValueNormal : normalBehaviorValueID));
+        break;
+    case ContentPositionLastBaseline:
+        result->append(cssValuePool.createIdentifierValue(CSSValueLast));
+        result->append(cssValuePool.createIdentifierValue(CSSValueBaseline));
+        break;
+    default:
+        result->append(cssValuePool.createValue(data.position()));
     }
+
+    // Handle overflow-alignment (only allowed for content-position values)
     if ((data.position() >= ContentPositionCenter || data.distribution() != ContentDistributionDefault) && data.overflow() != OverflowAlignmentDefault)
-        result.get().append(cssValuePool.createValue(data.overflow()));
-    ASSERT(result.get().length() > 0);
-    ASSERT(result.get().length() <= 3);
+        result->append(cssValuePool.createValue(data.overflow()));
+    ASSERT(result->length() > 0);
+    ASSERT(result->length() <= 3);
     return result;
 }
 
+static Ref<CSSValue> paintOrder(PaintOrder paintOrder)
+{
+    if (paintOrder == PaintOrder::Normal)
+        return CSSPrimitiveValue::createIdentifier(CSSValueNormal);
+    
+    auto paintOrderList = CSSValueList::createSpaceSeparated();
+    switch (paintOrder) {
+    case PaintOrder::Normal:
+        ASSERT_NOT_REACHED();
+        break;
+    case PaintOrder::Fill:
+        paintOrderList->append(CSSPrimitiveValue::createIdentifier(CSSValueFill));
+        break;
+    case PaintOrder::FillMarkers:
+        paintOrderList->append(CSSPrimitiveValue::createIdentifier(CSSValueFill));
+        paintOrderList->append(CSSPrimitiveValue::createIdentifier(CSSValueMarkers));
+        break;
+    case PaintOrder::Stroke:
+        paintOrderList->append(CSSPrimitiveValue::createIdentifier(CSSValueStroke));
+        break;
+    case PaintOrder::StrokeMarkers:
+        paintOrderList->append(CSSPrimitiveValue::createIdentifier(CSSValueStroke));
+        paintOrderList->append(CSSPrimitiveValue::createIdentifier(CSSValueMarkers));
+        break;
+    case PaintOrder::Markers:
+        paintOrderList->append(CSSPrimitiveValue::createIdentifier(CSSValueMarkers));
+        break;
+    case PaintOrder::MarkersStroke:
+        paintOrderList->append(CSSPrimitiveValue::createIdentifier(CSSValueMarkers));
+        paintOrderList->append(CSSPrimitiveValue::createIdentifier(CSSValueStroke));
+        break;
+    }
+    return WTFMove(paintOrderList);
+}
+
 inline static bool isFlexOrGrid(ContainerNode* element)
 {
     return element && element->computedStyle() && element->computedStyle()->isDisplayFlexibleOrGridBox();
@@ -2493,10 +2612,10 @@ RefPtr<CSSValue> ComputedStyleExtractor::customPropertyValue(const String& prope
 
     std::unique_ptr<RenderStyle> ownedStyle;
     auto* style = computeRenderStyleForProperty(*styledElement, m_pseudoElementSpecifier, CSSPropertyCustom, ownedStyle);
-    if (!style || !style->hasCustomProperty(propertyName))
+    if (!style)
         return nullptr;
 
-    return style->getCustomPropertyValue(propertyName);
+    return style->customProperties().get(propertyName);
 }
 
 String ComputedStyleExtractor::customPropertyText(const String& propertyName)
@@ -2505,6 +2624,39 @@ String ComputedStyleExtractor::customPropertyText(const String& propertyName)
     return propertyValue ? propertyValue->cssText() : emptyString();
 }
 
+static Ref<CSSFontValue> fontShorthandValueForSelectionProperties(const FontDescription& fontDescription)
+{
+    auto computedFont = CSSFontValue::create();
+
+    auto variantCaps = fontDescription.variantCaps();
+    if (variantCaps == FontVariantCaps::Small)
+        computedFont->variant = CSSValuePool::singleton().createIdentifierValue(CSSValueSmallCaps);
+    else if (variantCaps == FontVariantCaps::Normal)
+        computedFont->variant = CSSValuePool::singleton().createIdentifierValue(CSSValueNormal);
+    else
+        return CSSFontValue::create();
+
+    auto weight = fontDescription.weight();
+    if (auto value = fontWeightKeyword(weight))
+        computedFont->weight = CSSValuePool::singleton().createIdentifierValue(value.value());
+    else if (isCSS21Weight(weight))
+        computedFont->weight = CSSValuePool::singleton().createValue(static_cast<float>(weight), CSSPrimitiveValue::CSS_NUMBER);
+    else
+        return CSSFontValue::create();
+
+    if (auto keyword = fontStretchKeyword(fontDescription.stretch()))
+        computedFont->stretch = CSSValuePool::singleton().createIdentifierValue(keyword.value());
+    else
+        return CSSFontValue::create();
+
+    if (auto italic = fontStyleKeyword(fontDescription.italic(), fontDescription.fontStyleAxis()))
+        computedFont->style = CSSFontStyleValue::create(CSSValuePool::singleton().createIdentifierValue(italic.value()));
+    else
+        return CSSFontValue::create();
+
+    return computedFont;
+}
+
 RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID, EUpdateLayout updateLayout)
 {
     auto* styledElement = this->styledElement();
@@ -2513,7 +2665,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
 
     std::unique_ptr<RenderStyle> ownedStyle;
     const RenderStyle* style = nullptr;
-    RenderObject* renderer = nullptr;
+    RenderElement* renderer = nullptr;
     bool forceFullLayout = false;
     if (updateLayout) {
         Document& document = m_element->document();
@@ -2522,7 +2674,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             // Style update may change styledElement() to PseudoElement or back.
             styledElement = this->styledElement();
         }
-        renderer = styledElement->renderer();
+        renderer = styledRenderer();
 
         if (propertyID == CSSPropertyDisplay && !renderer && is<SVGElement>(*styledElement) && !downcast<SVGElement>(*styledElement).isValid())
             return nullptr;
@@ -2542,7 +2694,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
 
     if (!updateLayout || forceFullLayout) {
         style = computeRenderStyleForProperty(*styledElement, m_pseudoElementSpecifier, propertyID, ownedStyle);
-        renderer = styledElement->renderer();
+        renderer = styledRenderer();
     }
 
     if (!style)
@@ -2559,88 +2711,69 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             return cssValuePool.createColorValue(m_allowVisitedStyle? style->visitedDependentColor(CSSPropertyBackgroundColor) : style->backgroundColor());
         case CSSPropertyBackgroundImage:
         case CSSPropertyWebkitMaskImage: {
-            const FillLayer* layers = propertyID == CSSPropertyWebkitMaskImage ? style->maskLayers() : style->backgroundLayers();
-            if (!layers)
-                return cssValuePool.createIdentifierValue(CSSValueNone);
-
-            if (!layers->next()) {
-                if (layers->image())
-                    return layers->image()->cssValue();
-
+            auto& layers = propertyID == CSSPropertyWebkitMaskImage ? style->maskLayers() : style->backgroundLayers();
+            if (!layers.next()) {
+                if (layers.image())
+                    return layers.image()->cssValue();
                 return cssValuePool.createIdentifierValue(CSSValueNone);
             }
-
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
-            for (const FillLayer* currLayer = layers; currLayer; currLayer = currLayer->next()) {
+            auto list = CSSValueList::createCommaSeparated();
+            for (auto* currLayer = &layers; currLayer; currLayer = currLayer->next()) {
                 if (currLayer->image())
                     list->append(currLayer->image()->cssValue());
                 else
                     list->append(cssValuePool.createIdentifierValue(CSSValueNone));
             }
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyBackgroundSize:
         case CSSPropertyWebkitBackgroundSize:
         case CSSPropertyWebkitMaskSize: {
-            const FillLayer* layers = propertyID == CSSPropertyWebkitMaskSize ? style->maskLayers() : style->backgroundLayers();
-            if (!layers->next())
-                return fillSizeToCSSValue(layers->size(), *style);
-
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
-            for (const FillLayer* currLayer = layers; currLayer; currLayer = currLayer->next())
+            auto& layers = propertyID == CSSPropertyWebkitMaskSize ? style->maskLayers() : style->backgroundLayers();
+            if (!layers.next())
+                return fillSizeToCSSValue(layers.size(), *style);
+            auto list = CSSValueList::createCommaSeparated();
+            for (auto* currLayer = &layers; currLayer; currLayer = currLayer->next())
                 list->append(fillSizeToCSSValue(currLayer->size(), *style));
-
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyBackgroundRepeat:
         case CSSPropertyWebkitMaskRepeat: {
-            const FillLayer* layers = propertyID == CSSPropertyWebkitMaskRepeat ? style->maskLayers() : style->backgroundLayers();
-            if (!layers->next())
-                return fillRepeatToCSSValue(layers->repeatX(), layers->repeatY());
-
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
-            for (const FillLayer* currLayer = layers; currLayer; currLayer = currLayer->next())
+            auto& layers = propertyID == CSSPropertyWebkitMaskRepeat ? style->maskLayers() : style->backgroundLayers();
+            if (!layers.next())
+                return fillRepeatToCSSValue(layers.repeatX(), layers.repeatY());
+            auto list = CSSValueList::createCommaSeparated();
+            for (auto* currLayer = &layers; currLayer; currLayer = currLayer->next())
                 list->append(fillRepeatToCSSValue(currLayer->repeatX(), currLayer->repeatY()));
-
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyWebkitMaskSourceType: {
-            const FillLayer* layers = style->maskLayers();
-
-            if (!layers)
-                return cssValuePool.createIdentifierValue(CSSValueNone);
-
-            if (!layers->next())
-                return fillSourceTypeToCSSValue(layers->maskSourceType());
-
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
-            for (const FillLayer* currLayer = layers; currLayer; currLayer = currLayer->next())
+            auto& layers = style->maskLayers();
+            if (!layers.next())
+                return fillSourceTypeToCSSValue(layers.maskSourceType());
+            auto list = CSSValueList::createCommaSeparated();
+            for (auto* currLayer = &layers; currLayer; currLayer = currLayer->next())
                 list->append(fillSourceTypeToCSSValue(currLayer->maskSourceType()));
-
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyWebkitBackgroundComposite:
         case CSSPropertyWebkitMaskComposite: {
-            const FillLayer* layers = propertyID == CSSPropertyWebkitMaskComposite ? style->maskLayers() : style->backgroundLayers();
-            if (!layers->next())
-                return cssValuePool.createValue(layers->composite());
-
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
-            for (const FillLayer* currLayer = layers; currLayer; currLayer = currLayer->next())
+            auto& layers = propertyID == CSSPropertyWebkitMaskComposite ? style->maskLayers() : style->backgroundLayers();
+            if (!layers.next())
+                return cssValuePool.createValue(layers.composite());
+            auto list = CSSValueList::createCommaSeparated();
+            for (auto* currLayer = &layers; currLayer; currLayer = currLayer->next())
                 list->append(cssValuePool.createValue(currLayer->composite()));
-
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyBackgroundAttachment: {
-            const FillLayer* layers = style->backgroundLayers();
-            if (!layers->next())
-                return cssValuePool.createValue(layers->attachment());
-
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
-            for (const FillLayer* currLayer = layers; currLayer; currLayer = currLayer->next())
+            auto& layers = style->backgroundLayers();
+            if (!layers.next())
+                return cssValuePool.createValue(layers.attachment());
+            auto list = CSSValueList::createCommaSeparated();
+            for (auto* currLayer = &layers; currLayer; currLayer = currLayer->next())
                 list->append(cssValuePool.createValue(currLayer->attachment()));
-
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyBackgroundClip:
         case CSSPropertyBackgroundOrigin:
@@ -2648,65 +2781,59 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         case CSSPropertyWebkitBackgroundOrigin:
         case CSSPropertyWebkitMaskClip:
         case CSSPropertyWebkitMaskOrigin: {
-            const FillLayer* layers = (propertyID == CSSPropertyWebkitMaskClip || propertyID == CSSPropertyWebkitMaskOrigin) ? style->maskLayers() : style->backgroundLayers();
+            auto& layers = (propertyID == CSSPropertyWebkitMaskClip || propertyID == CSSPropertyWebkitMaskOrigin) ? style->maskLayers() : style->backgroundLayers();
             bool isClip = propertyID == CSSPropertyBackgroundClip || propertyID == CSSPropertyWebkitBackgroundClip || propertyID == CSSPropertyWebkitMaskClip;
-            if (!layers->next()) {
-                EFillBox box = isClip ? layers->clip() : layers->origin();
-                return cssValuePool.createValue(box);
-            }
-
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
-            for (const FillLayer* currLayer = layers; currLayer; currLayer = currLayer->next()) {
-                EFillBox box = isClip ? currLayer->clip() : currLayer->origin();
-                list->append(cssValuePool.createValue(box));
-            }
-
-            return list;
+            if (!layers.next())
+                return cssValuePool.createValue(isClip ? layers.clip() : layers.origin());
+            auto list = CSSValueList::createCommaSeparated();
+            for (auto* currLayer = &layers; currLayer; currLayer = currLayer->next())
+                list->append(cssValuePool.createValue(isClip ? currLayer->clip() : currLayer->origin()));
+            return WTFMove(list);
         }
         case CSSPropertyBackgroundPosition:
         case CSSPropertyWebkitMaskPosition: {
-            const FillLayer* layers = propertyID == CSSPropertyWebkitMaskPosition ? style->maskLayers() : style->backgroundLayers();
-            if (!layers->next())
+            auto& layers = propertyID == CSSPropertyWebkitMaskPosition ? style->maskLayers() : style->backgroundLayers();
+            if (!layers.next())
                 return createPositionListForLayer(propertyID, layers, *style);
 
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
-            for (const FillLayer* currLayer = layers; currLayer; currLayer = currLayer->next())
-                list->append(createPositionListForLayer(propertyID, currLayer, *style));
-            return list;
+            auto list = CSSValueList::createCommaSeparated();
+            for (auto* currLayer = &layers; currLayer; currLayer = currLayer->next())
+                list->append(createPositionListForLayer(propertyID, *currLayer, *style));
+            return WTFMove(list);
         }
         case CSSPropertyBackgroundPositionX:
         case CSSPropertyWebkitMaskPositionX: {
-            const FillLayer* layers = propertyID == CSSPropertyWebkitMaskPositionX ? style->maskLayers() : style->backgroundLayers();
-            if (!layers->next())
-                return cssValuePool.createValue(layers->xPosition());
+            auto& layers = propertyID == CSSPropertyWebkitMaskPositionX ? style->maskLayers() : style->backgroundLayers();
+            if (!layers.next())
+                return cssValuePool.createValue(layers.xPosition());
 
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
-            for (const FillLayer* currLayer = layers; currLayer; currLayer = currLayer->next())
+            auto list = CSSValueList::createCommaSeparated();
+            for (auto* currLayer = &layers; currLayer; currLayer = currLayer->next())
                 list->append(cssValuePool.createValue(currLayer->xPosition()));
 
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyBackgroundPositionY:
         case CSSPropertyWebkitMaskPositionY: {
-            const FillLayer* layers = propertyID == CSSPropertyWebkitMaskPositionY ? style->maskLayers() : style->backgroundLayers();
-            if (!layers->next())
-                return cssValuePool.createValue(layers->yPosition());
+            auto& layers = propertyID == CSSPropertyWebkitMaskPositionY ? style->maskLayers() : style->backgroundLayers();
+            if (!layers.next())
+                return cssValuePool.createValue(layers.yPosition());
 
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
-            for (const FillLayer* currLayer = layers; currLayer; currLayer = currLayer->next())
+            auto list = CSSValueList::createCommaSeparated();
+            for (auto* currLayer = &layers; currLayer; currLayer = currLayer->next())
                 list->append(cssValuePool.createValue(currLayer->yPosition()));
 
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyBorderCollapse:
             if (style->borderCollapse())
                 return cssValuePool.createIdentifierValue(CSSValueCollapse);
             return cssValuePool.createIdentifierValue(CSSValueSeparate);
         case CSSPropertyBorderSpacing: {
-            RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
+            auto list = CSSValueList::createSpaceSeparated();
             list->append(zoomAdjustedPixelValue(style->horizontalBorderSpacing(), *style));
             list->append(zoomAdjustedPixelValue(style->verticalBorderSpacing(), *style));
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyWebkitBorderHorizontalSpacing:
             return zoomAdjustedPixelValue(style->horizontalBorderSpacing(), *style);
@@ -2741,7 +2868,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         case CSSPropertyBorderLeftWidth:
             return zoomAdjustedPixelValue(style->borderLeftWidth(), *style);
         case CSSPropertyBottom:
-            return positionOffsetValue(*style, CSSPropertyBottom);
+            return positionOffsetValue(*style, CSSPropertyBottom, renderer);
         case CSSPropertyWebkitBoxAlign:
             return cssValuePool.createValue(style->boxAlign());
 #if ENABLE(CSS_BOX_DECORATION_BREAK)
@@ -2771,6 +2898,8 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             return valueForShadow(style->boxShadow(), propertyID, *style);
         case CSSPropertyCaptionSide:
             return cssValuePool.createValue(style->captionSide());
+        case CSSPropertyCaretColor:
+            return m_allowVisitedStyle ? cssValuePool.createColorValue(style->visitedDependentColor(CSSPropertyCaretColor)) : currentColorOrValidColor(style, style->caretColor());
         case CSSPropertyClear:
             return cssValuePool.createValue(style->clear());
         case CSSPropertyColor:
@@ -2811,17 +2940,9 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             return zoomAdjustedPixelValue(style->columnWidth(), *style);
         case CSSPropertyTabSize:
             return cssValuePool.createValue(style->tabSize(), CSSPrimitiveValue::CSS_NUMBER);
-#if ENABLE(CSS_REGIONS)
-        case CSSPropertyWebkitRegionBreakAfter:
-            return cssValuePool.createValue(convertToRegionBreak(style->breakAfter()));
-        case CSSPropertyWebkitRegionBreakBefore:
-            return cssValuePool.createValue(convertToRegionBreak(style->breakBefore()));
-        case CSSPropertyWebkitRegionBreakInside:
-            return cssValuePool.createValue(convertToRegionBreak(style->breakInside()));
-#endif
         case CSSPropertyCursor: {
             RefPtr<CSSValueList> list;
-            CursorList* cursors = style->cursors();
+            auto* cursors = style->cursors();
             if (cursors && cursors->size() > 0) {
                 list = CSSValueList::createCommaSeparated();
                 for (unsigned i = 0; i < cursors->size(); ++i)
@@ -2850,11 +2971,11 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         case CSSPropertyAlignItems:
             return valueForItemPositionWithOverflowAlignment(style->alignItems());
         case CSSPropertyAlignSelf:
-            return valueForItemPositionWithOverflowAlignment(resolveAlignSelfAuto(style->alignSelf(), styledElement->parentNode()));
+            return valueForItemPositionWithOverflowAlignment(style->alignSelf());
         case CSSPropertyFlex:
             return getCSSPropertyValuesForShorthandProperties(flexShorthand());
         case CSSPropertyFlexBasis:
-            return cssValuePool.createValue(style->flexBasis());
+            return cssValuePool.createValue(style->flexBasis(), *style);
         case CSSPropertyFlexDirection:
             return cssValuePool.createValue(style->flexDirection());
         case CSSPropertyFlexFlow:
@@ -2867,12 +2988,16 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             return cssValuePool.createValue(style->flexWrap());
         case CSSPropertyJustifyContent:
             return valueForContentPositionAndDistributionWithOverflowAlignment(style->justifyContent(), CSSValueFlexStart);
-#if ENABLE(CSS_GRID_LAYOUT)
         case CSSPropertyJustifyItems:
-            return valueForItemPositionWithOverflowAlignment(resolveJustifyItemsAuto(style->justifyItems(), styledElement->parentNode()));
+            return valueForItemPositionWithOverflowAlignment(style->justifyItems().position() == ItemPositionAuto ? RenderStyle::initialDefaultAlignment() : style->justifyItems());
         case CSSPropertyJustifySelf:
-            return valueForItemPositionWithOverflowAlignment(resolveJustifySelfAuto(style->justifySelf(), styledElement->parentNode()));
-#endif
+            return valueForItemPositionWithOverflowAlignment(style->justifySelf());
+        case CSSPropertyPlaceContent:
+            return getCSSPropertyValuesForShorthandProperties(placeContentShorthand());
+        case CSSPropertyPlaceItems:
+            return getCSSPropertyValuesForShorthandProperties(placeItemsShorthand());
+        case CSSPropertyPlaceSelf:
+            return getCSSPropertyValuesForShorthandProperties(placeSelfShorthand());
         case CSSPropertyOrder:
             return cssValuePool.createValue(style->order(), CSSPrimitiveValue::CSS_NUMBER);
         case CSSPropertyFloat:
@@ -2880,62 +3005,50 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
                 return cssValuePool.createIdentifierValue(CSSValueNone);
             return cssValuePool.createValue(style->floating());
         case CSSPropertyFont: {
-            RefPtr<CSSFontValue> computedFont = CSSFontValue::create();
-            computedFont->style = fontStyleFromStyle(style);
-            if (style->fontDescription().variantCaps() == FontVariantCaps::Small)
-                computedFont->variant = CSSValuePool::singleton().createIdentifierValue(CSSValueSmallCaps);
-            else
-                computedFont->variant = CSSValuePool::singleton().createIdentifierValue(CSSValueNormal);
-            computedFont->weight = fontWeightFromStyle(style);
+            auto computedFont = fontShorthandValueForSelectionProperties(style->fontDescription());
             computedFont->size = fontSizeFromStyle(*style);
             computedFont->lineHeight = lineHeightFromStyle(*style);
-            computedFont->family = fontFamilyFromStyle(style);
-            return computedFont;
-        }
-        case CSSPropertyFontFamily: {
-            RefPtr<CSSValueList> fontFamilyList = fontFamilyFromStyle(style);
-            // If there's only a single family, return that as a CSSPrimitiveValue.
-            // NOTE: Gecko always returns this as a comma-separated CSSPrimitiveValue string.
-            if (fontFamilyList->length() == 1)
-                return fontFamilyList->item(0);
-            return fontFamilyList;
+            computedFont->family = fontFamilyListFromStyle(*style);
+            return WTFMove(computedFont);
         }
+        case CSSPropertyFontFamily:
+            return fontFamilyFromStyle(*style);
         case CSSPropertyFontSize:
             return fontSizeFromStyle(*style);
         case CSSPropertyFontStyle:
-            return fontStyleFromStyle(style);
+            return fontStyleFromStyle(*style);
+        case CSSPropertyFontStretch:
+            return fontStretchFromStyle(*style);
         case CSSPropertyFontVariant:
-            return fontVariantFromStyle(style);
+            return fontVariantFromStyle(*style);
         case CSSPropertyFontWeight:
-            return fontWeightFromStyle(style);
+            return fontWeightFromStyle(*style);
         case CSSPropertyFontSynthesis:
             return fontSynthesisFromStyle(*style);
         case CSSPropertyFontFeatureSettings: {
             const FontFeatureSettings& featureSettings = style->fontDescription().featureSettings();
             if (!featureSettings.size())
                 return cssValuePool.createIdentifierValue(CSSValueNormal);
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
+            auto list = CSSValueList::createCommaSeparated();
             for (auto& feature : featureSettings)
                 list->append(CSSFontFeatureValue::create(FontTag(feature.tag()), feature.value()));
-            return list;
+            return WTFMove(list);
         }
 #if ENABLE(VARIATION_FONTS)
         case CSSPropertyFontVariationSettings: {
-            if (styledElement->document().settings() && styledElement->document().settings()->variationFontsEnabled()) {
-                const FontVariationSettings& variationSettings = style->fontDescription().variationSettings();
-                if (variationSettings.isEmpty())
-                    return cssValuePool.createIdentifierValue(CSSValueNormal);
-                RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
-                for (auto& feature : variationSettings)
-                    list->append(CSSFontVariationValue::create(feature.tag(), feature.value()));
-                return list;
-            }
-            break;
+            const FontVariationSettings& variationSettings = style->fontDescription().variationSettings();
+            if (variationSettings.isEmpty())
+                return cssValuePool.createIdentifierValue(CSSValueNormal);
+            auto list = CSSValueList::createCommaSeparated();
+            for (auto& feature : variationSettings)
+                list->append(CSSFontVariationValue::create(feature.tag(), feature.value()));
+            return WTFMove(list);
         }
+        case CSSPropertyFontOpticalSizing:
+            return cssValuePool.createValue(style->fontDescription().opticalSizing());
 #endif
-#if ENABLE(CSS_GRID_LAYOUT)
         case CSSPropertyGridAutoFlow: {
-            RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
+            auto list = CSSValueList::createSpaceSeparated();
             ASSERT(style->isGridAutoFlowDirectionRow() || style->isGridAutoFlowDirectionColumn());
             if (style->isGridAutoFlowDirectionRow())
                 list->append(cssValuePool.createIdentifierValue(CSSValueRow));
@@ -2945,7 +3058,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             if (style->isGridAutoFlowAlgorithmDense())
                 list->append(cssValuePool.createIdentifierValue(CSSValueDense));
 
-            return list;
+            return WTFMove(list);
         }
 
         // Specs mention that getComputedStyle() should return the used value of the property instead of the computed
@@ -2981,13 +3094,11 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             return getCSSPropertyValuesForGridShorthand(gridColumnShorthand());
         case CSSPropertyGridRow:
             return getCSSPropertyValuesForGridShorthand(gridRowShorthand());
-
         case CSSPropertyGridTemplateAreas:
             if (!style->namedGridAreaRowCount()) {
                 ASSERT(!style->namedGridAreaColumnCount());
                 return cssValuePool.createIdentifierValue(CSSValueNone);
             }
-
             return CSSGridTemplateAreasValue::create(style->namedGridArea(), style->namedGridAreaRowCount(), style->namedGridAreaColumnCount());
         case CSSPropertyGridColumnGap:
             return zoomAdjustedPixelValueForLength(style->gridColumnGap(), *style);
@@ -2995,12 +3106,11 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             return zoomAdjustedPixelValueForLength(style->gridRowGap(), *style);
         case CSSPropertyGridGap:
             return getCSSPropertyValuesForGridShorthand(gridGapShorthand());
-#endif /* ENABLE(CSS_GRID_LAYOUT) */
         case CSSPropertyHeight:
             if (renderer && !renderer->isRenderSVGModelObject()) {
                 // According to http://www.w3.org/TR/CSS2/visudet.html#the-height-property,
                 // the "height" property does not apply for non-replaced inline elements.
-                if (!renderer->isReplaced() && renderer->isInline())
+                if (isNonReplacedInline(*renderer))
                     return cssValuePool.createIdentifierValue(CSSValueAuto);
                 return zoomAdjustedPixelValue(sizingBox(*renderer).height(), *style);
             }
@@ -3038,7 +3148,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             return cssValuePool.createValue(style->imageResolution(), CSSPrimitiveValue::CSS_DPPX);
 #endif
         case CSSPropertyLeft:
-            return positionOffsetValue(*style, CSSPropertyLeft);
+            return positionOffsetValue(*style, CSSPropertyLeft, renderer);
         case CSSPropertyLetterSpacing:
             if (!style->letterSpacing())
                 return cssValuePool.createIdentifierValue(CSSValueNormal);
@@ -3122,10 +3232,10 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         case CSSPropertyObjectFit:
             return cssValuePool.createValue(style->objectFit());
         case CSSPropertyObjectPosition: {
-            RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
+            auto list = CSSValueList::createSpaceSeparated();
             list->append(zoomAdjustedPixelValueForLength(style->objectPosition().x(), *style));
             list->append(zoomAdjustedPixelValueForLength(style->objectPosition().y(), *style));
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyOpacity:
             return cssValuePool.createValue(style->opacity(), CSSPrimitiveValue::CSS_NUMBER);
@@ -3176,7 +3286,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         case CSSPropertyPosition:
             return cssValuePool.createValue(style->position());
         case CSSPropertyRight:
-            return positionOffsetValue(*style, CSSPropertyRight);
+            return positionOffsetValue(*style, CSSPropertyRight, renderer);
         case CSSPropertyWebkitRubyPosition:
             return cssValuePool.createValue(style->rubyPosition());
         case CSSPropertyTableLayout:
@@ -3226,31 +3336,31 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             case TextEmphasisMarkCircle:
             case TextEmphasisMarkDoubleCircle:
             case TextEmphasisMarkTriangle:
-            case TextEmphasisMarkSesame: {
-                RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
+            case TextEmphasisMarkSesame:
+                auto list = CSSValueList::createSpaceSeparated();
                 list->append(cssValuePool.createValue(style->textEmphasisFill()));
                 list->append(cssValuePool.createValue(style->textEmphasisMark()));
-                return list;
-            }
+                return WTFMove(list);
             }
+            RELEASE_ASSERT_NOT_REACHED();
         case CSSPropertyTextIndent: {
             // If CSS3_TEXT is disabled or text-indent has only one value(<length> | <percentage>),
             // getPropertyCSSValue() returns CSSValue.
-            RefPtr<CSSValue> textIndent = zoomAdjustedPixelValueForLength(style->textIndent(), *style);
+            auto textIndent = zoomAdjustedPixelValueForLength(style->textIndent(), *style);
 #if ENABLE(CSS3_TEXT)
             // If CSS3_TEXT is enabled and text-indent has -webkit-each-line or -webkit-hanging,
             // getPropertyCSSValue() returns CSSValueList.
             if (style->textIndentLine() == TextIndentEachLine || style->textIndentType() == TextIndentHanging) {
-                RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
-                list->append(textIndent.releaseNonNull());
+                auto list = CSSValueList::createSpaceSeparated();
+                list->append(WTFMove(textIndent));
                 if (style->textIndentLine() == TextIndentEachLine)
                     list->append(cssValuePool.createIdentifierValue(CSSValueWebkitEachLine));
                 if (style->textIndentType() == TextIndentHanging)
                     list->append(cssValuePool.createIdentifierValue(CSSValueWebkitHanging));
-                return list;
+                return WTFMove(list);
             }
 #endif
-            return textIndent;
+            return WTFMove(textIndent);
         }
         case CSSPropertyTextShadow:
             return valueForShadow(style->textShadow(), propertyID, *style);
@@ -3277,7 +3387,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         case CSSPropertyTextTransform:
             return cssValuePool.createValue(style->textTransform());
         case CSSPropertyTop:
-            return positionOffsetValue(*style, CSSPropertyTop);
+            return positionOffsetValue(*style, CSSPropertyTop, renderer);
         case CSSPropertyUnicodeBidi:
             return cssValuePool.createValue(style->unicodeBidi());
         case CSSPropertyVerticalAlign:
@@ -3317,21 +3427,20 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             if (renderer && !renderer->isRenderSVGModelObject()) {
                 // According to http://www.w3.org/TR/CSS2/visudet.html#the-width-property,
                 // the "width" property does not apply for non-replaced inline elements.
-                if (!renderer->isReplaced() && renderer->isInline())
+                if (isNonReplacedInline(*renderer))
                     return cssValuePool.createIdentifierValue(CSSValueAuto);
                 return zoomAdjustedPixelValue(sizingBox(*renderer).width(), *style);
             }
             return zoomAdjustedPixelValueForLength(style->width(), *style);
         case CSSPropertyWillChange:
-            return getWillChangePropertyValue(style->willChange());
-            break;
+            return willChangePropertyValue(style->willChange());
         case CSSPropertyWordBreak:
             return cssValuePool.createValue(style->wordBreak());
         case CSSPropertyWordSpacing:
             return zoomAdjustedPixelValue(style->fontCascade().wordSpacing(), *style);
         case CSSPropertyWordWrap:
             return cssValuePool.createValue(style->overflowWrap());
-        case CSSPropertyWebkitLineBreak:
+        case CSSPropertyLineBreak:
             return cssValuePool.createValue(style->lineBreak());
         case CSSPropertyWebkitNbspMode:
             return cssValuePool.createValue(style->nbspMode());
@@ -3396,9 +3505,9 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         }
 #endif
         case CSSPropertyAnimationDelay:
-            return getDelayValue(style->animations());
+            return delayValue(style->animations());
         case CSSPropertyAnimationDirection: {
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
+            auto list = CSSValueList::createCommaSeparated();
             const AnimationList* t = style->animations();
             if (t) {
                 for (size_t i = 0; i < t->size(); ++i) {
@@ -3419,12 +3528,12 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
                 }
             } else
                 list->append(cssValuePool.createIdentifierValue(CSSValueNormal));
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyAnimationDuration:
-            return getDurationValue(style->animations());
+            return durationValue(style->animations());
         case CSSPropertyAnimationFillMode: {
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
+            auto list = CSSValueList::createCommaSeparated();
             const AnimationList* t = style->animations();
             if (t) {
                 for (size_t i = 0; i < t->size(); ++i) {
@@ -3445,10 +3554,10 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
                 }
             } else
                 list->append(cssValuePool.createIdentifierValue(CSSValueNone));
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyAnimationIterationCount: {
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
+            auto list = CSSValueList::createCommaSeparated();
             const AnimationList* t = style->animations();
             if (t) {
                 for (size_t i = 0; i < t->size(); ++i) {
@@ -3460,20 +3569,20 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
                 }
             } else
                 list->append(cssValuePool.createValue(Animation::initialIterationCount(), CSSPrimitiveValue::CSS_NUMBER));
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyAnimationName: {
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
+            auto list = CSSValueList::createCommaSeparated();
             const AnimationList* t = style->animations();
             if (t) {
                 for (size_t i = 0; i < t->size(); ++i)
                     list->append(cssValuePool.createValue(t->animation(i).name(), CSSPrimitiveValue::CSS_STRING));
             } else
                 list->append(cssValuePool.createIdentifierValue(CSSValueNone));
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyAnimationPlayState: {
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
+            auto list = CSSValueList::createCommaSeparated();
             const AnimationList* t = style->animations();
             if (t) {
                 for (size_t i = 0; i < t->size(); ++i) {
@@ -3485,13 +3594,13 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
                 }
             } else
                 list->append(cssValuePool.createIdentifierValue(CSSValueRunning));
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyAnimationTimingFunction:
-            return getTimingFunctionValue(style->animations());
+            return timingFunctionValue(style->animations());
 #if ENABLE(CSS_ANIMATIONS_LEVEL_2)
         case CSSPropertyWebkitAnimationTrigger:
-            return getAnimationTriggerValue(style->animations(), *style);
+            return animationTriggerValue(style->animations(), *style);
 #endif
         case CSSPropertyWebkitAppearance:
             return cssValuePool.createValue(style->appearance());
@@ -3533,8 +3642,8 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             // Not a real style property -- used by the editing engine -- so has no computed value.
             break;
         case CSSPropertyWebkitInitialLetter: {
-            Ref<CSSPrimitiveValue> drop = !style->initialLetterDrop() ? cssValuePool.createIdentifierValue(CSSValueNormal) : cssValuePool.createValue(style->initialLetterDrop(), CSSPrimitiveValue::CSS_NUMBER);
-            Ref<CSSPrimitiveValue> size = !style->initialLetterHeight() ? cssValuePool.createIdentifierValue(CSSValueNormal) : cssValuePool.createValue(style->initialLetterHeight(), CSSPrimitiveValue::CSS_NUMBER);
+            auto drop = !style->initialLetterDrop() ? cssValuePool.createIdentifierValue(CSSValueNormal) : cssValuePool.createValue(style->initialLetterDrop(), CSSPrimitiveValue::CSS_NUMBER);
+            auto size = !style->initialLetterHeight() ? cssValuePool.createIdentifierValue(CSSValueNormal) : cssValuePool.createValue(style->initialLetterHeight(), CSSPrimitiveValue::CSS_NUMBER);
             return cssValuePool.createValue(Pair::create(WTFMove(drop), WTFMove(size)));
         }
         case CSSPropertyWebkitMarginBottomCollapse:
@@ -3554,7 +3663,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
                 return cssValuePool.createIdentifierValue(CSSValueNone);
             return zoomAdjustedPixelValue(style->perspective(), *style);
         case CSSPropertyPerspectiveOrigin: {
-            RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
+            auto list = CSSValueList::createSpaceSeparated();
             if (renderer) {
                 LayoutRect box;
                 if (is<RenderBox>(*renderer))
@@ -3568,7 +3677,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
                 list->append(zoomAdjustedPixelValueForLength(style->perspectiveOriginY(), *style));
 
             }
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyWebkitRtlOrdering:
             return cssValuePool.createIdentifierValue(style->rtlOrdering() ? CSSValueVisual : CSSValueLogical);
@@ -3587,13 +3696,13 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         case CSSPropertyWebkitUserSelect:
             return cssValuePool.createValue(style->userSelect());
         case CSSPropertyBorderBottomLeftRadius:
-            return getBorderRadiusCornerValue(style->borderBottomLeftRadius(), *style);
+            return borderRadiusCornerValue(style->borderBottomLeftRadius(), *style);
         case CSSPropertyBorderBottomRightRadius:
-            return getBorderRadiusCornerValue(style->borderBottomRightRadius(), *style);
+            return borderRadiusCornerValue(style->borderBottomRightRadius(), *style);
         case CSSPropertyBorderTopLeftRadius:
-            return getBorderRadiusCornerValue(style->borderTopLeftRadius(), *style);
+            return borderRadiusCornerValue(style->borderTopLeftRadius(), *style);
         case CSSPropertyBorderTopRightRadius:
-            return getBorderRadiusCornerValue(style->borderTopRightRadius(), *style);
+            return borderRadiusCornerValue(style->borderTopRightRadius(), *style);
         case CSSPropertyClip: {
             if (!style->hasClip())
                 return cssValuePool.createIdentifierValue(CSSValueAuto);
@@ -3604,12 +3713,14 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             rect->setLeft(autoOrZoomAdjustedValue(style->clip().left(), *style));
             return cssValuePool.createValue(WTFMove(rect));
         }
-        case CSSPropertySpeak:
-            return cssValuePool.createValue(style->speak());
+        case CSSPropertySpeakAs:
+            return speakAsToCSSValue(style->speakAs());
         case CSSPropertyTransform:
             return computedTransform(renderer, *style);
+        case CSSPropertyTransformBox:
+            return CSSPrimitiveValue::create(style->transformBox());
         case CSSPropertyTransformOrigin: {
-            RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
+            auto list = CSSValueList::createSpaceSeparated();
             if (renderer) {
                 LayoutRect box;
                 if (is<RenderBox>(*renderer))
@@ -3625,42 +3736,41 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
                 if (style->transformOriginZ() != 0)
                     list->append(zoomAdjustedPixelValue(style->transformOriginZ(), *style));
             }
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyTransformStyle:
         case CSSPropertyWebkitTransformStyle:
             return cssValuePool.createIdentifierValue((style->transformStyle3D() == TransformStyle3DPreserve3D) ? CSSValuePreserve3d : CSSValueFlat);
         case CSSPropertyTransitionDelay:
-            return getDelayValue(style->transitions());
+            return delayValue(style->transitions());
         case CSSPropertyTransitionDuration:
-            return getDurationValue(style->transitions());
+            return durationValue(style->transitions());
         case CSSPropertyTransitionProperty:
-            return getTransitionPropertyValue(style->transitions());
+            return transitionPropertyValue(style->transitions());
         case CSSPropertyTransitionTimingFunction:
-            return getTimingFunctionValue(style->transitions());
+            return timingFunctionValue(style->transitions());
         case CSSPropertyTransition: {
-            const AnimationList* animList = style->transitions();
-            if (animList) {
-                RefPtr<CSSValueList> transitionsList = CSSValueList::createCommaSeparated();
-                for (size_t i = 0; i < animList->size(); ++i) {
-                    RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
-                    const Animation& animation = animList->animation(i);
+            if (auto* animationList = style->transitions()) {
+                auto transitionsList = CSSValueList::createCommaSeparated();
+                for (size_t i = 0; i < animationList->size(); ++i) {
+                    auto list = CSSValueList::createSpaceSeparated();
+                    auto& animation = animationList->animation(i);
                     list->append(createTransitionPropertyValue(animation));
                     list->append(cssValuePool.createValue(animation.duration(), CSSPrimitiveValue::CSS_S));
-                    list->append(createTimingFunctionValue(animation.timingFunction().get()));
+                    list->append(createTimingFunctionValue(*animation.timingFunction()));
                     list->append(cssValuePool.createValue(animation.delay(), CSSPrimitiveValue::CSS_S));
-                    transitionsList->append(list.releaseNonNull());
+                    transitionsList->append(WTFMove(list));
                 }
-                return transitionsList;
+                return WTFMove(transitionsList);
             }
 
-            RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
+            auto list = CSSValueList::createSpaceSeparated();
             // transition-property default value.
             list->append(cssValuePool.createIdentifierValue(CSSValueAll));
             list->append(cssValuePool.createValue(Animation::initialDuration(), CSSPrimitiveValue::CSS_S));
-            list->append(createTimingFunctionValue(Animation::initialTimingFunction().get()));
+            list->append(createTimingFunctionValue(Animation::initialTimingFunction()));
             list->append(cssValuePool.createValue(Animation::initialDelay(), CSSPrimitiveValue::CSS_S));
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyPointerEvents:
             return cssValuePool.createValue(style->pointerEvents());
@@ -3681,46 +3791,30 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         case CSSPropertyWebkitLineBoxContain:
             return createLineBoxContainValue(style->lineBoxContain());
         case CSSPropertyAlt:
-            return altTextToCSSValue(style);
+            return altTextToCSSValue(*style);
         case CSSPropertyContent:
-            return contentToCSSValue(style);
+            return contentToCSSValue(*style);
         case CSSPropertyCounterIncrement:
-            return counterToCSSValue(style, propertyID);
+            return counterToCSSValue(*style, propertyID);
         case CSSPropertyCounterReset:
-            return counterToCSSValue(style, propertyID);
+            return counterToCSSValue(*style, propertyID);
         case CSSPropertyWebkitClipPath: {
-            ClipPathOperation* operation = style->clipPath();
+            auto* operation = style->clipPath();
             if (!operation)
                 return cssValuePool.createIdentifierValue(CSSValueNone);
-            if (is<ReferenceClipPathOperation>(*operation)) {
-                const auto& referenceOperation = downcast<ReferenceClipPathOperation>(*operation);
-                return CSSPrimitiveValue::create(referenceOperation.url(), CSSPrimitiveValue::CSS_URI);
-            }
-            RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
+            if (is<ReferenceClipPathOperation>(*operation))
+                return CSSPrimitiveValue::create(downcast<ReferenceClipPathOperation>(*operation).url(), CSSPrimitiveValue::CSS_URI);
+            auto list = CSSValueList::createSpaceSeparated();
             if (is<ShapeClipPathOperation>(*operation)) {
-                const auto& shapeOperation = downcast<ShapeClipPathOperation>(*operation);
+                auto& shapeOperation = downcast<ShapeClipPathOperation>(*operation);
                 list->append(valueForBasicShape(*style, shapeOperation.basicShape()));
                 if (shapeOperation.referenceBox() != BoxMissing)
                     list->append(cssValuePool.createValue(shapeOperation.referenceBox()));
             }
-            if (is<BoxClipPathOperation>(*operation)) {
-                const auto& boxOperation = downcast<BoxClipPathOperation>(*operation);
-                list->append(cssValuePool.createValue(boxOperation.referenceBox()));
-            }
-            return list;
+            if (is<BoxClipPathOperation>(*operation))
+                list->append(cssValuePool.createValue(downcast<BoxClipPathOperation>(*operation).referenceBox()));
+            return WTFMove(list);
         }
-#if ENABLE(CSS_REGIONS)
-        case CSSPropertyWebkitFlowInto:
-            if (!style->hasFlowInto())
-                return cssValuePool.createIdentifierValue(CSSValueNone);
-            return cssValuePool.createValue(style->flowThread(), CSSPrimitiveValue::CSS_STRING);
-        case CSSPropertyWebkitFlowFrom:
-            if (!style->hasFlowFrom())
-                return cssValuePool.createIdentifierValue(CSSValueNone);
-            return cssValuePool.createValue(style->regionThread(), CSSPrimitiveValue::CSS_STRING);
-        case CSSPropertyWebkitRegionFragment:
-            return cssValuePool.createValue(style->regionFragment());
-#endif
         case CSSPropertyShapeMargin:
             return cssValuePool.createValue(style->shapeMargin(), *style);
         case CSSPropertyShapeImageThreshold:
@@ -3740,20 +3834,18 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             return cssValuePool.createValue(style->isolation());
 #endif
         case CSSPropertyBackgroundBlendMode: {
-            const FillLayer* layers = style->backgroundLayers();
-            if (!layers->next())
-                return cssValuePool.createValue(layers->blendMode());
-
-            RefPtr<CSSValueList> list = CSSValueList::createCommaSeparated();
-            for (const FillLayer* currLayer = layers; currLayer; currLayer = currLayer->next())
+            auto& layers = style->backgroundLayers();
+            if (!layers.next())
+                return cssValuePool.createValue(layers.blendMode());
+            auto list = CSSValueList::createCommaSeparated();
+            for (auto* currLayer = &layers; currLayer; currLayer = currLayer->next())
                 list->append(cssValuePool.createValue(currLayer->blendMode()));
-
-            return list;
+            return WTFMove(list);
         }
         case CSSPropertyBackground:
             return getBackgroundShorthandValue();
         case CSSPropertyBorder: {
-            RefPtr<CSSValue> value = propertyValue(CSSPropertyBorderTop, DoNotUpdateLayout);
+            auto value = propertyValue(CSSPropertyBorderTop, DoNotUpdateLayout);
             const CSSPropertyID properties[3] = { CSSPropertyBorderRight, CSSPropertyBorderBottom, CSSPropertyBorderLeft };
             for (auto& property : properties) {
                 if (!compareCSSValuePtr<CSSValue>(value, propertyValue(property, DoNotUpdateLayout)))
@@ -3770,7 +3862,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         case CSSPropertyBorderImage:
             return valueForNinePieceImage(style->borderImage());
         case CSSPropertyBorderRadius:
-            return getBorderRadiusShorthandValue(*style);
+            return borderRadiusShorthandValue(*style);
         case CSSPropertyBorderRight:
             return getCSSPropertyValuesForShorthandProperties(borderRightShorthand());
         case CSSPropertyBorderStyle:
@@ -3793,16 +3885,30 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             return getCSSPropertyValuesForSidesShorthand(paddingShorthand());
 
 #if ENABLE(CSS_SCROLL_SNAP)
-        case CSSPropertyWebkitScrollSnapType:
-            return cssValuePool.createValue(style->scrollSnapType());
-        case CSSPropertyWebkitScrollSnapDestination:
-            return scrollSnapDestination(*style, style->scrollSnapDestination());
-        case CSSPropertyWebkitScrollSnapPointsX:
-            return scrollSnapPoints(*style, style->scrollSnapPointsX());
-        case CSSPropertyWebkitScrollSnapPointsY:
-            return scrollSnapPoints(*style, style->scrollSnapPointsY());
-        case CSSPropertyWebkitScrollSnapCoordinate:
-            return scrollSnapCoordinates(*style, style->scrollSnapCoordinates());
+        case CSSPropertyScrollSnapMargin:
+            return getCSSPropertyValuesForSidesShorthand(scrollSnapMarginShorthand());
+        case CSSPropertyScrollSnapMarginBottom:
+            return zoomAdjustedPixelValueForLength(style->scrollSnapMarginBottom(), *style);
+        case CSSPropertyScrollSnapMarginTop:
+            return zoomAdjustedPixelValueForLength(style->scrollSnapMarginTop(), *style);
+        case CSSPropertyScrollSnapMarginRight:
+            return zoomAdjustedPixelValueForLength(style->scrollSnapMarginRight(), *style);
+        case CSSPropertyScrollSnapMarginLeft:
+            return zoomAdjustedPixelValueForLength(style->scrollSnapMarginLeft(), *style);
+        case CSSPropertyScrollPadding:
+            return getCSSPropertyValuesForSidesShorthand(scrollPaddingShorthand());
+        case CSSPropertyScrollPaddingBottom:
+            return zoomAdjustedPixelValueForLength(style->scrollPaddingBottom(), *style);
+        case CSSPropertyScrollPaddingTop:
+            return zoomAdjustedPixelValueForLength(style->scrollPaddingTop(), *style);
+        case CSSPropertyScrollPaddingRight:
+            return zoomAdjustedPixelValueForLength(style->scrollPaddingRight(), *style);
+        case CSSPropertyScrollPaddingLeft:
+            return zoomAdjustedPixelValueForLength(style->scrollPaddingLeft(), *style);
+        case CSSPropertyScrollSnapType:
+            return valueForScrollSnapType(style->scrollSnapType());
+        case CSSPropertyScrollSnapAlign:
+            return valueForScrollSnapAlignment(style->scrollSnapAlign());
 #endif
 
 #if ENABLE(CSS_TRAILING_WORD)
@@ -3833,8 +3939,6 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             return zoomAdjustedPixelValueForLength(style->svgStyle().rx(), *style);
         case CSSPropertyRy:
             return zoomAdjustedPixelValueForLength(style->svgStyle().ry(), *style);
-        case CSSPropertyStrokeWidth:
-            return zoomAdjustedPixelValueForLength(style->svgStyle().strokeWidth(), *style);
         case CSSPropertyStrokeDashoffset:
             return zoomAdjustedPixelValueForLength(style->svgStyle().strokeDashOffset(), *style);
         case CSSPropertyX:
@@ -3844,25 +3948,23 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         case CSSPropertyWebkitTextZoom:
             return cssValuePool.createValue(style->textZoom());
 
+        case CSSPropertyPaintOrder:
+            return paintOrder(style->paintOrder());
+        case CSSPropertyStrokeLinecap:
+            return CSSPrimitiveValue::create(style->capStyle());
+        case CSSPropertyStrokeLinejoin:
+            return CSSPrimitiveValue::create(style->joinStyle());
+        case CSSPropertyStrokeWidth:
+            return zoomAdjustedPixelValueForLength(style->strokeWidth(), *style);
+        case CSSPropertyStrokeColor:
+            return currentColorOrValidColor(style, style->strokeColor());
+        case CSSPropertyStrokeMiterlimit:
+            return CSSPrimitiveValue::create(style->strokeMiterLimit(), CSSPrimitiveValue::CSS_NUMBER);
+
         /* Unimplemented CSS 3 properties (including CSS3 shorthand properties) */
         case CSSPropertyAll:
         case CSSPropertyAnimation:
         case CSSPropertyWebkitTextEmphasis:
-        case CSSPropertyTextLineThrough:
-        case CSSPropertyTextLineThroughColor:
-        case CSSPropertyTextLineThroughMode:
-        case CSSPropertyTextLineThroughStyle:
-        case CSSPropertyTextLineThroughWidth:
-        case CSSPropertyTextOverline:
-        case CSSPropertyTextOverlineColor:
-        case CSSPropertyTextOverlineMode:
-        case CSSPropertyTextOverlineStyle:
-        case CSSPropertyTextOverlineWidth:
-        case CSSPropertyTextUnderline:
-        case CSSPropertyTextUnderlineColor:
-        case CSSPropertyTextUnderlineMode:
-        case CSSPropertyTextUnderlineStyle:
-        case CSSPropertyTextUnderlineWidth:
             break;
 
         /* Directional properties are resolved by resolveDirectionAwareProperty() before the switch. */
@@ -3900,9 +4002,9 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             break;
 
         /* Unimplemented @font-face properties */
-        case CSSPropertyFontStretch:
         case CSSPropertySrc:
         case CSSPropertyUnicodeRange:
+        case CSSPropertyFontDisplay:
             break;
 
         /* Other unimplemented properties */
@@ -3957,13 +4059,9 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         case CSSPropertyMarkerMid:
         case CSSPropertyMarkerStart:
         case CSSPropertyMaskType:
-        case CSSPropertyPaintOrder:
         case CSSPropertyShapeRendering:
         case CSSPropertyStroke:
         case CSSPropertyStrokeDasharray:
-        case CSSPropertyStrokeLinecap:
-        case CSSPropertyStrokeLinejoin:
-        case CSSPropertyStrokeMiterlimit:
         case CSSPropertyStrokeOpacity:
         case CSSPropertyAlignmentBaseline:
         case CSSPropertyBaselineShift:
@@ -3986,7 +4084,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
 
 String CSSComputedStyleDeclaration::getPropertyValue(CSSPropertyID propertyID) const
 {
-    RefPtr<CSSValue> value = getPropertyCSSValue(propertyID);
+    auto value = getPropertyCSSValue(propertyID);
     if (!value)
         return emptyString(); // FIXME: Should this be null instead, as it is in StyleProperties::getPropertyValue?
     return value->cssText();
@@ -4020,9 +4118,8 @@ String CSSComputedStyleDeclaration::item(unsigned i) const
     const auto& customProperties = style->customProperties();
     if (index >= customProperties.size())
         return String();
-    
-    Vector<String, 4> results;
-    copyKeysToVector(customProperties, results);
+
+    auto results = copyToVector(customProperties.keys());
     return results.at(index);
 }
 
@@ -4051,22 +4148,21 @@ Ref<MutableStyleProperties> ComputedStyleExtractor::copyProperties()
 
 RefPtr<CSSValueList> ComputedStyleExtractor::getCSSPropertyValuesForShorthandProperties(const StylePropertyShorthand& shorthand)
 {
-    RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
-    for (size_t i = 0; i < shorthand.length(); ++i) {
-        RefPtr<CSSValue> value = propertyValue(shorthand.properties()[i], DoNotUpdateLayout);
-        list->append(value.releaseNonNull());
-    }
-    return list;
+    auto list = CSSValueList::createSpaceSeparated();
+    for (size_t i = 0; i < shorthand.length(); ++i)
+        list->append(propertyValue(shorthand.properties()[i], DoNotUpdateLayout).releaseNonNull());
+    return WTFMove(list);
 }
 
 RefPtr<CSSValueList> ComputedStyleExtractor::getCSSPropertyValuesForSidesShorthand(const StylePropertyShorthand& shorthand)
 {
-    RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
+    auto list = CSSValueList::createSpaceSeparated();
+
     // Assume the properties are in the usual order top, right, bottom, left.
-    RefPtr<CSSValue> topValue = propertyValue(shorthand.properties()[0], DoNotUpdateLayout);
-    RefPtr<CSSValue> rightValue = propertyValue(shorthand.properties()[1], DoNotUpdateLayout);
-    RefPtr<CSSValue> bottomValue = propertyValue(shorthand.properties()[2], DoNotUpdateLayout);
-    RefPtr<CSSValue> leftValue = propertyValue(shorthand.properties()[3], DoNotUpdateLayout);
+    auto topValue = propertyValue(shorthand.properties()[0], DoNotUpdateLayout);
+    auto rightValue = propertyValue(shorthand.properties()[1], DoNotUpdateLayout);
+    auto bottomValue = propertyValue(shorthand.properties()[2], DoNotUpdateLayout);
+    auto leftValue = propertyValue(shorthand.properties()[3], DoNotUpdateLayout);
 
     // All 4 properties must be specified.
     if (!topValue || !rightValue || !bottomValue || !leftValue)
@@ -4084,17 +4180,15 @@ RefPtr<CSSValueList> ComputedStyleExtractor::getCSSPropertyValuesForSidesShortha
     if (showLeft)
         list->append(leftValue.releaseNonNull());
 
-    return list;
+    return WTFMove(list);
 }
 
 RefPtr<CSSValueList> ComputedStyleExtractor::getCSSPropertyValuesForGridShorthand(const StylePropertyShorthand& shorthand)
 {
-    RefPtr<CSSValueList> list = CSSValueList::createSlashSeparated();
-    for (size_t i = 0; i < shorthand.length(); ++i) {
-        RefPtr<CSSValue> value = propertyValue(shorthand.properties()[i], DoNotUpdateLayout);
-        list->append(value.releaseNonNull());
-    }
-    return list;
+    auto list = CSSValueList::createSlashSeparated();
+    for (size_t i = 0; i < shorthand.length(); ++i)
+        list->append(propertyValue(shorthand.properties()[i], DoNotUpdateLayout).releaseNonNull());
+    return WTFMove(list);
 }
 
 Ref<MutableStyleProperties> ComputedStyleExtractor::copyPropertiesInSet(const CSSPropertyID* set, unsigned length)
@@ -4102,8 +4196,7 @@ Ref<MutableStyleProperties> ComputedStyleExtractor::copyPropertiesInSet(const CS
     Vector<CSSProperty, 256> list;
     list.reserveInitialCapacity(length);
     for (unsigned i = 0; i < length; ++i) {
-        auto value = propertyValue(set[i]);
-        if (value)
+        if (auto value = propertyValue(set[i]))
             list.append(CSSProperty(set[i], WTFMove(value), false));
     }
     return MutableStyleProperties::create(list.data(), list.size());
@@ -4114,16 +4207,22 @@ CSSRule* CSSComputedStyleDeclaration::parentRule() const
     return nullptr;
 }
 
-RefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(const String& propertyName)
+RefPtr<DeprecatedCSSOMValue> CSSComputedStyleDeclaration::getPropertyCSSValue(const String& propertyName)
 {
-    if (isCustomPropertyName(propertyName))
-        return ComputedStyleExtractor(m_element.ptr(), m_allowVisitedStyle, m_pseudoElementSpecifier).customPropertyValue(propertyName);
+    if (isCustomPropertyName(propertyName)) {
+        auto value = ComputedStyleExtractor(m_element.ptr(), m_allowVisitedStyle, m_pseudoElementSpecifier).customPropertyValue(propertyName);
+        if (!value)
+            return nullptr;
+        return value->createDeprecatedCSSOMWrapper(*this);
+    }
 
     CSSPropertyID propertyID = cssPropertyID(propertyName);
     if (!propertyID)
         return nullptr;
-    RefPtr<CSSValue> value = getPropertyCSSValue(propertyID);
-    return value ? value->cloneForCSSOM() : nullptr;
+    auto value = getPropertyCSSValue(propertyID);
+    if (!value)
+        return nullptr;
+    return value->createDeprecatedCSSOMWrapper(*this);
 }
 
 String CSSComputedStyleDeclaration::getPropertyValue(const String &propertyName)
@@ -4155,12 +4254,12 @@ bool CSSComputedStyleDeclaration::isPropertyImplicit(const String&)
 
 ExceptionOr<void> CSSComputedStyleDeclaration::setProperty(const String&, const String&, const String&)
 {
-    return Exception { NO_MODIFICATION_ALLOWED_ERR };
+    return Exception { NoModificationAllowedError };
 }
 
 ExceptionOr<String> CSSComputedStyleDeclaration::removeProperty(const String&)
 {
-    return Exception { NO_MODIFICATION_ALLOWED_ERR };
+    return Exception { NoModificationAllowedError };
 }
     
 RefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValueInternal(CSSPropertyID propertyID)
@@ -4175,7 +4274,7 @@ String CSSComputedStyleDeclaration::getPropertyValueInternal(CSSPropertyID prope
 
 ExceptionOr<bool> CSSComputedStyleDeclaration::setPropertyInternal(CSSPropertyID, const String&, bool)
 {
-    return Exception { NO_MODIFICATION_ALLOWED_ERR };
+    return Exception { NoModificationAllowedError };
 }
 
 Ref<CSSValueList> ComputedStyleExtractor::getBackgroundShorthandValue()