1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-06-10 18:10:56 +09:00

LibWeb/CSS: Parse border-inline-* properties

This doesn't currently honor `writing-mode`, `direction` and
`text-orientation`.
This commit is contained in:
Tim Ledbetter 2025-03-10 22:39:22 +00:00 committed by Sam Atkins
parent 18cccd7633
commit cd1bba353a
Notes: github-actions[bot] 2025-03-14 16:10:16 +00:00
18 changed files with 500 additions and 133 deletions

View file

@ -560,6 +560,78 @@
"hashless-hex-color" "hashless-hex-color"
] ]
}, },
"border-inline-end": {
"inherited": false,
"initial": "medium currentcolor none",
"longhands": [
"border-inline-end-width",
"border-inline-end-style",
"border-inline-end-color"
]
},
"border-inline-end-color": {
"logical-alias-for": [
"border-top-color",
"border-right-color",
"border-bottom-color",
"border-left-color"
],
"max-values": 1
},
"border-inline-end-style": {
"logical-alias-for": [
"border-top-style",
"border-right-style",
"border-bottom-style",
"border-left-style"
],
"max-values": 1
},
"border-inline-end-width": {
"logical-alias-for": [
"border-top-width",
"border-right-width",
"border-bottom-width",
"border-left-width"
],
"max-values": 1
},
"border-inline-start": {
"inherited": false,
"initial": "medium currentcolor none",
"longhands": [
"border-inline-start-width",
"border-inline-start-style",
"border-inline-start-color"
]
},
"border-inline-start-color": {
"logical-alias-for": [
"border-top-color",
"border-right-color",
"border-bottom-color",
"border-left-color"
],
"max-values": 1
},
"border-inline-start-style": {
"logical-alias-for": [
"border-top-style",
"border-right-style",
"border-bottom-style",
"border-left-style"
],
"max-values": 1
},
"border-inline-start-width": {
"logical-alias-for": [
"border-top-width",
"border-right-width",
"border-bottom-width",
"border-left-width"
],
"max-values": 1
},
"border-left": { "border-left": {
"inherited": false, "inherited": false,
"initial": "medium currentcolor none", "initial": "medium currentcolor none",

View file

@ -197,8 +197,8 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
// FIXME: -> border-block-end-color // FIXME: -> border-block-end-color
// FIXME: -> border-block-start-color // FIXME: -> border-block-start-color
// -> border-bottom-color // -> border-bottom-color
// FIXME: -> border-inline-end-color // -> border-inline-end-color
// FIXME: -> border-inline-start-color // -> border-inline-start-color
// -> border-left-color // -> border-left-color
// -> border-right-color // -> border-right-color
// -> border-top-color // -> border-top-color
@ -212,6 +212,12 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
return CSSColorValue::create_from_color(layout_node.computed_values().background_color(), ColorSyntax::Modern); return CSSColorValue::create_from_color(layout_node.computed_values().background_color(), ColorSyntax::Modern);
case PropertyID::BorderBottomColor: case PropertyID::BorderBottomColor:
return CSSColorValue::create_from_color(layout_node.computed_values().border_bottom().color, ColorSyntax::Modern); return CSSColorValue::create_from_color(layout_node.computed_values().border_bottom().color, ColorSyntax::Modern);
case PropertyID::BorderInlineEndColor:
// FIXME: Honor writing-mode, direction and text-orientation.
return style_value_for_property(layout_node, PropertyID::BorderRightColor);
case PropertyID::BorderInlineStartColor:
// FIXME: Honor writing-mode, direction and text-orientation.
return style_value_for_property(layout_node, PropertyID::BorderLeftColor);
case PropertyID::BorderLeftColor: case PropertyID::BorderLeftColor:
return CSSColorValue::create_from_color(layout_node.computed_values().border_left().color, ColorSyntax::Modern); return CSSColorValue::create_from_color(layout_node.computed_values().border_left().color, ColorSyntax::Modern);
case PropertyID::BorderRightColor: case PropertyID::BorderRightColor:

View file

@ -600,6 +600,18 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
switch (property_id) { switch (property_id) {
case PropertyID::BlockSize: case PropertyID::BlockSize:
return PropertyID::Height; return PropertyID::Height;
case PropertyID::BorderInlineStartColor:
return PropertyID::BorderLeftColor;
case PropertyID::BorderInlineStartStyle:
return PropertyID::BorderLeftStyle;
case PropertyID::BorderInlineStartWidth:
return PropertyID::BorderLeftWidth;
case PropertyID::BorderInlineEndColor:
return PropertyID::BorderRightColor;
case PropertyID::BorderInlineEndStyle:
return PropertyID::BorderRightStyle;
case PropertyID::BorderInlineEndWidth:
return PropertyID::BorderRightWidth;
case PropertyID::MarginBlockStart: case PropertyID::MarginBlockStart:
return PropertyID::MarginTop; return PropertyID::MarginTop;
case PropertyID::MarginBlockEnd: case PropertyID::MarginBlockEnd:

View file

@ -1,6 +1,6 @@
All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle: All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
'cssText': '' 'cssText': ''
'length': '220' 'length': '226'
'parentRule': 'null' 'parentRule': 'null'
'cssFloat': 'none' 'cssFloat': 'none'
'WebkitAlignContent': 'normal' 'WebkitAlignContent': 'normal'
@ -202,6 +202,22 @@ All supported properties and their default values exposed from CSSStyleDeclarati
'border-collapse': 'separate' 'border-collapse': 'separate'
'borderColor': 'rgb(0, 0, 0)' 'borderColor': 'rgb(0, 0, 0)'
'border-color': 'rgb(0, 0, 0)' 'border-color': 'rgb(0, 0, 0)'
'borderInlineEnd': 'medium none rgb(0, 0, 0)'
'border-inline-end': 'medium none rgb(0, 0, 0)'
'borderInlineEndColor': 'rgb(0, 0, 0)'
'border-inline-end-color': 'rgb(0, 0, 0)'
'borderInlineEndStyle': 'none'
'border-inline-end-style': 'none'
'borderInlineEndWidth': 'medium'
'border-inline-end-width': 'medium'
'borderInlineStart': 'medium none rgb(0, 0, 0)'
'border-inline-start': 'medium none rgb(0, 0, 0)'
'borderInlineStartColor': 'rgb(0, 0, 0)'
'border-inline-start-color': 'rgb(0, 0, 0)'
'borderInlineStartStyle': 'none'
'border-inline-start-style': 'none'
'borderInlineStartWidth': 'medium'
'border-inline-start-width': 'medium'
'borderLeft': 'medium none rgb(0, 0, 0)' 'borderLeft': 'medium none rgb(0, 0, 0)'
'border-left': 'medium none rgb(0, 0, 0)' 'border-left': 'medium none rgb(0, 0, 0)'
'borderLeftColor': 'rgb(0, 0, 0)' 'borderLeftColor': 'rgb(0, 0, 0)'

View file

@ -91,135 +91,141 @@ All properties associated with getComputedStyle(document.body):
"88": "border-bottom-right-radius", "88": "border-bottom-right-radius",
"89": "border-bottom-style", "89": "border-bottom-style",
"90": "border-bottom-width", "90": "border-bottom-width",
"91": "border-left-color", "91": "border-inline-end-color",
"92": "border-left-style", "92": "border-inline-end-style",
"93": "border-left-width", "93": "border-inline-end-width",
"94": "border-right-color", "94": "border-inline-start-color",
"95": "border-right-style", "95": "border-inline-start-style",
"96": "border-right-width", "96": "border-inline-start-width",
"97": "border-top-color", "97": "border-left-color",
"98": "border-top-left-radius", "98": "border-left-style",
"99": "border-top-right-radius", "99": "border-left-width",
"100": "border-top-style", "100": "border-right-color",
"101": "border-top-width", "101": "border-right-style",
"102": "bottom", "102": "border-right-width",
"103": "box-shadow", "103": "border-top-color",
"104": "box-sizing", "104": "border-top-left-radius",
"105": "clear", "105": "border-top-right-radius",
"106": "clip", "106": "border-top-style",
"107": "clip-path", "107": "border-top-width",
"108": "column-count", "108": "bottom",
"109": "column-gap", "109": "box-shadow",
"110": "column-span", "110": "box-sizing",
"111": "column-width", "111": "clear",
"112": "contain", "112": "clip",
"113": "content", "113": "clip-path",
"114": "content-visibility", "114": "column-count",
"115": "counter-increment", "115": "column-gap",
"116": "counter-reset", "116": "column-span",
"117": "counter-set", "117": "column-width",
"118": "cx", "118": "contain",
"119": "cy", "119": "content",
"120": "display", "120": "content-visibility",
"121": "filter", "121": "counter-increment",
"122": "flex-basis", "122": "counter-reset",
"123": "flex-direction", "123": "counter-set",
"124": "flex-grow", "124": "cx",
"125": "flex-shrink", "125": "cy",
"126": "flex-wrap", "126": "display",
"127": "float", "127": "filter",
"128": "grid-auto-columns", "128": "flex-basis",
"129": "grid-auto-flow", "129": "flex-direction",
"130": "grid-auto-rows", "130": "flex-grow",
"131": "grid-column-end", "131": "flex-shrink",
"132": "grid-column-start", "132": "flex-wrap",
"133": "grid-row-end", "133": "float",
"134": "grid-row-start", "134": "grid-auto-columns",
"135": "grid-template-areas", "135": "grid-auto-flow",
"136": "grid-template-columns", "136": "grid-auto-rows",
"137": "grid-template-rows", "137": "grid-column-end",
"138": "height", "138": "grid-column-start",
"139": "inline-size", "139": "grid-row-end",
"140": "inset-block-end", "140": "grid-row-start",
"141": "inset-block-start", "141": "grid-template-areas",
"142": "inset-inline-end", "142": "grid-template-columns",
"143": "inset-inline-start", "143": "grid-template-rows",
"144": "isolation", "144": "height",
"145": "justify-content", "145": "inline-size",
"146": "justify-items", "146": "inset-block-end",
"147": "justify-self", "147": "inset-block-start",
"148": "left", "148": "inset-inline-end",
"149": "margin-block-end", "149": "inset-inline-start",
"150": "margin-block-start", "150": "isolation",
"151": "margin-bottom", "151": "justify-content",
"152": "margin-inline-end", "152": "justify-items",
"153": "margin-inline-start", "153": "justify-self",
"154": "margin-left", "154": "left",
"155": "margin-right", "155": "margin-block-end",
"156": "margin-top", "156": "margin-block-start",
"157": "mask-image", "157": "margin-bottom",
"158": "mask-type", "158": "margin-inline-end",
"159": "max-block-size", "159": "margin-inline-start",
"160": "max-height", "160": "margin-left",
"161": "max-inline-size", "161": "margin-right",
"162": "max-width", "162": "margin-top",
"163": "min-block-size", "163": "mask-image",
"164": "min-height", "164": "mask-type",
"165": "min-inline-size", "165": "max-block-size",
"166": "min-width", "166": "max-height",
"167": "mix-blend-mode", "167": "max-inline-size",
"168": "object-fit", "168": "max-width",
"169": "object-position", "169": "min-block-size",
"170": "opacity", "170": "min-height",
"171": "order", "171": "min-inline-size",
"172": "outline-color", "172": "min-width",
"173": "outline-offset", "173": "mix-blend-mode",
"174": "outline-style", "174": "object-fit",
"175": "outline-width", "175": "object-position",
"176": "overflow-x", "176": "opacity",
"177": "overflow-y", "177": "order",
"178": "padding-block-end", "178": "outline-color",
"179": "padding-block-start", "179": "outline-offset",
"180": "padding-bottom", "180": "outline-style",
"181": "padding-inline-end", "181": "outline-width",
"182": "padding-inline-start", "182": "overflow-x",
"183": "padding-left", "183": "overflow-y",
"184": "padding-right", "184": "padding-block-end",
"185": "padding-top", "185": "padding-block-start",
"186": "position", "186": "padding-bottom",
"187": "r", "187": "padding-inline-end",
"188": "right", "188": "padding-inline-start",
"189": "rotate", "189": "padding-left",
"190": "row-gap", "190": "padding-right",
"191": "rx", "191": "padding-top",
"192": "ry", "192": "position",
"193": "scale", "193": "r",
"194": "scrollbar-gutter", "194": "right",
"195": "scrollbar-width", "195": "rotate",
"196": "stop-color", "196": "row-gap",
"197": "stop-opacity", "197": "rx",
"198": "table-layout", "198": "ry",
"199": "text-decoration-color", "199": "scale",
"200": "text-decoration-style", "200": "scrollbar-gutter",
"201": "text-decoration-thickness", "201": "scrollbar-width",
"202": "text-overflow", "202": "stop-color",
"203": "top", "203": "stop-opacity",
"204": "transform", "204": "table-layout",
"205": "transform-box", "205": "text-decoration-color",
"206": "transform-origin", "206": "text-decoration-style",
"207": "transition-delay", "207": "text-decoration-thickness",
"208": "transition-duration", "208": "text-overflow",
"209": "transition-property", "209": "top",
"210": "transition-timing-function", "210": "transform",
"211": "translate", "211": "transform-box",
"212": "unicode-bidi", "212": "transform-origin",
"213": "user-select", "213": "transition-delay",
"214": "vertical-align", "214": "transition-duration",
"215": "view-transition-name", "215": "transition-property",
"216": "width", "216": "transition-timing-function",
"217": "x", "217": "translate",
"218": "y", "218": "unicode-bidi",
"219": "z-index" "219": "user-select",
"220": "vertical-align",
"221": "view-transition-name",
"222": "width",
"223": "x",
"224": "y",
"225": "z-index"
} }
All properties associated with document.body.style by default: All properties associated with document.body.style by default:
{} {}

View file

@ -89,6 +89,12 @@ border-bottom-left-radius: 0px
border-bottom-right-radius: 0px border-bottom-right-radius: 0px
border-bottom-style: none border-bottom-style: none
border-bottom-width: medium border-bottom-width: medium
border-inline-end-color: rgb(0, 0, 0)
border-inline-end-style: none
border-inline-end-width: medium
border-inline-start-color: rgb(0, 0, 0)
border-inline-start-style: none
border-inline-start-width: medium
border-left-color: rgb(0, 0, 0) border-left-color: rgb(0, 0, 0)
border-left-style: none border-left-style: none
border-left-width: medium border-left-width: medium
@ -136,7 +142,7 @@ grid-row-start: auto
grid-template-areas: none grid-template-areas: none
grid-template-columns: auto grid-template-columns: auto
grid-template-rows: auto grid-template-rows: auto
height: 1932px height: 2016px
inline-size: 784px inline-size: 784px
inset-block-end: auto inset-block-end: auto
inset-block-start: auto inset-block-start: auto

View file

@ -0,0 +1,20 @@
Harness status: OK
Found 15 tests
15 Pass
Pass e.style['border-inline-start-color'] = "#12" should not set the property value
Pass e.style['border-inline-start-color'] = "auto" should not set the property value
Pass e.style['border-inline-start-color'] = "red green" should not set the property value
Pass e.style['border-inline-start-color'] = "rgb" should not set the property value
Pass e.style['border-inline-start-color'] = "rgb(1,2,3,4,5)" should not set the property value
Pass e.style['border-inline-start-color'] = "rgb(10%, 20, 30%)" should not set the property value
Pass e.style['border-inline-end-color'] = "#123456789" should not set the property value
Pass e.style['border-inline-end-color'] = "123" should not set the property value
Pass e.style['border-inline-end-color'] = "hsla(1,2,3,4,5)" should not set the property value
Pass e.style['border-inline-end-color'] = "red, green" should not set the property value
Pass e.style['border-inline-end-color'] = "rgb(1)" should not set the property value
Pass e.style['border-inline-end-color'] = "rgba(-2, 300, 400%, -0.5)" should not set the property value
Pass e.style['border-inline-color'] = "auto" should not set the property value
Pass e.style['border-inline-color'] = "lime, transparent" should not set the property value
Pass e.style['border-inline-color'] = "red green blue" should not set the property value

View file

@ -0,0 +1,13 @@
Harness status: OK
Found 7 tests
4 Pass
3 Fail
Pass e.style['border-inline-start-color'] = "currentcolor" should set the property value
Pass e.style['border-inline-start-color'] = "rgb(2, 3, 4)" should set the property value
Pass e.style['border-inline-end-color'] = "#234" should set the property value
Pass e.style['border-inline-end-color'] = "transparent" should set the property value
Fail e.style['border-inline-color'] = "#234" should set the property value
Fail e.style['border-inline-color'] = "transparent rgb(2, 3, 4)" should set the property value
Fail e.style['border-inline-color'] = "rgb(2, 3, 4) rgb(2, 3, 4)" should set the property value

View file

@ -0,0 +1,11 @@
Harness status: OK
Found 6 tests
6 Pass
Pass e.style['border-inline-start-style'] = "auto" should not set the property value
Pass e.style['border-inline-start-style'] = "hidden, outset" should not set the property value
Pass e.style['border-inline-end-style'] = "solid double" should not set the property value
Pass e.style['border-inline-style'] = "auto" should not set the property value
Pass e.style['border-inline-style'] = "groove, ridge" should not set the property value
Pass e.style['border-inline-style'] = "hidden inset dashed" should not set the property value

View file

@ -0,0 +1,19 @@
Harness status: OK
Found 13 tests
10 Pass
3 Fail
Pass e.style['border-inline-start-style'] = "dotted" should set the property value
Pass e.style['border-inline-start-style'] = "groove" should set the property value
Pass e.style['border-inline-start-style'] = "inset" should set the property value
Pass e.style['border-inline-start-style'] = "none" should set the property value
Pass e.style['border-inline-start-style'] = "solid" should set the property value
Pass e.style['border-inline-end-style'] = "dashed" should set the property value
Pass e.style['border-inline-end-style'] = "double" should set the property value
Pass e.style['border-inline-end-style'] = "hidden" should set the property value
Pass e.style['border-inline-end-style'] = "outset" should set the property value
Pass e.style['border-inline-end-style'] = "ridge" should set the property value
Fail e.style['border-inline-style'] = "dotted" should set the property value
Fail e.style['border-inline-style'] = "double groove" should set the property value
Fail e.style['border-inline-style'] = "hidden hidden" should set the property value

View file

@ -0,0 +1,12 @@
Harness status: OK
Found 7 tests
7 Pass
Pass e.style['border-inline-start-width'] = "-20px" should not set the property value
Pass e.style['border-inline-start-width'] = "auto" should not set the property value
Pass e.style['border-inline-start-width'] = "medium 40px" should not set the property value
Pass e.style['border-inline-end-width'] = "10" should not set the property value
Pass e.style['border-inline-end-width'] = "30%" should not set the property value
Pass e.style['border-inline-width'] = "thick, thin" should not set the property value
Pass e.style['border-inline-width'] = "10px 20px 30px" should not set the property value

View file

@ -0,0 +1,16 @@
Harness status: OK
Found 10 tests
7 Pass
3 Fail
Pass e.style['border-inline-start-width'] = "10px" should set the property value
Pass e.style['border-inline-start-width'] = "calc(10px + 0.5em)" should set the property value
Pass e.style['border-inline-start-width'] = "thick" should set the property value
Pass e.style['border-inline-start-width'] = "thin" should set the property value
Pass e.style['border-inline-end-width'] = "0" should set the property value
Pass e.style['border-inline-end-width'] = "calc(10px - 0.5em)" should set the property value
Pass e.style['border-inline-end-width'] = "medium" should set the property value
Fail e.style['border-inline-width'] = "10px" should set the property value
Fail e.style['border-inline-width'] = "medium calc(10px + 0.5em)" should set the property value
Fail e.style['border-inline-width'] = "10px 10px" should set the property value

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Logical Properties and Values: parsing border-inline-color with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-color">
<meta name="assert" content="border-inline-color supports only the grammar '<color>{1,2}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("border-inline-start-color", "#12");
test_invalid_value("border-inline-start-color", "auto");
test_invalid_value("border-inline-start-color", "red green");
test_invalid_value("border-inline-start-color", "rgb");
test_invalid_value("border-inline-start-color", "rgb(1,2,3,4,5)");
test_invalid_value("border-inline-start-color", "rgb(10%, 20, 30%)");
test_invalid_value("border-inline-end-color", "#123456789");
test_invalid_value("border-inline-end-color", "123");
test_invalid_value("border-inline-end-color", "hsla(1,2,3,4,5)");
test_invalid_value("border-inline-end-color", "red, green");
test_invalid_value("border-inline-end-color", "rgb(1)");
test_invalid_value("border-inline-end-color", "rgba(-2, 300, 400%, -0.5)");
test_invalid_value("border-inline-color", "auto");
test_invalid_value("border-inline-color", "lime, transparent");
test_invalid_value("border-inline-color", "red green blue");
</script>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Logical Properties and Values: parsing border-inline-color with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-color">
<meta name="assert" content="border-inline-color supports the full grammar '<color>{1,2}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("border-inline-start-color", "currentcolor");
test_valid_value("border-inline-start-color", "rgb(2, 3, 4)");
test_valid_value("border-inline-end-color", "#234", "rgb(34, 51, 68)");
test_valid_value("border-inline-end-color", "transparent");
test_valid_value("border-inline-color", "#234", "rgb(34, 51, 68)");
test_valid_value("border-inline-color", "transparent rgb(2, 3, 4)");
test_valid_value("border-inline-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)");
</script>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Logical Properties and Values: parsing border-inline-style with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-style">
<meta name="assert" content="border-inline-style supports only the grammar '<line-style>{1,2}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("border-inline-start-style", "auto");
test_invalid_value("border-inline-start-style", "hidden, outset");
test_invalid_value("border-inline-end-style", "solid double");
test_invalid_value("border-inline-style", "auto");
test_invalid_value("border-inline-style", "groove, ridge");
test_invalid_value("border-inline-style", "hidden inset dashed");
</script>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Logical Properties and Values: parsing border-inline-style with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block">
<meta name="assert" content="border-inline-style supports the full grammar '<line-style>{1,2}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
test_valid_value("border-inline-start-style", "dotted");
test_valid_value("border-inline-start-style", "groove");
test_valid_value("border-inline-start-style", "inset");
test_valid_value("border-inline-start-style", "none");
test_valid_value("border-inline-start-style", "solid");
test_valid_value("border-inline-end-style", "dashed");
test_valid_value("border-inline-end-style", "double");
test_valid_value("border-inline-end-style", "hidden");
test_valid_value("border-inline-end-style", "outset");
test_valid_value("border-inline-end-style", "ridge");
test_valid_value("border-inline-style", "dotted");
test_valid_value("border-inline-style", "double groove");
test_valid_value("border-inline-style", "hidden hidden", "hidden");
</script>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Logical Properties and Values: parsing border-inline-width with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-width">
<meta name="assert" content="border-inline-width supports only the grammar '<line-width>{1,2}'.">
<meta name="assert" content="Negative lengths are not allowed.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("border-inline-start-width", "-20px");
test_invalid_value("border-inline-start-width", "auto");
test_invalid_value("border-inline-start-width", "medium 40px");
test_invalid_value("border-inline-end-width", "10");
test_invalid_value("border-inline-end-width", "30%");
test_invalid_value("border-inline-width", "thick, thin");
test_invalid_value("border-inline-width", "10px 20px 30px");
</script>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Logical Properties and Values: parsing border-inline-width with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-width">
<meta name="assert" content="border-inline-width supports the full grammar '<line-width>{1,2}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// <length> | thin | medium | thick
test_valid_value("border-inline-start-width", "10px");
test_valid_value("border-inline-start-width", "calc(10px + 0.5em)", "calc(0.5em + 10px)");
test_valid_value("border-inline-start-width", "thick");
test_valid_value("border-inline-start-width", "thin");
test_valid_value("border-inline-end-width", "0", "0px");
test_valid_value("border-inline-end-width", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
test_valid_value("border-inline-end-width", "medium");
test_valid_value("border-inline-width", "10px");
test_valid_value("border-inline-width", "medium calc(10px + 0.5em)", "medium calc(0.5em + 10px)");
test_valid_value("border-inline-width", "10px 10px", "10px");
</script>
</body>
</html>