Bug 1520236 - [css-logical] Implement the border-{block,inline}-{color,style,width} shorthands. r=emilio
authorMats Palmgren <mats@mozilla.com>
Thu, 17 Jan 2019 20:02:41 +0100
changeset 514312 47d3dbd969f5849d813f4e312b1aa9ee78abac5e
parent 514311 de8ba06db79263e44844ea153804d6d3646aaa92
child 514313 1db2248f441513991df17a73112ffd9cc1846846
child 514379 23b890a3fc7876e64d24827246bc981b0223655e
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemilio
bugs1520236
milestone66.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 1520236 - [css-logical] Implement the border-{block,inline}-{color,style,width} shorthands. r=emilio
devtools/shared/css/generated/properties-db.js
layout/style/test/property_database.js
layout/style/test/test_visited_reftests.html
servo/components/style/properties/shorthands/border.mako.rs
testing/web-platform/meta/css/css-logical/logical-box-border-color.html.ini
testing/web-platform/meta/css/css-logical/logical-box-border-style.html.ini
testing/web-platform/meta/css/css-logical/logical-box-border-width.html.ini
--- a/devtools/shared/css/generated/properties-db.js
+++ b/devtools/shared/css/generated/properties-db.js
@@ -3718,16 +3718,38 @@ exports.CSS_PROPERTIES = {
       "ridge",
       "solid",
       "thick",
       "thin",
       "transparent",
       "unset"
     ]
   },
+  "border-block-color": {
+    "isInherited": false,
+    "subproperties": [
+      "border-block-start-color",
+      "border-block-end-color"
+    ],
+    "supports": [
+      2
+    ],
+    "values": [
+      "COLOR",
+      "currentColor",
+      "hsl",
+      "hsla",
+      "inherit",
+      "initial",
+      "rgb",
+      "rgba",
+      "transparent",
+      "unset"
+    ]
+  },
   "border-block-end": {
     "isInherited": false,
     "subproperties": [
       "border-block-end-color",
       "border-block-end-style",
       "border-block-end-width"
     ],
     "supports": [
@@ -3906,16 +3928,55 @@ exports.CSS_PROPERTIES = {
       "inherit",
       "initial",
       "medium",
       "thick",
       "thin",
       "unset"
     ]
   },
+  "border-block-style": {
+    "isInherited": false,
+    "subproperties": [
+      "border-block-start-style",
+      "border-block-end-style"
+    ],
+    "supports": [],
+    "values": [
+      "dashed",
+      "dotted",
+      "double",
+      "groove",
+      "hidden",
+      "inherit",
+      "initial",
+      "inset",
+      "none",
+      "outset",
+      "ridge",
+      "solid",
+      "unset"
+    ]
+  },
+  "border-block-width": {
+    "isInherited": false,
+    "subproperties": [
+      "border-block-start-width",
+      "border-block-end-width"
+    ],
+    "supports": [],
+    "values": [
+      "inherit",
+      "initial",
+      "medium",
+      "thick",
+      "thin",
+      "unset"
+    ]
+  },
   "border-bottom": {
     "isInherited": false,
     "subproperties": [
       "border-bottom-color",
       "border-bottom-style",
       "border-bottom-width"
     ],
     "supports": [
@@ -4227,16 +4288,38 @@ exports.CSS_PROPERTIES = {
       "ridge",
       "solid",
       "thick",
       "thin",
       "transparent",
       "unset"
     ]
   },
+  "border-inline-color": {
+    "isInherited": false,
+    "subproperties": [
+      "border-inline-start-color",
+      "border-inline-end-color"
+    ],
+    "supports": [
+      2
+    ],
+    "values": [
+      "COLOR",
+      "currentColor",
+      "hsl",
+      "hsla",
+      "inherit",
+      "initial",
+      "rgb",
+      "rgba",
+      "transparent",
+      "unset"
+    ]
+  },
   "border-inline-end": {
     "isInherited": false,
     "subproperties": [
       "border-inline-end-color",
       "border-inline-end-style",
       "border-inline-end-width"
     ],
     "supports": [
@@ -4415,16 +4498,55 @@ exports.CSS_PROPERTIES = {
       "inherit",
       "initial",
       "medium",
       "thick",
       "thin",
       "unset"
     ]
   },
+  "border-inline-style": {
+    "isInherited": false,
+    "subproperties": [
+      "border-inline-start-style",
+      "border-inline-end-style"
+    ],
+    "supports": [],
+    "values": [
+      "dashed",
+      "dotted",
+      "double",
+      "groove",
+      "hidden",
+      "inherit",
+      "initial",
+      "inset",
+      "none",
+      "outset",
+      "ridge",
+      "solid",
+      "unset"
+    ]
+  },
+  "border-inline-width": {
+    "isInherited": false,
+    "subproperties": [
+      "border-inline-start-width",
+      "border-inline-end-width"
+    ],
+    "supports": [],
+    "values": [
+      "inherit",
+      "initial",
+      "medium",
+      "thick",
+      "thin",
+      "unset"
+    ]
+  },
   "border-left": {
     "isInherited": false,
     "subproperties": [
       "border-left-color",
       "border-left-style",
       "border-left-width"
     ],
     "supports": [
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -1313,37 +1313,72 @@ var gCSSProperties = {
     domProp: "borderInlineEnd",
     inherited: false,
     type: CSS_TYPE_TRUE_SHORTHAND,
     subproperties: [ "border-inline-end-color", "border-inline-end-style", "border-inline-end-width" ],
     initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor" ],
     other_values: [ "solid", "green", "medium solid", "green solid", "10px solid", "thick solid", "5px green none" ],
     invalid_values: [ "5%", "5", "5 green none" ]
   },
+  "border-inline-color": {
+    domProp: "borderInlineColor",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [ "border-inline-start-color", "border-inline-end-color" ],
+    initial_values: [ "currentColor" ],
+    other_values: [ "green", "rgba(255,128,0,0.5) blue", "blue transparent" ],
+    invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "000000" ]
+  },
   "border-inline-end-color": {
     domProp: "borderInlineEndColor",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     applies_to_first_letter: true,
     logical: true,
     initial_values: [ "currentColor" ],
     other_values: [ "green", "rgba(255,128,0,0.5)", "transparent" ],
     invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "000000" ]
   },
+  "border-inline-style": {
+    domProp: "borderInlineStyle",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [ "border-inline-start-style", "border-inline-end-style" ],
+    initial_values: [ "none" ],
+    other_values: [ "solid", "dashed solid", "solid dotted", "double double", "inset outset",
+                    "inset double", "none groove", "ridge none" ],
+    invalid_values: []
+  },
   "border-inline-end-style": {
     domProp: "borderInlineEndStyle",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     applies_to_first_letter: true,
     logical: true,
     /* XXX hidden is sometimes the same as initial */
     initial_values: [ "none" ],
     other_values: [ "solid", "dashed", "dotted", "double", "outset", "inset", "groove", "ridge" ],
     invalid_values: []
   },
+  "border-inline-width": {
+    domProp: "borderInlineWidth",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [ "border-inline-start-width", "border-inline-end-width" ],
+    prerequisites: { "border-style": "solid" },
+    initial_values: [ "medium", "3px", "medium medium" ],
+    other_values: [ "thin", "thick", "1px", "2em",
+      "calc(2px)", "calc(2px) thin",
+      "calc(-2px)", "calc(-2px) thick",
+      "calc(0em)", "medium calc(0em)",
+      "calc(0px)", "1px calc(0px)",
+      "calc(5em)", "1em calc(5em)",
+    ],
+    invalid_values: [ "5%", "5", "5 thin", "thin 5%", "blue", "solid" ]
+  },
   "border-inline-end-width": {
     domProp: "borderInlineEndWidth",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     applies_to_first_letter: true,
     logical: true,
     prerequisites: { "border-inline-end-style": "solid" },
     initial_values: [ "medium", "3px", "calc(4px - 1px)" ],
@@ -6019,25 +6054,16 @@ var gCSSProperties = {
   "text-orientation": {
     domProp: "textOrientation",
     inherited: true,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "mixed" ],
     other_values: [ "upright", "sideways", "sideways-right" ], /* sideways-right alias for backward compatibility */
     invalid_values: [ "none", "3em", "sideways-left" ] /* sideways-left removed from CSS Writing Modes */
   },
-  "border-block-end": {
-    domProp: "borderBlockEnd",
-    inherited: false,
-    type: CSS_TYPE_TRUE_SHORTHAND,
-    subproperties: [ "border-block-end-color", "border-block-end-style", "border-block-end-width" ],
-    initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor" ],
-    other_values: [ "solid", "green", "medium solid", "green solid", "10px solid", "thick solid", "5px green none" ],
-    invalid_values: [ "5%", "5", "5 solid green" ]
-  },
   "block-size": {
     domProp: "blockSize",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     logical: true,
     axis: true,
     /* XXX testing auto has prerequisites */
     initial_values: [ "auto" ],
@@ -6059,37 +6085,81 @@ var gCSSProperties = {
     inherited: false,
     type: CSS_TYPE_TRUE_SHORTHAND,
     subproperties: [ "border-block-start-color", "border-block-start-style", "border-block-start-width",
                      "border-block-end-color", "border-block-end-style", "border-block-end-width" ],
     initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor" ],
     other_values: [ "solid", "green", "medium solid", "green solid", "10px solid", "thick solid", "5px green none" ],
     invalid_values: [ "5%", "5", "5 solid green" ]
   },
+  "border-block-end": {
+    domProp: "borderBlockEnd",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [ "border-block-end-color", "border-block-end-style", "border-block-end-width" ],
+    initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor" ],
+    other_values: [ "solid", "green", "medium solid", "green solid", "10px solid", "thick solid", "5px green none" ],
+    invalid_values: [ "5%", "5", "5 solid green" ]
+  },
+  "border-block-color": {
+    domProp: "borderBlockColor",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [ "border-block-start-color", "border-block-end-color" ],
+    initial_values: [ "currentColor" ],
+    other_values: [ "green", "rgba(255,128,0,0.5) blue", "blue transparent" ],
+    invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "000000" ]
+  },
   "border-block-end-color": {
     domProp: "borderBlockEndColor",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     applies_to_first_letter: true,
     logical: true,
     initial_values: [ "currentColor" ],
     other_values: [ "green", "rgba(255,128,0,0.5)", "transparent" ],
     invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "000000" ]
   },
+  "border-block-style": {
+    domProp: "borderBlockStyle",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [ "border-block-start-style", "border-block-end-style" ],
+    initial_values: [ "none" ],
+    other_values: [ "solid", "dashed solid", "solid dotted", "double double", "inset outset",
+                    "inset double", "none groove", "ridge none" ],
+    invalid_values: []
+  },
   "border-block-end-style": {
     domProp: "borderBlockEndStyle",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     applies_to_first_letter: true,
     logical: true,
     /* XXX hidden is sometimes the same as initial */
     initial_values: [ "none" ],
     other_values: [ "solid", "dashed", "dotted", "double", "outset", "inset", "groove", "ridge" ],
     invalid_values: []
   },
+  "border-block-width": {
+    domProp: "borderBlockWidth",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [ "border-block-start-width", "border-block-end-width" ],
+    prerequisites: { "border-style": "solid" },
+    initial_values: [ "medium", "3px", "medium medium" ],
+    other_values: [ "thin", "thick", "1px", "2em",
+      "calc(2px)", "calc(2px) thin",
+      "calc(-2px)", "calc(-2px) thick",
+      "calc(0em)", "medium calc(0em)",
+      "calc(0px)", "1px calc(0px)",
+      "calc(5em)", "1em calc(5em)",
+    ],
+    invalid_values: [ "5%", "5", "5 thin", "thin 5%", "blue", "solid" ]
+  },
   "border-block-end-width": {
     domProp: "borderBlockEndWidth",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     applies_to_first_letter: true,
     logical: true,
     prerequisites: { "border-block-end-style": "solid" },
     initial_values: [ "medium", "3px", "calc(4px - 1px)" ],
--- a/layout/style/test/test_visited_reftests.html
+++ b/layout/style/test/test_visited_reftests.html
@@ -87,18 +87,17 @@ var gTests = [
   //"== first-line-1.html first-line-1-ref.html",
   "== white-to-transparent-1.html white-to-transparent-1-ref.html",
   "== link-root-1.xhtml link-root-1-ref.xhtml",
   "== mathml-links.html mathml-links-ref.html",
   "== placeholder-1.html placeholder-1-ref.html",
   "== visited-inherit-1.html visited-inherit-1-ref.html",
   "== transition-on-visited.html transition-on-visited-ref.html",
   "== logical-box-border-color-visited-link-001.html logical-box-border-color-visited-link-ref.html",
-  // TODO: test should equal the reference after implementing logical border shorthands.
-  "!= logical-box-border-color-visited-link-002.html logical-box-border-color-visited-link-ref.html",
+  "== logical-box-border-color-visited-link-002.html logical-box-border-color-visited-link-ref.html",
   "== logical-box-border-color-visited-link-003.html logical-box-border-color-visited-link-ref.html",
   "== svg-paint-currentcolor-visited.svg svg-paint-currentcolor-visited-ref.svg",
 ];
 
 // We record the maximum number of times we had to look at a test before
 // it switched to the passing state (though we assume it's 10 to start
 // rather than 0 so that we have a reasonable default).  Then we make a
 // test "time out" if it takes more than gTimeoutFactor times that
--- a/servo/components/style/properties/shorthands/border.mako.rs
+++ b/servo/components/style/properties/shorthands/border.mako.rs
@@ -352,16 +352,60 @@ pub fn parse_border<'i, 't>(
             self.border_image_outset.to_css(dest)?;
             dest.write_str(" ")?;
             self.border_image_repeat.to_css(dest)
         }
     }
 </%helpers:shorthand>
 
 % for axis in ["block", "inline"]:
+    % for prop in ["width", "style", "color"]:
+        <%
+            spec = "https://drafts.csswg.org/css-logical/#propdef-border-%s-%s" % (axis, prop)
+        %>
+        <%helpers:shorthand
+            name="border-${axis}-${prop}"
+            sub_properties="${' '.join(
+                'border-%s-%s-%s' % (axis, side, prop)
+                for side in ['start', 'end']
+            )}"
+            spec="${spec}">
+
+            use crate::properties::longhands::border_${axis}_start_${prop};
+            pub fn parse_value<'i, 't>(
+                context: &ParserContext,
+                input: &mut Parser<'i, 't>,
+            ) -> Result<Longhands, ParseError<'i>> {
+                let start_value = border_${axis}_start_${prop}::parse(context, input)?;
+                let end_value =
+                    input.try(|input| border_${axis}_start_${prop}::parse(context, input)).unwrap_or_else(|_| start_value.clone());
+
+                Ok(expanded! {
+                    border_${axis}_start_${prop}: start_value,
+                    border_${axis}_end_${prop}: end_value,
+                })
+            }
+
+            impl<'a> ToCss for LonghandsToSerialize<'a>  {
+                fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+                    self.border_${axis}_start_${prop}.to_css(dest)?;
+
+                    if self.border_${axis}_end_${prop} != self.border_${axis}_start_${prop} {
+                        dest.write_str(" ")?;
+                        self.border_${axis}_end_${prop}.to_css(dest)?;
+                    }
+
+                    Ok(())
+                }
+            }
+        </%helpers:shorthand>
+    % endfor
+% endfor
+
+% for axis in ["block", "inline"]:
     <%
         spec = "https://drafts.csswg.org/css-logical/#propdef-border-%s" % (axis)
     %>
     <%helpers:shorthand
         name="border-${axis}"
         sub_properties="${' '.join(
             'border-%s-%s-width' % (axis, side)
             for side in ['start', 'end']
