mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-04-20 19:45:12 +00: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: https://github.com/LadybirdBrowser/ladybird/commit/cd1bba353ad 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"
|
||||
]
|
||||
},
|
||||
"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": {
|
||||
"inherited": false,
|
||||
"initial": "medium currentcolor none",
|
||||
|
|
|
|||
|
|
@ -197,8 +197,8 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
|
|||
// FIXME: -> border-block-end-color
|
||||
// FIXME: -> border-block-start-color
|
||||
// -> border-bottom-color
|
||||
// FIXME: -> border-inline-end-color
|
||||
// FIXME: -> border-inline-start-color
|
||||
// -> border-inline-end-color
|
||||
// -> border-inline-start-color
|
||||
// -> border-left-color
|
||||
// -> border-right-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);
|
||||
case PropertyID::BorderBottomColor:
|
||||
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:
|
||||
return CSSColorValue::create_from_color(layout_node.computed_values().border_left().color, ColorSyntax::Modern);
|
||||
case PropertyID::BorderRightColor:
|
||||
|
|
|
|||
|
|
@ -600,6 +600,18 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
|
|||
switch (property_id) {
|
||||
case PropertyID::BlockSize:
|
||||
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:
|
||||
return PropertyID::MarginTop;
|
||||
case PropertyID::MarginBlockEnd:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
|
||||
'cssText': ''
|
||||
'length': '220'
|
||||
'length': '226'
|
||||
'parentRule': 'null'
|
||||
'cssFloat': 'none'
|
||||
'WebkitAlignContent': 'normal'
|
||||
|
|
@ -202,6 +202,22 @@ All supported properties and their default values exposed from CSSStyleDeclarati
|
|||
'border-collapse': 'separate'
|
||||
'borderColor': '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)'
|
||||
'border-left': 'medium none 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",
|
||||
"89": "border-bottom-style",
|
||||
"90": "border-bottom-width",
|
||||
"91": "border-left-color",
|
||||
"92": "border-left-style",
|
||||
"93": "border-left-width",
|
||||
"94": "border-right-color",
|
||||
"95": "border-right-style",
|
||||
"96": "border-right-width",
|
||||
"97": "border-top-color",
|
||||
"98": "border-top-left-radius",
|
||||
"99": "border-top-right-radius",
|
||||
"100": "border-top-style",
|
||||
"101": "border-top-width",
|
||||
"102": "bottom",
|
||||
"103": "box-shadow",
|
||||
"104": "box-sizing",
|
||||
"105": "clear",
|
||||
"106": "clip",
|
||||
"107": "clip-path",
|
||||
"108": "column-count",
|
||||
"109": "column-gap",
|
||||
"110": "column-span",
|
||||
"111": "column-width",
|
||||
"112": "contain",
|
||||
"113": "content",
|
||||
"114": "content-visibility",
|
||||
"115": "counter-increment",
|
||||
"116": "counter-reset",
|
||||
"117": "counter-set",
|
||||
"118": "cx",
|
||||
"119": "cy",
|
||||
"120": "display",
|
||||
"121": "filter",
|
||||
"122": "flex-basis",
|
||||
"123": "flex-direction",
|
||||
"124": "flex-grow",
|
||||
"125": "flex-shrink",
|
||||
"126": "flex-wrap",
|
||||
"127": "float",
|
||||
"128": "grid-auto-columns",
|
||||
"129": "grid-auto-flow",
|
||||
"130": "grid-auto-rows",
|
||||
"131": "grid-column-end",
|
||||
"132": "grid-column-start",
|
||||
"133": "grid-row-end",
|
||||
"134": "grid-row-start",
|
||||
"135": "grid-template-areas",
|
||||
"136": "grid-template-columns",
|
||||
"137": "grid-template-rows",
|
||||
"138": "height",
|
||||
"139": "inline-size",
|
||||
"140": "inset-block-end",
|
||||
"141": "inset-block-start",
|
||||
"142": "inset-inline-end",
|
||||
"143": "inset-inline-start",
|
||||
"144": "isolation",
|
||||
"145": "justify-content",
|
||||
"146": "justify-items",
|
||||
"147": "justify-self",
|
||||
"148": "left",
|
||||
"149": "margin-block-end",
|
||||
"150": "margin-block-start",
|
||||
"151": "margin-bottom",
|
||||
"152": "margin-inline-end",
|
||||
"153": "margin-inline-start",
|
||||
"154": "margin-left",
|
||||
"155": "margin-right",
|
||||
"156": "margin-top",
|
||||
"157": "mask-image",
|
||||
"158": "mask-type",
|
||||
"159": "max-block-size",
|
||||
"160": "max-height",
|
||||
"161": "max-inline-size",
|
||||
"162": "max-width",
|
||||
"163": "min-block-size",
|
||||
"164": "min-height",
|
||||
"165": "min-inline-size",
|
||||
"166": "min-width",
|
||||
"167": "mix-blend-mode",
|
||||
"168": "object-fit",
|
||||
"169": "object-position",
|
||||
"170": "opacity",
|
||||
"171": "order",
|
||||
"172": "outline-color",
|
||||
"173": "outline-offset",
|
||||
"174": "outline-style",
|
||||
"175": "outline-width",
|
||||
"176": "overflow-x",
|
||||
"177": "overflow-y",
|
||||
"178": "padding-block-end",
|
||||
"179": "padding-block-start",
|
||||
"180": "padding-bottom",
|
||||
"181": "padding-inline-end",
|
||||
"182": "padding-inline-start",
|
||||
"183": "padding-left",
|
||||
"184": "padding-right",
|
||||
"185": "padding-top",
|
||||
"186": "position",
|
||||
"187": "r",
|
||||
"188": "right",
|
||||
"189": "rotate",
|
||||
"190": "row-gap",
|
||||
"191": "rx",
|
||||
"192": "ry",
|
||||
"193": "scale",
|
||||
"194": "scrollbar-gutter",
|
||||
"195": "scrollbar-width",
|
||||
"196": "stop-color",
|
||||
"197": "stop-opacity",
|
||||
"198": "table-layout",
|
||||
"199": "text-decoration-color",
|
||||
"200": "text-decoration-style",
|
||||
"201": "text-decoration-thickness",
|
||||
"202": "text-overflow",
|
||||
"203": "top",
|
||||
"204": "transform",
|
||||
"205": "transform-box",
|
||||
"206": "transform-origin",
|
||||
"207": "transition-delay",
|
||||
"208": "transition-duration",
|
||||
"209": "transition-property",
|
||||
"210": "transition-timing-function",
|
||||
"211": "translate",
|
||||
"212": "unicode-bidi",
|
||||
"213": "user-select",
|
||||
"214": "vertical-align",
|
||||
"215": "view-transition-name",
|
||||
"216": "width",
|
||||
"217": "x",
|
||||
"218": "y",
|
||||
"219": "z-index"
|
||||
"91": "border-inline-end-color",
|
||||
"92": "border-inline-end-style",
|
||||
"93": "border-inline-end-width",
|
||||
"94": "border-inline-start-color",
|
||||
"95": "border-inline-start-style",
|
||||
"96": "border-inline-start-width",
|
||||
"97": "border-left-color",
|
||||
"98": "border-left-style",
|
||||
"99": "border-left-width",
|
||||
"100": "border-right-color",
|
||||
"101": "border-right-style",
|
||||
"102": "border-right-width",
|
||||
"103": "border-top-color",
|
||||
"104": "border-top-left-radius",
|
||||
"105": "border-top-right-radius",
|
||||
"106": "border-top-style",
|
||||
"107": "border-top-width",
|
||||
"108": "bottom",
|
||||
"109": "box-shadow",
|
||||
"110": "box-sizing",
|
||||
"111": "clear",
|
||||
"112": "clip",
|
||||
"113": "clip-path",
|
||||
"114": "column-count",
|
||||
"115": "column-gap",
|
||||
"116": "column-span",
|
||||
"117": "column-width",
|
||||
"118": "contain",
|
||||
"119": "content",
|
||||
"120": "content-visibility",
|
||||
"121": "counter-increment",
|
||||
"122": "counter-reset",
|
||||
"123": "counter-set",
|
||||
"124": "cx",
|
||||
"125": "cy",
|
||||
"126": "display",
|
||||
"127": "filter",
|
||||
"128": "flex-basis",
|
||||
"129": "flex-direction",
|
||||
"130": "flex-grow",
|
||||
"131": "flex-shrink",
|
||||
"132": "flex-wrap",
|
||||
"133": "float",
|
||||
"134": "grid-auto-columns",
|
||||
"135": "grid-auto-flow",
|
||||
"136": "grid-auto-rows",
|
||||
"137": "grid-column-end",
|
||||
"138": "grid-column-start",
|
||||
"139": "grid-row-end",
|
||||
"140": "grid-row-start",
|
||||
"141": "grid-template-areas",
|
||||
"142": "grid-template-columns",
|
||||
"143": "grid-template-rows",
|
||||
"144": "height",
|
||||
"145": "inline-size",
|
||||
"146": "inset-block-end",
|
||||
"147": "inset-block-start",
|
||||
"148": "inset-inline-end",
|
||||
"149": "inset-inline-start",
|
||||
"150": "isolation",
|
||||
"151": "justify-content",
|
||||
"152": "justify-items",
|
||||
"153": "justify-self",
|
||||
"154": "left",
|
||||
"155": "margin-block-end",
|
||||
"156": "margin-block-start",
|
||||
"157": "margin-bottom",
|
||||
"158": "margin-inline-end",
|
||||
"159": "margin-inline-start",
|
||||
"160": "margin-left",
|
||||
"161": "margin-right",
|
||||
"162": "margin-top",
|
||||
"163": "mask-image",
|
||||
"164": "mask-type",
|
||||
"165": "max-block-size",
|
||||
"166": "max-height",
|
||||
"167": "max-inline-size",
|
||||
"168": "max-width",
|
||||
"169": "min-block-size",
|
||||
"170": "min-height",
|
||||
"171": "min-inline-size",
|
||||
"172": "min-width",
|
||||
"173": "mix-blend-mode",
|
||||
"174": "object-fit",
|
||||
"175": "object-position",
|
||||
"176": "opacity",
|
||||
"177": "order",
|
||||
"178": "outline-color",
|
||||
"179": "outline-offset",
|
||||
"180": "outline-style",
|
||||
"181": "outline-width",
|
||||
"182": "overflow-x",
|
||||
"183": "overflow-y",
|
||||
"184": "padding-block-end",
|
||||
"185": "padding-block-start",
|
||||
"186": "padding-bottom",
|
||||
"187": "padding-inline-end",
|
||||
"188": "padding-inline-start",
|
||||
"189": "padding-left",
|
||||
"190": "padding-right",
|
||||
"191": "padding-top",
|
||||
"192": "position",
|
||||
"193": "r",
|
||||
"194": "right",
|
||||
"195": "rotate",
|
||||
"196": "row-gap",
|
||||
"197": "rx",
|
||||
"198": "ry",
|
||||
"199": "scale",
|
||||
"200": "scrollbar-gutter",
|
||||
"201": "scrollbar-width",
|
||||
"202": "stop-color",
|
||||
"203": "stop-opacity",
|
||||
"204": "table-layout",
|
||||
"205": "text-decoration-color",
|
||||
"206": "text-decoration-style",
|
||||
"207": "text-decoration-thickness",
|
||||
"208": "text-overflow",
|
||||
"209": "top",
|
||||
"210": "transform",
|
||||
"211": "transform-box",
|
||||
"212": "transform-origin",
|
||||
"213": "transition-delay",
|
||||
"214": "transition-duration",
|
||||
"215": "transition-property",
|
||||
"216": "transition-timing-function",
|
||||
"217": "translate",
|
||||
"218": "unicode-bidi",
|
||||
"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:
|
||||
{}
|
||||
|
|
|
|||
|
|
@ -89,6 +89,12 @@ border-bottom-left-radius: 0px
|
|||
border-bottom-right-radius: 0px
|
||||
border-bottom-style: none
|
||||
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-style: none
|
||||
border-left-width: medium
|
||||
|
|
@ -136,7 +142,7 @@ grid-row-start: auto
|
|||
grid-template-areas: none
|
||||
grid-template-columns: auto
|
||||
grid-template-rows: auto
|
||||
height: 1932px
|
||||
height: 2016px
|
||||
inline-size: 784px
|
||||
inset-block-end: 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
Reference in a new issue