Bug 1507305 - Use Servo to serialize most of the already-exposed shorthands. r=heycam
authorEmilio Cobos Álvarez <emilio@crisal.io>
Thu, 15 Nov 2018 04:10:08 +0000
changeset 446548 76aa81358d762cbc618c1913061b57eccc145b1d
parent 446547 5201cfe20675cb2ab6dbf4ddff079c176a807fad
child 446549 eff95fc19f19f108a7554f74e456f9fd7664541a
push id35043
push userebalazs@mozilla.com
push dateThu, 15 Nov 2018 16:12:36 +0000
treeherdermozilla-central@59026ada59bd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam
bugs1507305
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1507305 - Use Servo to serialize most of the already-exposed shorthands. r=heycam Skip mask and text-decoration for now since there's a single test-case failing for each that seem worth fixing in a different bug: * For mask, there's the case of setting mask: url(foo.svg#bar), which we test we serialize absolutely. But given we're uncomputing it we don't serialize the resolved URL. Chrome doesn't either so we could just change the test, but even if we decided to do it we probably should do it in a separate bug. * For text-decoration, we need to resolve the value, when it's an interpolation between currentcolor and other color. Right now that returns the empty string which is not great: https://searchfox.org/mozilla-central/rev/d850d799a0009f851b5535580e0a8b4bb2c591d7/servo/components/style/values/specified/color.rs#194 So I need to come up with something. Probably we need to implement the "hard" version of the serialization code that doesn't reuse the animation machinery. Definitely a separate bug though. While at it, also serialize all <position> longhands with Servo, so that I can clean up the tests. Differential Revision: https://phabricator.services.mozilla.com/D11948
layout/style/ServoCSSPropList.mako.py
layout/style/nsComputedDOMStyle.cpp
layout/style/nsComputedDOMStyle.h
layout/style/test/test_computed_style.html
layout/style/test/test_transitions_per_property.html
--- a/layout/style/ServoCSSPropList.mako.py
+++ b/layout/style/ServoCSSPropList.mako.py
@@ -100,16 +100,17 @@ SERIALIZED_PREDEFINED_TYPES = [
     "Length",
     "LengthOrPercentage",
     "NonNegativeLength",
     "NonNegativeLengthOrPercentage",
     "ListStyleType",
     "OffsetPath",
     "Opacity",
     "OverflowWrap",
+    "Position",
     "Quotes",
     "Resize",
     "Rotate",
     "Scale",
     "TextAlign",
     "Translate",
     "TimingFunction",
     "TransformStyle",
@@ -121,19 +122,21 @@ SERIALIZED_PREDEFINED_TYPES = [
     "position::VerticalPosition",
     "url::ImageUrlOrNone",
 ]
 
 def serialized_by_servo(prop):
     # If the property requires layout information, no such luck.
     if "GETCS_NEEDS_LAYOUT_FLUSH" in prop.flags:
         return False
-    # No shorthands yet.
     if prop.type() == "shorthand":
-        return False
+        # FIXME: Need to serialize a value interpolated with currentcolor
+        # properly to be able to use text-decoration, and figure out what to do
+        # with relative mask urls.
+        return prop.name != "text-decoration" and prop.name != "mask"
     # Keywords are all fine, except -moz-osx-font-smoothing, which does
     # resistfingerprinting stuff.
     if prop.keyword and prop.name != "-moz-osx-font-smoothing":
         return True
     if prop.predefined_type in SERIALIZED_PREDEFINED_TYPES:
         return True
     # TODO(emilio): Enable the rest of the longhands.
     return False
@@ -156,18 +159,18 @@ def flags(prop):
     if prop.enabled_in == "":
         result.append("Inaccessible")
     if "GETCS_NEEDS_LAYOUT_FLUSH" in prop.flags:
         result.append("GetCSNeedsLayoutFlush")
     if "CAN_ANIMATE_ON_COMPOSITOR" in prop.flags:
         result.append("CanAnimateOnCompositor")
     if exposed_on_getcs(prop):
         result.append("ExposedOnGetCS")
-    if serialized_by_servo(prop):
-        result.append("SerializedByServo")
+        if serialized_by_servo(prop):
+            result.append("SerializedByServo")
     if prop.type() == "longhand" and prop.logical:
         result.append("IsLogical")
     return ", ".join('"{}"'.format(flag) for flag in result)
 
 def pref(prop):
     if prop.gecko_pref:
         return '"' + prop.gecko_pref + '"'
     return '""'
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -1338,47 +1338,16 @@ nsComputedDOMStyle::DoGetOsxFontSmoothin
     return nullptr;
 
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
   val->SetIdent(nsCSSProps::ValueToKeywordEnum(StyleFont()->mFont.smoothing,
                                                nsCSSProps::kFontSmoothingKTable));
   return val.forget();
 }
 
-// return a value *only* for valid longhand values from CSS 2.1, either
-// normal or small-caps only
-already_AddRefed<CSSValue>
-nsComputedDOMStyle::DoGetFontVariant()
-{
-  const nsFont& f = StyleFont()->mFont;
-
-  // if any of the other font-variant subproperties other than
-  // font-variant-caps are not normal then can't calculate a computed value
-  if (f.variantAlternates || f.variantEastAsian || f.variantLigatures ||
-      f.variantNumeric || f.variantPosition) {
-    return nullptr;
-  }
-
-  nsCSSKeyword keyword;
-  switch (f.variantCaps) {
-    case 0:
-      keyword = eCSSKeyword_normal;
-      break;
-    case NS_FONT_VARIANT_CAPS_SMALLCAPS:
-      keyword = eCSSKeyword_small_caps;
-      break;
-    default:
-      return nullptr;
-  }
-
-  RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
-  val->SetIdent(keyword);
-  return val.forget();
-}
-
 static void
 SetValueToCalc(const nsStyleCoord::CalcValue* aCalc,
                nsROCSSPrimitiveValue*         aValue)
 {
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
   nsAutoString tmp, result;
 
   result.AppendLiteral("calc(");
@@ -1476,23 +1445,16 @@ nsComputedDOMStyle::SetValueToURLValue(c
   nsAutoString url;
   url.AppendLiteral(u"url(");
   nsStyleUtil::AppendEscapedCSSString(source, url, '"');
   url.Append(')');
   aValue->SetString(url);
 }
 
 already_AddRefed<CSSValue>
-nsComputedDOMStyle::DoGetBackgroundPosition()
-{
-  const nsStyleImageLayers& layers = StyleBackground()->mImage;
-  return DoGetImageLayerPosition(layers);
-}
-
-already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetGridTemplateAreas()
 {
   const css::GridTemplateAreasValue* areas =
     StylePosition()->mGridTemplateAreas;
   if (!areas) {
     RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
     val->SetIdent(eCSSKeyword_none);
     return val.forget();
@@ -2206,44 +2168,16 @@ nsComputedDOMStyle::DoGetScrollSnapPoint
 
 already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetScrollSnapPointsY()
 {
   return GetScrollSnapPoints(StyleDisplay()->mScrollSnapPointsY);
 }
 
 already_AddRefed<CSSValue>
-nsComputedDOMStyle::DoGetScrollSnapDestination()
-{
-  RefPtr<nsDOMCSSValueList> valueList = GetROCSSValueList(false);
-  SetValueToPosition(StyleDisplay()->mScrollSnapDestination, valueList);
-  return valueList.forget();
-}
-
-already_AddRefed<CSSValue>
-nsComputedDOMStyle::DoGetScrollSnapCoordinate()
-{
-  const nsStyleDisplay* sd = StyleDisplay();
-  if (sd->mScrollSnapCoordinate.IsEmpty()) {
-    // Having no snap coordinates is interpreted as "none"
-    RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
-    val->SetIdent(eCSSKeyword_none);
-    return val.forget();
-  } else {
-    RefPtr<nsDOMCSSValueList> valueList = GetROCSSValueList(true);
-    for (size_t i = 0, i_end = sd->mScrollSnapCoordinate.Length(); i < i_end; ++i) {
-      RefPtr<nsDOMCSSValueList> itemList = GetROCSSValueList(false);
-      SetValueToPosition(sd->mScrollSnapCoordinate[i], itemList);
-      valueList->AppendCSSValue(itemList.forget());
-    }
-    return valueList.forget();
-  }
-}
-
-already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetScrollbarColor()
 {
   const nsStyleUI* ui = StyleUI();
   MOZ_ASSERT(ui->mScrollbarFaceColor.IsAuto() ==
              ui->mScrollbarTrackColor.IsAuto(),
              "Whether the two colors are auto should be identical");
 
   if (ui->mScrollbarFaceColor.IsAuto()) {
@@ -2976,39 +2910,16 @@ nsComputedDOMStyle::DoGetWillChange()
     property->SetString(nsDependentAtomString(ident));
     valueList->AppendCSSValue(property.forget());
   }
 
   return valueList.forget();
 }
 
 already_AddRefed<CSSValue>
-nsComputedDOMStyle::DoGetOverflow()
-{
-  const nsStyleDisplay* display = StyleDisplay();
-
-  RefPtr<nsROCSSPrimitiveValue> overflowX = new nsROCSSPrimitiveValue;
-  overflowX->SetIdent(
-    nsCSSProps::ValueToKeywordEnum(display->mOverflowX,
-                                   nsCSSProps::kOverflowKTable));
-  if (display->mOverflowX == display->mOverflowY) {
-    return overflowX.forget();
-  }
-  RefPtr<nsDOMCSSValueList> valueList = GetROCSSValueList(false);
-  valueList->AppendCSSValue(overflowX.forget());
-
-  RefPtr<nsROCSSPrimitiveValue> overflowY= new nsROCSSPrimitiveValue;
-  overflowY->SetIdent(
-    nsCSSProps::ValueToKeywordEnum(display->mOverflowY,
-                                   nsCSSProps::kOverflowKTable));
-  valueList->AppendCSSValue(overflowY.forget());
-  return valueList.forget();
-}
-
-already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetOverflowY()
 {
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
   val->SetIdent(
     nsCSSProps::ValueToKeywordEnum(StyleDisplay()->mOverflowY,
                                    nsCSSProps::kOverflowSubKTable));
   return val.forget();
 }
@@ -3206,24 +3117,16 @@ nsComputedDOMStyle::DoGetMinWidth()
     minWidth.SetCoordValue(0);
   }
 
   SetValueToCoord(val, minWidth, true, nullptr, nsCSSProps::kWidthKTable);
   return val.forget();
 }
 
 already_AddRefed<CSSValue>
-nsComputedDOMStyle::DoGetObjectPosition()
-{
-  RefPtr<nsDOMCSSValueList> valueList = GetROCSSValueList(false);
-  SetValueToPosition(StylePosition()->mObjectPosition, valueList);
-  return valueList.forget();
-}
-
-already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetLeft()
 {
   return GetOffsetWidthFor(eSideLeft);
 }
 
 already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetRight()
 {
@@ -4235,23 +4138,16 @@ nsComputedDOMStyle::DoGetMask()
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
 
   SetValueToURLValue(firstLayer.mImage.GetURLValue(), val);
 
   return val.forget();
 }
 
 already_AddRefed<CSSValue>
-nsComputedDOMStyle::DoGetMaskPosition()
-{
-  const nsStyleImageLayers& layers = StyleSVGReset()->mMask;
-  return DoGetImageLayerPosition(layers);
-}
-
-already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetPaintOrder()
 {
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
   nsAutoString string;
   uint8_t paintOrder = StyleSVG()->mPaintOrder;
   nsStyleUtil::AppendPaintOrderValue(paintOrder, string);
   val->SetString(string);
   return val.forget();
--- a/layout/style/nsComputedDOMStyle.h
+++ b/layout/style/nsComputedDOMStyle.h
@@ -243,50 +243,44 @@ private:
   already_AddRefed<CSSValue> DoGetBoxFlex();
 
   already_AddRefed<CSSValue> DoGetWidth();
   already_AddRefed<CSSValue> DoGetHeight();
   already_AddRefed<CSSValue> DoGetMaxHeight();
   already_AddRefed<CSSValue> DoGetMaxWidth();
   already_AddRefed<CSSValue> DoGetMinHeight();
   already_AddRefed<CSSValue> DoGetMinWidth();
-  already_AddRefed<CSSValue> DoGetObjectPosition();
   already_AddRefed<CSSValue> DoGetLeft();
   already_AddRefed<CSSValue> DoGetTop();
   already_AddRefed<CSSValue> DoGetRight();
   already_AddRefed<CSSValue> DoGetBottom();
 
   /* Color */
   already_AddRefed<CSSValue> DoGetColor();
 
   /* Font properties */
   already_AddRefed<CSSValue> DoGetOsxFontSmoothing();
-  already_AddRefed<CSSValue> DoGetFontVariant();
 
   /* Grid properties */
   already_AddRefed<CSSValue> DoGetGridAutoFlow();
   already_AddRefed<CSSValue> DoGetGridAutoColumns();
   already_AddRefed<CSSValue> DoGetGridAutoRows();
   already_AddRefed<CSSValue> DoGetGridTemplateAreas();
   already_AddRefed<CSSValue> DoGetGridTemplateColumns();
   already_AddRefed<CSSValue> DoGetGridTemplateRows();
   already_AddRefed<CSSValue> DoGetGridColumnStart();
   already_AddRefed<CSSValue> DoGetGridColumnEnd();
   already_AddRefed<CSSValue> DoGetGridRowStart();
   already_AddRefed<CSSValue> DoGetGridRowEnd();
 
   /* StyleImageLayer properties */
   already_AddRefed<CSSValue> DoGetImageLayerPosition(const nsStyleImageLayers& aLayers);
 
-  /* Background properties */
-  already_AddRefed<CSSValue> DoGetBackgroundPosition();
-
   /* Mask properties */
   already_AddRefed<CSSValue> DoGetMask();
-  already_AddRefed<CSSValue> DoGetMaskPosition();
 
   /* Padding properties */
   already_AddRefed<CSSValue> DoGetPaddingTop();
   already_AddRefed<CSSValue> DoGetPaddingBottom();
   already_AddRefed<CSSValue> DoGetPaddingLeft();
   already_AddRefed<CSSValue> DoGetPaddingRight();
 
   /* Table Properties */
@@ -310,18 +304,16 @@ private:
   /* Border Image */
   already_AddRefed<CSSValue> DoGetBorderImageSlice();
   already_AddRefed<CSSValue> DoGetBorderImageWidth();
   already_AddRefed<CSSValue> DoGetBorderImageOutset();
 
   /* Box Shadow */
   already_AddRefed<CSSValue> DoGetBoxShadow();
 
-  /* Window Shadow */
-
   /* Margin Properties */
   already_AddRefed<CSSValue> DoGetMarginTopWidth();
   already_AddRefed<CSSValue> DoGetMarginBottomWidth();
   already_AddRefed<CSSValue> DoGetMarginLeftWidth();
   already_AddRefed<CSSValue> DoGetMarginRightWidth();
 
   /* Outline Properties */
   already_AddRefed<CSSValue> DoGetOutlineWidth();
@@ -345,42 +337,35 @@ private:
   already_AddRefed<CSSValue> DoGetTextEmphasisStyle();
   already_AddRefed<CSSValue> DoGetTextOverflow();
   already_AddRefed<CSSValue> DoGetTextShadow();
   already_AddRefed<CSSValue> DoGetLetterSpacing();
   already_AddRefed<CSSValue> DoGetWordSpacing();
   already_AddRefed<CSSValue> DoGetTabSize();
   already_AddRefed<CSSValue> DoGetWebkitTextStrokeWidth();
 
-  /* Visibility properties */
-
-  /* Direction properties */
-
   /* Display properties */
   already_AddRefed<CSSValue> DoGetBinding();
   already_AddRefed<CSSValue> DoGetDisplay();
   already_AddRefed<CSSValue> DoGetContain();
   already_AddRefed<CSSValue> DoGetWillChange();
-  already_AddRefed<CSSValue> DoGetOverflow();
   already_AddRefed<CSSValue> DoGetOverflowY();
   already_AddRefed<CSSValue> DoGetOverflowClipBoxBlock();
   already_AddRefed<CSSValue> DoGetOverflowClipBoxInline();
   already_AddRefed<CSSValue> DoGetTouchAction();
   already_AddRefed<CSSValue> DoGetTransform();
   already_AddRefed<CSSValue> DoGetTransformOrigin();
   already_AddRefed<CSSValue> DoGetPerspective();
   already_AddRefed<CSSValue> DoGetPerspectiveOrigin();
   already_AddRefed<CSSValue> DoGetOverscrollBehaviorX();
   already_AddRefed<CSSValue> DoGetOverscrollBehaviorY();
   already_AddRefed<CSSValue> DoGetScrollSnapTypeX();
   already_AddRefed<CSSValue> DoGetScrollSnapTypeY();
   already_AddRefed<CSSValue> DoGetScrollSnapPointsX();
   already_AddRefed<CSSValue> DoGetScrollSnapPointsY();
-  already_AddRefed<CSSValue> DoGetScrollSnapDestination();
-  already_AddRefed<CSSValue> DoGetScrollSnapCoordinate();
   already_AddRefed<CSSValue> DoGetScrollbarColor();
 
   /* User interface properties */
   already_AddRefed<CSSValue> DoGetCaretColor();
   already_AddRefed<CSSValue> DoGetCursor();
   already_AddRefed<CSSValue> DoGetForceBrokenImageIcon();
 
   /* Column properties */
--- a/layout/style/test/test_computed_style.html
+++ b/layout/style/test/test_computed_style.html
@@ -139,19 +139,19 @@ var noframe_container = document.getElem
     [ "0px 0px", "0px 0px", "0 with units" ],
     [ "0% 0%", "0% 0%", "0%" ],
     [ "calc(0px) 0", "0px 0px", "0 calc with units x" ],
     [ "0 calc(0px)", "0px 0px", "0 calc with units y" ],
     [ "calc(3px - 3px) 0", "0px 0px", "computed 0 calc with units x" ],
     [ "0 calc(3px - 3px)", "0px 0px", "computed 0 calc with units y" ],
     [ "calc(0%) 0", "0% 0px", "0% calc x"],
     [ "0 calc(0%)", "0px 0%", "0% calc y"],
-    [ "calc(3px + 2% - 2%) 0", "calc(3px + 0%) 0px",
+    [ "calc(3px + 2% - 2%) 0", "calc(0% + 3px) 0px",
       "computed 0% calc x"],
-    [ "0 calc(3px + 2% - 2%)", "0px calc(3px + 0%)",
+    [ "0 calc(3px + 2% - 2%)", "0px calc(0% + 3px)",
       "computed 0% calc y"],
     [ "calc(3px - 5px) calc(6px - 7px)", "-2px -1px",
       "negative pixel width"],
     [ "", "0% 0%", "initial value" ],
   ];
 
   var p = document.createElement("p");
   var cs = getComputedStyle(p, "");
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -2484,21 +2484,21 @@ function test_background_position_transi
   if (doesPropHaveDistanceComputation) {
     check_distance(prop, "center 80%", "62.5% 85%", "bottom right");
   }
 
   // Test interpolation between edge keyword *with an offset* and non-keyword
   // values.
   div.style.setProperty("transition-property", "none", "");
   div.style.setProperty(prop, "right 20px bottom 30%", "");
-  is(cs.getPropertyValue(prop), "calc(-20px + 100%) 70%",
+  is(cs.getPropertyValue(prop), "calc(100% - 20px) 70%",
      "property " + prop + ": computed value before transition");
   div.style.setProperty("transition-property", prop, "");
   div.style.setProperty(prop, "calc(40px + 20%) calc(12px + 30%)", "");
-  is(cs.getPropertyValue(prop), "calc(-5px + 80%) calc(3px + 60%)",
+  is(cs.getPropertyValue(prop), "calc(80% - 5px) calc(60% + 3px)",
      "property " + prop + ": interpolation of edge keywords w/ offsets & calc");
   if (doesPropHaveDistanceComputation) {
     check_distance(prop, "right 20px bottom 30%",
                          "calc(-5px + 80%) calc(3px + 60%)",
                          "calc(40px + 20%) calc(12px + 30%)");
   }
 
   test_background_position_size_common(prop, doesPropTakeListValues,
@@ -2627,58 +2627,56 @@ function test_background_position_size_c
   div.style.setProperty("transition-property", prop, "");
   div.style.setProperty(prop, "50px 0", "");
   is(cs.getPropertyValue(prop), "20px 30px",
      "property " + prop + ": interpolation of lengths");
   if (doesPropHaveDistanceComputation) {
     check_distance(prop, "10px 40px", "20px 30px", "50px 0");
   }
 
-  const serializesCalcAccordingToTheSpec = prop == "mask-size" || prop == "background-size";
-
   // Test interpolation that computes to to calc() (transition from % to px)
   div.style.setProperty("transition-property", "none", "");
   div.style.setProperty(prop, "20% 40%", "");
   is(cs.getPropertyValue(prop), "20% 40%",
      "property " + prop + ": computed value before transition");
   div.style.setProperty("transition-property", prop, "");
   div.style.setProperty(prop, "12px 20px", "");
   is(cs.getPropertyValue(prop),
-     serializesCalcAccordingToTheSpec ? "calc(15% + 3px) calc(30% + 5px)" : "calc(3px + 15%) calc(5px + 30%)",
+     "calc(15% + 3px) calc(30% + 5px)",
      "property " + prop + ": interpolation that computes to calc()");
   if (doesPropHaveDistanceComputation) {
     check_distance(prop, "20% 40%",
                          "calc(3px + 15%) calc(5px + 30%)",
                          "12px 20px");
   }
 
   // Test interpolation that computes to to calc() (transition from px to %)
   div.style.setProperty("transition-property", "none", "");
   div.style.setProperty(prop, "12px 20px", "");
   is(cs.getPropertyValue(prop), "12px 20px",
      "property " + prop + ": computed value before transition");
   div.style.setProperty("transition-property", prop, "");
   div.style.setProperty(prop, "20% 40%", "");
   is(cs.getPropertyValue(prop),
-     serializesCalcAccordingToTheSpec ? "calc(5% + 9px) calc(10% + 15px)" : "calc(9px + 5%) calc(15px + 10%)",
+     "calc(5% + 9px) calc(10% + 15px)",
      "property " + prop + ": interpolation that computes to calc()");
   if (doesPropHaveDistanceComputation) {
     check_distance(prop, "12px 20px",
                          "calc(9px + 5%) calc(15px + 10%)",
                          "20% 40%");
   }
 
   // Test interpolation between calc() and non-calc()
   div.style.setProperty("transition-property", "none", "");
   div.style.setProperty(prop, "calc(40px + 10%) 16px", "");
-  is(cs.getPropertyValue(prop), serializesCalcAccordingToTheSpec ? "calc(10% + 40px) 16px" : "calc(40px + 10%) 16px",
+  is(cs.getPropertyValue(prop), "calc(10% + 40px) 16px",
      "property " + prop + ": computed value before transition");
   div.style.setProperty("transition-property", prop, "");
   div.style.setProperty(prop, "30% calc(8px + 60%)", "");
-  is(cs.getPropertyValue(prop), serializesCalcAccordingToTheSpec ? "calc(15% + 30px) calc(15% + 14px)" : "calc(30px + 15%) calc(14px + 15%)",
+  is(cs.getPropertyValue(prop), "calc(15% + 30px) calc(15% + 14px)",
      "property " + prop + ": interpolation between calc() and non-calc()");
   if (doesPropHaveDistanceComputation) {
     check_distance(prop, "calc(40px + 10%) 16px",
                          "calc(30px + 15%) calc(14px + 15%)",
                          "30% calc(8px + 60%)");
   }
 
   // Test list values, if appropriate
@@ -2710,36 +2708,33 @@ function test_background_position_size_c
                            "50px 20%, 70% 50px, 30% 40%, 25px 50px");
     }
     div.style.setProperty("transition-property", "none", "");
     div.style.setProperty(prop, "20% 40%, 8px 12px", "");
     is(cs.getPropertyValue(prop), "20% 40%, 8px 12px",
        "property " + prop + ": computed value before transition");
     div.style.setProperty("transition-property", prop, "");
     div.style.setProperty(prop, "12px 20px, 40% 16%", "");
-    is(cs.getPropertyValue(prop), serializesCalcAccordingToTheSpec
-        ? "calc(15% + 3px) calc(30% + 5px), calc(10% + 6px) calc(4% + 9px)"
-        : "calc(3px + 15%) calc(5px + 30%), calc(6px + 10%) calc(9px + 4%)",
+    is(cs.getPropertyValue(prop),
+       "calc(15% + 3px) calc(30% + 5px), calc(10% + 6px) calc(4% + 9px)",
        "property " + prop + ": interpolation that computes to calc()");
     if (doesPropHaveDistanceComputation) {
       check_distance(prop, "20% 40%, 8px 12px",
                            "calc(3px + 15%) calc(5px + 30%), calc(6px + 10%) calc(9px + 4%)",
                            "12px 20px, 40% 16%");
     }
     div.style.setProperty("transition-property", "none", "");
     div.style.setProperty(prop, "calc(20% + 40px) calc(40px + 40%), 8px 12%, calc(20px + 12%) calc(24px + 8%)", "");
-    is(cs.getPropertyValue(prop), serializesCalcAccordingToTheSpec
-        ? "calc(20% + 40px) calc(40% + 40px), 8px 12%, calc(12% + 20px) calc(8% + 24px)"
-        : "calc(40px + 20%) calc(40px + 40%), 8px 12%, calc(20px + 12%) calc(24px + 8%)",
+    is(cs.getPropertyValue(prop),
+       "calc(20% + 40px) calc(40% + 40px), 8px 12%, calc(12% + 20px) calc(8% + 24px)",
        "property " + prop + ": computed value before transition");
     div.style.setProperty("transition-property", prop, "");
     div.style.setProperty(prop, "12px 20%, calc(20%) calc(16px + 60%), calc(8px + 20%) calc(40px + 16%)", "");
-    is(cs.getPropertyValue(prop), serializesCalcAccordingToTheSpec
-        ? "calc(15% + 33px) calc(35% + 30px), calc(5% + 6px) calc(24% + 4px), calc(14% + 17px) calc(10% + 28px)"
-        : "calc(33px + 15%) calc(30px + 35%), calc(6px + 5%) calc(4px + 24%), calc(17px + 14%) calc(28px + 10%)",
+    is(cs.getPropertyValue(prop),
+        "calc(15% + 33px) calc(35% + 30px), calc(5% + 6px) calc(24% + 4px), calc(14% + 17px) calc(10% + 28px)",
        "property " + prop + ": interpolation that computes to calc()");
     if (doesPropHaveDistanceComputation) {
       check_distance(prop, "calc(20% + 40px) calc(40px + 40%), 8px 12%, calc(20px + 12%) calc(24px + 8%)",
                            "calc(33px + 15%) calc(30px + 35%), calc(6px + 5%) calc(4px + 24%), calc(17px + 14%) calc(28px + 10%)",
                            "12px 20%, calc(20%) calc(16px + 60%), calc(8px + 20%) calc(40px + 16%)");
     }
   }
 }