Bug 1520236 - [css-logical] Implement the border-{block,inline}-{colo…

…r,style,width} shorthands. r=emilio
iaxat · Jan 17, 2019 · 56dac0e · 56dac0e
1 parent fa29934
commit 56dac0e
Show file tree

Hide file tree

Showing 7 changed files with 246 additions and 101 deletions.
diff --git a/devtools/shared/css/generated/properties-db.js b/devtools/shared/css/generated/properties-db.js
@@ -3723,6 +3723,28 @@ exports.CSS_PROPERTIES = {
       "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": [
@@ -3911,6 +3933,45 @@ exports.CSS_PROPERTIES = {
       "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": [
@@ -4232,6 +4293,28 @@ exports.CSS_PROPERTIES = {
       "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": [
@@ -4420,6 +4503,45 @@ exports.CSS_PROPERTIES = {
       "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": [

diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js
@@ -1318,6 +1318,15 @@ var gCSSProperties = {
     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,
@@ -1328,6 +1337,16 @@ var gCSSProperties = {
     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,
@@ -1339,6 +1358,22 @@ var gCSSProperties = {
     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,
@@ -6024,15 +6059,6 @@ var gCSSProperties = {
     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,
@@ -6064,6 +6090,24 @@ var gCSSProperties = {
     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,
@@ -6074,6 +6118,16 @@ var gCSSProperties = {
     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,
@@ -6085,6 +6139,22 @@ var gCSSProperties = {
     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,

diff --git a/layout/style/test/test_visited_reftests.html b/layout/style/test/test_visited_reftests.html
@@ -92,8 +92,7 @@
   "== 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",
 ];

diff --git a/servo/components/style/properties/shorthands/border.mako.rs b/servo/components/style/properties/shorthands/border.mako.rs
@@ -356,6 +356,50 @@ pub fn parse_border<'i, 't>(
     }
 </%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)

diff --git 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,34 +1,4 @@
 [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