Bug 1367028 part 1 - Simplify serialization of specified rect values in border-image props when possible. r=dholbert
authorXidorn Quan <me@upsuper.org>
Mon, 29 May 2017 14:53:58 +1000
changeset 409501 43c472a9bfb4779d560f9c9e139ceb38cf619aae
parent 409500 38d72735ee8a235c90598cfdfce99409b79ebcc9
child 409502 2b57daca7dcb350482c31d1e99be71004cefae8b
push id7391
push usermtabara@mozilla.com
push dateMon, 12 Jun 2017 13:08:53 +0000
treeherdermozilla-beta@2191d7f87e2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1367028
milestone55.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 1367028 part 1 - Simplify serialization of specified rect values in border-image props when possible. r=dholbert MozReview-Commit-ID: C4mNCHqeIoX
dom/animation/test/chrome/test_animation_properties.html
layout/style/nsCSSValue.cpp
layout/style/test/stylo-failures.md
layout/style/test/test_shorthand_property_getters.html
--- a/dom/animation/test/chrome/test_animation_properties.html
+++ b/dom/animation/test/chrome/test_animation_properties.html
@@ -143,33 +143,31 @@ var gTests = [
                             valueFormat(1, 'solid', 'replace') ] },
                 { property: 'border-right-style',
                   values: [ valueFormat(0, 'dotted', 'replace', 'linear'),
                             valueFormat(1, 'dashed', 'replace') ] },
                 { property: 'border-top-style',
                   values: [ valueFormat(0, 'dotted', 'replace', 'linear'),
                             valueFormat(1, 'dashed', 'replace') ] },
                 { property: 'border-image-outset',
-                  values: [ valueFormat(0, '0 0 0 0', 'replace', 'linear'),
-                            valueFormat(1, '0 0 0 0', 'replace') ] },
+                  values: [ valueFormat(0, '0', 'replace', 'linear'),
+                            valueFormat(1, '0', 'replace') ] },
                 { property: 'border-image-repeat',
                   values: [ valueFormat(0,
                                         'stretch stretch', 'replace', 'linear'),
                             valueFormat(1, 'stretch stretch', 'replace') ] },
                 { property: 'border-image-slice',
-                  values: [ valueFormat(0, '100% 100% 100% 100%',
-                                  'replace', 'linear'),
-                            valueFormat(1,
-                                        '100% 100% 100% 100%', 'replace') ] },
+                  values: [ valueFormat(0, '100%', 'replace', 'linear'),
+                            valueFormat(1, '100%', 'replace') ] },
                 { property: 'border-image-source',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
                             valueFormat(1, 'none', 'replace') ] },
                 { property: 'border-image-width',
-                  values: [ valueFormat(0, '1 1 1 1', 'replace', 'linear'),
-                            valueFormat(1, '1 1 1 1', 'replace') ] },
+                  values: [ valueFormat(0, '1', 'replace', 'linear'),
+                            valueFormat(1, '1', 'replace') ] },
                 { property: '-moz-border-bottom-colors',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
                             valueFormat(1, 'none', 'replace') ] },
                 { property: '-moz-border-left-colors',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
                             valueFormat(1, 'none', 'replace') ] },
                 { property: '-moz-border-right-colors',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
@@ -216,33 +214,31 @@ var gTests = [
                             valueFormat(1, 'solid', 'replace') ] },
                 { property: 'border-right-style',
                   values: [ valueFormat(0, 'dotted', 'replace', 'linear'),
                             valueFormat(1, 'dashed', 'replace') ] },
                 { property: 'border-top-style',
                   values: [ valueFormat(0, 'dotted', 'replace', 'linear'),
                             valueFormat(1, 'dashed', 'replace') ] },
                 { property: 'border-image-outset',
-                  values: [ valueFormat(0, '0 0 0 0', 'replace', 'linear'),
-                            valueFormat(1, '0 0 0 0', 'replace') ] },
+                  values: [ valueFormat(0, '0', 'replace', 'linear'),
+                            valueFormat(1, '0', 'replace') ] },
                 { property: 'border-image-repeat',
                   values: [ valueFormat(0,
                                         'stretch stretch', 'replace', 'linear'),
                             valueFormat(1, 'stretch stretch', 'replace') ] },
                 { property: 'border-image-slice',
-                  values: [ valueFormat(0, '100% 100% 100% 100%',
-                                  'replace', 'linear'),
-                            valueFormat(1,
-                                        '100% 100% 100% 100%', 'replace') ] },
+                  values: [ valueFormat(0, '100%', 'replace', 'linear'),
+                            valueFormat(1, '100%', 'replace') ] },
                 { property: 'border-image-source',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
                             valueFormat(1, 'none', 'replace') ] },
                 { property: 'border-image-width',
-                  values: [ valueFormat(0, '1 1 1 1', 'replace', 'linear'),
-                            valueFormat(1, '1 1 1 1', 'replace') ] },
+                  values: [ valueFormat(0, '1', 'replace', 'linear'),
+                            valueFormat(1, '1', 'replace') ] },
                 { property: '-moz-border-bottom-colors',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
                             valueFormat(1, 'none', 'replace') ] },
                 { property: '-moz-border-left-colors',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
                             valueFormat(1, 'none', 'replace') ] },
                 { property: '-moz-border-right-colors',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
@@ -498,33 +494,31 @@ var gTests = [
                             valueFormat(1, 'dashed', 'replace') ] },
                 { property: 'border-right-style',
                   values: [ valueFormat(0, 'dotted', 'replace', 'linear'),
                             valueFormat(1, 'dashed', 'replace') ] },
                 { property: 'border-top-style',
                   values: [ valueFormat(0, 'dotted', 'replace', 'linear'),
                             valueFormat(1, 'dashed', 'replace') ] },
                 { property: 'border-image-outset',
-                  values: [ valueFormat(0, '0 0 0 0', 'replace', 'linear'),
-                            valueFormat(1, '0 0 0 0', 'replace') ] },
+                  values: [ valueFormat(0, '0', 'replace', 'linear'),
+                            valueFormat(1, '0', 'replace') ] },
                 { property: 'border-image-repeat',
                   values: [ valueFormat(0,
                                         'stretch stretch', 'replace', 'linear'),
                             valueFormat(1, 'stretch stretch', 'replace') ] },
                 { property: 'border-image-slice',
-                  values: [ valueFormat(0, '100% 100% 100% 100%',
-                                  'replace', 'linear'),
-                            valueFormat(1,
-                                        '100% 100% 100% 100%', 'replace') ] },
+                  values: [ valueFormat(0, '100%', 'replace', 'linear'),
+                            valueFormat(1, '100%', 'replace') ] },
                 { property: 'border-image-source',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
                             valueFormat(1, 'none', 'replace') ] },
                 { property: 'border-image-width',
-                  values: [ valueFormat(0, '1 1 1 1', 'replace', 'linear'),
-                            valueFormat(1, '1 1 1 1', 'replace') ] },
+                  values: [ valueFormat(0, '1', 'replace', 'linear'),
+                            valueFormat(1, '1', 'replace') ] },
                 { property: '-moz-border-bottom-colors',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
                             valueFormat(1, 'none', 'replace') ] },
                 { property: '-moz-border-left-colors',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
                             valueFormat(1, 'none', 'replace') ] },
                 { property: '-moz-border-right-colors',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
@@ -570,33 +564,31 @@ var gTests = [
                             valueFormat(1, 'dashed', 'replace') ] },
                 { property: 'border-right-style',
                   values: [ valueFormat(0, 'dotted', 'replace', 'linear'),
                             valueFormat(1, 'dashed', 'replace') ] },
                 { property: 'border-top-style',
                   values: [ valueFormat(0, 'dotted', 'replace', 'linear'),
                             valueFormat(1, 'dashed', 'replace') ] },
                 { property: 'border-image-outset',
-                  values: [ valueFormat(0, '0 0 0 0', 'replace', 'linear'),
-                            valueFormat(1, '0 0 0 0', 'replace') ] },
+                  values: [ valueFormat(0, '0', 'replace', 'linear'),
+                            valueFormat(1, '0', 'replace') ] },
                 { property: 'border-image-repeat',
                   values: [ valueFormat(0,
                                         'stretch stretch', 'replace', 'linear'),
                             valueFormat(1, 'stretch stretch', 'replace') ] },
                 { property: 'border-image-slice',
-                  values: [ valueFormat(0, '100% 100% 100% 100%',
-                                  'replace', 'linear'),
-                            valueFormat(1,
-                                        '100% 100% 100% 100%', 'replace') ] },
+                  values: [ valueFormat(0, '100%', 'replace', 'linear'),
+                            valueFormat(1, '100%', 'replace') ] },
                 { property: 'border-image-source',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
                             valueFormat(1, 'none', 'replace') ] },
                 { property: 'border-image-width',
-                  values: [ valueFormat(0, '1 1 1 1', 'replace', 'linear'),
-                            valueFormat(1, '1 1 1 1', 'replace') ] },
+                  values: [ valueFormat(0, '1', 'replace', 'linear'),
+                            valueFormat(1, '1', 'replace') ] },
                 { property: '-moz-border-bottom-colors',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
                             valueFormat(1, 'none', 'replace') ] },
                 { property: '-moz-border-left-colors',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
                             valueFormat(1, 'none', 'replace') ] },
                 { property: '-moz-border-right-colors',
                   values: [ valueFormat(0, 'none', 'replace', 'linear'),
--- a/layout/style/nsCSSValue.cpp
+++ b/layout/style/nsCSSValue.cpp
@@ -2556,19 +2556,23 @@ nsCSSRect::AppendToString(nsCSSPropertyI
   MOZ_ASSERT(mTop.GetUnit() != eCSSUnit_Null &&
              mTop.GetUnit() != eCSSUnit_Inherit &&
              mTop.GetUnit() != eCSSUnit_Initial &&
              mTop.GetUnit() != eCSSUnit_Unset,
              "parser should have used a bare value");
 
   if (eCSSProperty_border_image_slice == aProperty ||
       eCSSProperty_border_image_width == aProperty ||
-      eCSSProperty_border_image_outset == aProperty ||
-      eCSSProperty_DOM == aProperty) {
-    NS_NAMED_LITERAL_STRING(space, " ");
+      eCSSProperty_border_image_outset == aProperty) {
+    nsCSSPropertyID props[] = { aProperty, aProperty, aProperty, aProperty };
+    const nsCSSValue* values[] = { &mTop, &mRight, &mBottom, &mLeft };
+    nsCSSValue::AppendSidesShorthandToString(props, values,
+                                             aResult, aSerialization);
+  } else if (eCSSProperty_DOM == aProperty) {
+     NS_NAMED_LITERAL_STRING(space, " ");
 
     mTop.AppendToString(aProperty, aResult, aSerialization);
     aResult.Append(space);
     mRight.AppendToString(aProperty, aResult, aSerialization);
     aResult.Append(space);
     mBottom.AppendToString(aProperty, aResult, aSerialization);
     aResult.Append(space);
     mLeft.AppendToString(aProperty, aResult, aSerialization);
--- a/layout/style/test/stylo-failures.md
+++ b/layout/style/test/stylo-failures.md
@@ -133,18 +133,16 @@ to mochitest command.
 ## Need Gecko change
 
 * Servo is correct but Gecko is wrong
   * Gecko rejects calc() in -webkit-gradient bug 1363349
     * test_property_syntax_errors.html `-webkit-gradient` [20]
 * test_property_syntax_errors.html `linear-gradient(0,`: unitless zero as degree bug 1363292 [10]
 * test_specified_value_serialization.html `-webkit-radial-gradient`: bug 1367299 [1]
 * test_variables.html `var(--var6)`: irrelevant test for stylo bug 1367306 [1]
-* Difference in rect serialization bug 1367028
-  * test_shorthand_property_getters.html `5 5 5 5` [1]
 
 ## Unknown / Unsure
 
 * test_selectors_on_anonymous_content.html: xbl and :nth-child [1]
 * test_parse_rule.html `rgb(0, 128, 0)`: color properties not getting computed [5]
 * test_selectors.html `:nth-child`: &lt;an+b&gt; parsing difference bug 1364009 [14]
 
 ## Ignore
--- a/layout/style/test/test_shorthand_property_getters.html
+++ b/layout/style/test/test_shorthand_property_getters.html
@@ -230,17 +230,17 @@ is(e.style.animation, "", "should not ha
 e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running, running;");
 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
 
 // Check that the 'border' shorthand resets 'border-image' and
 // '-moz-border-*-colors', but that other 'border-*' shorthands don't
 // (bug 482692).
 e.setAttribute("style", 'border-image: url("foo.png") 5 5 5 5 / 5 5 5 5 / 5 5 5 5 repeat repeat; border-left: medium solid green');
 is(e.style.cssText,
-   'border-image: url("foo.png") 5 5 5 5 / 5 5 5 5 / 5 5 5 5 repeat repeat; border-left: medium solid green;',
+   'border-image: url("foo.png") 5 / 5 / 5 repeat repeat; border-left: medium solid green;',
    "border-left does NOT reset border-image");
 e.setAttribute("style", 'border-image: url("foo.png") 5 5 5 5; border: medium solid green');
 is(e.style.cssText,
    'border: medium solid green;',
    "border DOES reset border-image");
 e.setAttribute("style", '-moz-border-left-colors: fuchsia blue; border-left: medium solid green');
 is(e.style.cssText,
    '-moz-border-left-colors: fuchsia blue; border-left: medium solid green;',