mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-06-11 18:20:43 +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
Sam Atkins
parent
18cccd7633
commit
cd1bba353a
Notes:
github-actions[bot]
2025-03-14 16:10:16 +00:00
Author: https://github.com/tcl3
Commit: cd1bba353a
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3899
Reviewed-by: https://github.com/AtkinsSJ ✅
18 changed files with 500 additions and 133 deletions
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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:
|
||||||
|
|
|
||||||
|
|
@ -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:
|
||||||
|
|
|
||||||
|
|
@ -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)'
|
||||||
|
|
|
||||||
|
|
@ -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:
|
||||||
{}
|
{}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue