From 56dac0ed79c66116d3d0fa8e14613bedbcb16045 Mon Sep 17 00:00:00 2001 From: Mats Palmgren Date: Thu, 17 Jan 2019 20:02:41 +0100 Subject: [PATCH] Bug 1520236 - [css-logical] Implement the border-{block,inline}-{color,style,width} shorthands. r=emilio --- .../shared/css/generated/properties-db.js | 122 ++++++++++++++++++ layout/style/test/property_database.js | 88 +++++++++++-- layout/style/test/test_visited_reftests.html | 3 +- .../properties/shorthands/border.mako.rs | 44 +++++++ .../logical-box-border-color.html.ini | 30 ----- .../logical-box-border-style.html.ini | 30 ----- .../logical-box-border-width.html.ini | 30 ----- 7 files changed, 246 insertions(+), 101 deletions(-) diff --git a/devtools/shared/css/generated/properties-db.js b/devtools/shared/css/generated/properties-db.js index e1cd0a207bf05..c63167b6ce80c 100644 --- 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 index e6c30dd5b2586..8a9dc66c94545 100644 --- 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 index ae9878e03c8c0..001655b3fe920 100644 --- 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 index 9495608239c60..255464892a4f0 100644 --- 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>( } +% 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> { + 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(&self, dest: &mut CssWriter) -> 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(()) + } + } + + % 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 index 5fb532add3569..3a6b37cd1d5d7 100644 --- 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 diff --git 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 index a1b44462c6928..18fe587fc7cad 100644 --- 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,34 +1,4 @@ [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 diff --git 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 index debce7b627c2d..0de11ffa145da 100644 --- 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,34 +1,4 @@ [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