--- a/testing/web-platform/meta/css/css-logical/logical-box-border-color.html.ini
+++ b/testing/web-platform/meta/css/css-logical/logical-box-border-color.html.ini
@@ -1,39 +1,9 @@
 [logical-box-border-color.html]
-  [Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '.]
-    expected: FAIL
-
-  [Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '.]
-    expected: FAIL
-
-  [Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '.]
-    expected: FAIL
-
-  [Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '.]
-    expected: FAIL
-
-  [Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '.]
-    expected: FAIL
-
-  [Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '.]
-    expected: FAIL
-
-  [Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '.]
-    expected: FAIL
-
-  [Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '.]
-    expected: FAIL
-
-  [Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '.]
-    expected: FAIL
-
-  [Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '.]
-    expected: FAIL
-
   [Test that border-block-color shorthand sets longhands and serializes correctly.]
     expected: FAIL
 
   [Test that border-inline-color shorthand sets longhands and serializes correctly.]
     expected: FAIL
 
   [Test that border-color shorthand sets longhands and serializes correctly.]
     expected: FAIL
--- a/testing/web-platform/meta/css/css-logical/logical-box-border-style.html.ini
+++ b/testing/web-platform/meta/css/css-logical/logical-box-border-style.html.ini
@@ -1,39 +1,9 @@
 [logical-box-border-style.html]
-  [Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '.]
-    expected: FAIL
-
-  [Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '.]
-    expected: FAIL
-
-  [Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '.]
-    expected: FAIL
-
-  [Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '.]
-    expected: FAIL
-
-  [Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '.]
-    expected: FAIL
-
-  [Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '.]
-    expected: FAIL
-
-  [Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '.]
-    expected: FAIL
-
-  [Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '.]
-    expected: FAIL
-
-  [Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '.]
-    expected: FAIL
-
-  [Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '.]
-    expected: FAIL
-
   [Test that border-inline-style shorthand sets longhands and serializes correctly.]
     expected: FAIL
 
   [Test that border-block-style shorthand sets longhands and serializes correctly.]
     expected: FAIL
 
   [Test that border-style shorthand sets longhands and serializes correctly.]
     expected: FAIL
--- a/testing/web-platform/meta/css/css-logical/logical-box-border-width.html.ini
+++ b/testing/web-platform/meta/css/css-logical/logical-box-border-width.html.ini
@@ -1,39 +1,9 @@
 [logical-box-border-width.html]
-  [Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '.]
-    expected: FAIL
-
-  [Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '.]
-    expected: FAIL
-
-  [Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '.]
-    expected: FAIL
-
-  [Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '.]
-    expected: FAIL
-
-  [Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '.]
-    expected: FAIL
-
-  [Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '.]
-    expected: FAIL
-
-  [Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '.]
-    expected: FAIL
-
-  [Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '.]
-    expected: FAIL
-
-  [Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '.]
-    expected: FAIL
-
-  [Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '.]
-    expected: FAIL
-
   [Test that border-width shorthand sets longhands and serializes correctly.]
     expected: FAIL
 
   [Test that border-block-width shorthand sets longhands and serializes correctly.]
     expected: FAIL
 
   [Test that border-inline-width shorthand sets longhands and serializes correctly.]
     expected: FAIL