mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-04-22 12:35:14 +00:00
LibWeb/CSS: Parse border-block-* properties
This doesn't currently honor `writing-mode`, `direction` and `text-orientation`.
This commit is contained in:
Tim Ledbetter
Sam Atkins
parent
cd1bba353a
commit
e011ddd368
Notes:
github-actions[bot]
2025-03-14 16:10:08 +00:00
Author: https://github.com/tcl3 Commit: https://github.com/LadybirdBrowser/ladybird/commit/e011ddd368b Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3899 Reviewed-by: https://github.com/AtkinsSJ ✅
18 changed files with 511 additions and 144 deletions
|
|
@ -466,6 +466,78 @@
|
|||
"border-color"
|
||||
]
|
||||
},
|
||||
"border-block-end": {
|
||||
"inherited": false,
|
||||
"initial": "medium currentcolor none",
|
||||
"longhands": [
|
||||
"border-block-end-width",
|
||||
"border-block-end-style",
|
||||
"border-block-end-color"
|
||||
]
|
||||
},
|
||||
"border-block-end-color": {
|
||||
"logical-alias-for": [
|
||||
"border-top-color",
|
||||
"border-right-color",
|
||||
"border-bottom-color",
|
||||
"border-left-color"
|
||||
],
|
||||
"max-values": 1
|
||||
},
|
||||
"border-block-end-style": {
|
||||
"logical-alias-for": [
|
||||
"border-top-style",
|
||||
"border-right-style",
|
||||
"border-bottom-style",
|
||||
"border-left-style"
|
||||
],
|
||||
"max-values": 1
|
||||
},
|
||||
"border-block-end-width": {
|
||||
"logical-alias-for": [
|
||||
"border-top-width",
|
||||
"border-right-width",
|
||||
"border-bottom-width",
|
||||
"border-left-width"
|
||||
],
|
||||
"max-values": 1
|
||||
},
|
||||
"border-block-start": {
|
||||
"inherited": false,
|
||||
"initial": "medium currentcolor none",
|
||||
"longhands": [
|
||||
"border-block-start-width",
|
||||
"border-block-start-style",
|
||||
"border-block-start-color"
|
||||
]
|
||||
},
|
||||
"border-block-start-color": {
|
||||
"logical-alias-for": [
|
||||
"border-top-color",
|
||||
"border-right-color",
|
||||
"border-bottom-color",
|
||||
"border-left-color"
|
||||
],
|
||||
"max-values": 1
|
||||
},
|
||||
"border-block-start-style": {
|
||||
"logical-alias-for": [
|
||||
"border-top-style",
|
||||
"border-right-style",
|
||||
"border-bottom-style",
|
||||
"border-left-style"
|
||||
],
|
||||
"max-values": 1
|
||||
},
|
||||
"border-block-start-width": {
|
||||
"logical-alias-for": [
|
||||
"border-top-width",
|
||||
"border-right-width",
|
||||
"border-bottom-width",
|
||||
"border-left-width"
|
||||
],
|
||||
"max-values": 1
|
||||
},
|
||||
"border-bottom": {
|
||||
"inherited": false,
|
||||
"initial": "medium currentcolor none",
|
||||
|
|
|
|||
|
|
@ -194,8 +194,8 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
|
|||
// The resolved value for a given longhand property can be determined as follows:
|
||||
switch (property_id) {
|
||||
// -> background-color
|
||||
// FIXME: -> border-block-end-color
|
||||
// FIXME: -> border-block-start-color
|
||||
// -> border-block-end-color
|
||||
// -> border-block-start-color
|
||||
// -> border-bottom-color
|
||||
// -> border-inline-end-color
|
||||
// -> border-inline-start-color
|
||||
|
|
@ -210,6 +210,12 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
|
|||
// The resolved value is the used value.
|
||||
case PropertyID::BackgroundColor:
|
||||
return CSSColorValue::create_from_color(layout_node.computed_values().background_color(), ColorSyntax::Modern);
|
||||
case PropertyID::BorderBlockEndColor:
|
||||
// FIXME: Honor writing-mode, direction and text-orientation.
|
||||
return style_value_for_property(layout_node, PropertyID::BorderBottomColor);
|
||||
case PropertyID::BorderBlockStartColor:
|
||||
// FIXME: Honor writing-mode, direction and text-orientation.
|
||||
return style_value_for_property(layout_node, PropertyID::BorderTopColor);
|
||||
case PropertyID::BorderBottomColor:
|
||||
return CSSColorValue::create_from_color(layout_node.computed_values().border_bottom().color, ColorSyntax::Modern);
|
||||
case PropertyID::BorderInlineEndColor:
|
||||
|
|
|
|||
|
|
@ -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::BorderBlockEndColor:
|
||||
return PropertyID::BorderBottomColor;
|
||||
case PropertyID::BorderBlockEndStyle:
|
||||
return PropertyID::BorderBottomStyle;
|
||||
case PropertyID::BorderBlockEndWidth:
|
||||
return PropertyID::BorderBottomWidth;
|
||||
case PropertyID::BorderBlockStartColor:
|
||||
return PropertyID::BorderTopColor;
|
||||
case PropertyID::BorderBlockStartStyle:
|
||||
return PropertyID::BorderTopStyle;
|
||||
case PropertyID::BorderBlockStartWidth:
|
||||
return PropertyID::BorderTopWidth;
|
||||
case PropertyID::BorderInlineStartColor:
|
||||
return PropertyID::BorderLeftColor;
|
||||
case PropertyID::BorderInlineStartStyle:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
|
||||
'cssText': ''
|
||||
'length': '226'
|
||||
'length': '232'
|
||||
'parentRule': 'null'
|
||||
'cssFloat': 'none'
|
||||
'WebkitAlignContent': 'normal'
|
||||
|
|
@ -186,6 +186,22 @@ All supported properties and their default values exposed from CSSStyleDeclarati
|
|||
'blockSize': '0px'
|
||||
'block-size': '0px'
|
||||
'border': 'medium none rgb(0, 0, 0)'
|
||||
'borderBlockEnd': 'medium none rgb(0, 0, 0)'
|
||||
'border-block-end': 'medium none rgb(0, 0, 0)'
|
||||
'borderBlockEndColor': 'rgb(0, 0, 0)'
|
||||
'border-block-end-color': 'rgb(0, 0, 0)'
|
||||
'borderBlockEndStyle': 'none'
|
||||
'border-block-end-style': 'none'
|
||||
'borderBlockEndWidth': 'medium'
|
||||
'border-block-end-width': 'medium'
|
||||
'borderBlockStart': 'medium none rgb(0, 0, 0)'
|
||||
'border-block-start': 'medium none rgb(0, 0, 0)'
|
||||
'borderBlockStartColor': 'rgb(0, 0, 0)'
|
||||
'border-block-start-color': 'rgb(0, 0, 0)'
|
||||
'borderBlockStartStyle': 'none'
|
||||
'border-block-start-style': 'none'
|
||||
'borderBlockStartWidth': 'medium'
|
||||
'border-block-start-width': 'medium'
|
||||
'borderBottom': 'medium none rgb(0, 0, 0)'
|
||||
'border-bottom': 'medium none rgb(0, 0, 0)'
|
||||
'borderBottomColor': 'rgb(0, 0, 0)'
|
||||
|
|
|
|||
|
|
@ -86,146 +86,152 @@ All properties associated with getComputedStyle(document.body):
|
|||
"83": "background-repeat",
|
||||
"84": "background-size",
|
||||
"85": "block-size",
|
||||
"86": "border-bottom-color",
|
||||
"87": "border-bottom-left-radius",
|
||||
"88": "border-bottom-right-radius",
|
||||
"89": "border-bottom-style",
|
||||
"90": "border-bottom-width",
|
||||
"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"
|
||||
"86": "border-block-end-color",
|
||||
"87": "border-block-end-style",
|
||||
"88": "border-block-end-width",
|
||||
"89": "border-block-start-color",
|
||||
"90": "border-block-start-style",
|
||||
"91": "border-block-start-width",
|
||||
"92": "border-bottom-color",
|
||||
"93": "border-bottom-left-radius",
|
||||
"94": "border-bottom-right-radius",
|
||||
"95": "border-bottom-style",
|
||||
"96": "border-bottom-width",
|
||||
"97": "border-inline-end-color",
|
||||
"98": "border-inline-end-style",
|
||||
"99": "border-inline-end-width",
|
||||
"100": "border-inline-start-color",
|
||||
"101": "border-inline-start-style",
|
||||
"102": "border-inline-start-width",
|
||||
"103": "border-left-color",
|
||||
"104": "border-left-style",
|
||||
"105": "border-left-width",
|
||||
"106": "border-right-color",
|
||||
"107": "border-right-style",
|
||||
"108": "border-right-width",
|
||||
"109": "border-top-color",
|
||||
"110": "border-top-left-radius",
|
||||
"111": "border-top-right-radius",
|
||||
"112": "border-top-style",
|
||||
"113": "border-top-width",
|
||||
"114": "bottom",
|
||||
"115": "box-shadow",
|
||||
"116": "box-sizing",
|
||||
"117": "clear",
|
||||
"118": "clip",
|
||||
"119": "clip-path",
|
||||
"120": "column-count",
|
||||
"121": "column-gap",
|
||||
"122": "column-span",
|
||||
"123": "column-width",
|
||||
"124": "contain",
|
||||
"125": "content",
|
||||
"126": "content-visibility",
|
||||
"127": "counter-increment",
|
||||
"128": "counter-reset",
|
||||
"129": "counter-set",
|
||||
"130": "cx",
|
||||
"131": "cy",
|
||||
"132": "display",
|
||||
"133": "filter",
|
||||
"134": "flex-basis",
|
||||
"135": "flex-direction",
|
||||
"136": "flex-grow",
|
||||
"137": "flex-shrink",
|
||||
"138": "flex-wrap",
|
||||
"139": "float",
|
||||
"140": "grid-auto-columns",
|
||||
"141": "grid-auto-flow",
|
||||
"142": "grid-auto-rows",
|
||||
"143": "grid-column-end",
|
||||
"144": "grid-column-start",
|
||||
"145": "grid-row-end",
|
||||
"146": "grid-row-start",
|
||||
"147": "grid-template-areas",
|
||||
"148": "grid-template-columns",
|
||||
"149": "grid-template-rows",
|
||||
"150": "height",
|
||||
"151": "inline-size",
|
||||
"152": "inset-block-end",
|
||||
"153": "inset-block-start",
|
||||
"154": "inset-inline-end",
|
||||
"155": "inset-inline-start",
|
||||
"156": "isolation",
|
||||
"157": "justify-content",
|
||||
"158": "justify-items",
|
||||
"159": "justify-self",
|
||||
"160": "left",
|
||||
"161": "margin-block-end",
|
||||
"162": "margin-block-start",
|
||||
"163": "margin-bottom",
|
||||
"164": "margin-inline-end",
|
||||
"165": "margin-inline-start",
|
||||
"166": "margin-left",
|
||||
"167": "margin-right",
|
||||
"168": "margin-top",
|
||||
"169": "mask-image",
|
||||
"170": "mask-type",
|
||||
"171": "max-block-size",
|
||||
"172": "max-height",
|
||||
"173": "max-inline-size",
|
||||
"174": "max-width",
|
||||
"175": "min-block-size",
|
||||
"176": "min-height",
|
||||
"177": "min-inline-size",
|
||||
"178": "min-width",
|
||||
"179": "mix-blend-mode",
|
||||
"180": "object-fit",
|
||||
"181": "object-position",
|
||||
"182": "opacity",
|
||||
"183": "order",
|
||||
"184": "outline-color",
|
||||
"185": "outline-offset",
|
||||
"186": "outline-style",
|
||||
"187": "outline-width",
|
||||
"188": "overflow-x",
|
||||
"189": "overflow-y",
|
||||
"190": "padding-block-end",
|
||||
"191": "padding-block-start",
|
||||
"192": "padding-bottom",
|
||||
"193": "padding-inline-end",
|
||||
"194": "padding-inline-start",
|
||||
"195": "padding-left",
|
||||
"196": "padding-right",
|
||||
"197": "padding-top",
|
||||
"198": "position",
|
||||
"199": "r",
|
||||
"200": "right",
|
||||
"201": "rotate",
|
||||
"202": "row-gap",
|
||||
"203": "rx",
|
||||
"204": "ry",
|
||||
"205": "scale",
|
||||
"206": "scrollbar-gutter",
|
||||
"207": "scrollbar-width",
|
||||
"208": "stop-color",
|
||||
"209": "stop-opacity",
|
||||
"210": "table-layout",
|
||||
"211": "text-decoration-color",
|
||||
"212": "text-decoration-style",
|
||||
"213": "text-decoration-thickness",
|
||||
"214": "text-overflow",
|
||||
"215": "top",
|
||||
"216": "transform",
|
||||
"217": "transform-box",
|
||||
"218": "transform-origin",
|
||||
"219": "transition-delay",
|
||||
"220": "transition-duration",
|
||||
"221": "transition-property",
|
||||
"222": "transition-timing-function",
|
||||
"223": "translate",
|
||||
"224": "unicode-bidi",
|
||||
"225": "user-select",
|
||||
"226": "vertical-align",
|
||||
"227": "view-transition-name",
|
||||
"228": "width",
|
||||
"229": "x",
|
||||
"230": "y",
|
||||
"231": "z-index"
|
||||
}
|
||||
All properties associated with document.body.style by default:
|
||||
{}
|
||||
|
|
|
|||
|
|
@ -84,6 +84,12 @@ background-position-y: 0%
|
|||
background-repeat: repeat
|
||||
background-size: auto auto
|
||||
block-size: 1190px
|
||||
border-block-end-color: rgb(0, 0, 0)
|
||||
border-block-end-style: none
|
||||
border-block-end-width: medium
|
||||
border-block-start-color: rgb(0, 0, 0)
|
||||
border-block-start-style: none
|
||||
border-block-start-width: medium
|
||||
border-bottom-color: rgb(0, 0, 0)
|
||||
border-bottom-left-radius: 0px
|
||||
border-bottom-right-radius: 0px
|
||||
|
|
@ -142,7 +148,7 @@ grid-row-start: auto
|
|||
grid-template-areas: none
|
||||
grid-template-columns: auto
|
||||
grid-template-rows: auto
|
||||
height: 2016px
|
||||
height: 2100px
|
||||
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-block-start-color'] = "#12" should not set the property value
|
||||
Pass e.style['border-block-start-color'] = "auto" should not set the property value
|
||||
Pass e.style['border-block-start-color'] = "red green" should not set the property value
|
||||
Pass e.style['border-block-start-color'] = "rgb" should not set the property value
|
||||
Pass e.style['border-block-start-color'] = "rgb(1,2,3,4,5)" should not set the property value
|
||||
Pass e.style['border-block-start-color'] = "rgb(10%, 20, 30%)" should not set the property value
|
||||
Pass e.style['border-block-end-color'] = "#123456789" should not set the property value
|
||||
Pass e.style['border-block-end-color'] = "123" should not set the property value
|
||||
Pass e.style['border-block-end-color'] = "hsla(1,2,3,4,5)" should not set the property value
|
||||
Pass e.style['border-block-end-color'] = "red, green" should not set the property value
|
||||
Pass e.style['border-block-end-color'] = "rgb(1)" should not set the property value
|
||||
Pass e.style['border-block-end-color'] = "rgba(-2, 300, 400%, -0.5)" should not set the property value
|
||||
Pass e.style['border-block-color'] = "auto" should not set the property value
|
||||
Pass e.style['border-block-color'] = "lime, transparent" should not set the property value
|
||||
Pass e.style['border-block-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-block-start-color'] = "currentcolor" should set the property value
|
||||
Pass e.style['border-block-start-color'] = "rgb(2, 3, 4)" should set the property value
|
||||
Pass e.style['border-block-end-color'] = "#234" should set the property value
|
||||
Pass e.style['border-block-end-color'] = "transparent" should set the property value
|
||||
Fail e.style['border-block-color'] = "#234" should set the property value
|
||||
Fail e.style['border-block-color'] = "transparent rgb(2, 3, 4)" should set the property value
|
||||
Fail e.style['border-block-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-block-start-style'] = "auto" should not set the property value
|
||||
Pass e.style['border-block-start-style'] = "hidden, outset" should not set the property value
|
||||
Pass e.style['border-block-end-style'] = "solid double" should not set the property value
|
||||
Pass e.style['border-block-style'] = "auto" should not set the property value
|
||||
Pass e.style['border-block-style'] = "groove, ridge" should not set the property value
|
||||
Pass e.style['border-block-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-block-start-style'] = "dotted" should set the property value
|
||||
Pass e.style['border-block-start-style'] = "groove" should set the property value
|
||||
Pass e.style['border-block-start-style'] = "inset" should set the property value
|
||||
Pass e.style['border-block-start-style'] = "none" should set the property value
|
||||
Pass e.style['border-block-start-style'] = "solid" should set the property value
|
||||
Pass e.style['border-block-end-style'] = "dashed" should set the property value
|
||||
Pass e.style['border-block-end-style'] = "double" should set the property value
|
||||
Pass e.style['border-block-end-style'] = "hidden" should set the property value
|
||||
Pass e.style['border-block-end-style'] = "outset" should set the property value
|
||||
Pass e.style['border-block-end-style'] = "ridge" should set the property value
|
||||
Fail e.style['border-block-style'] = "dotted" should set the property value
|
||||
Fail e.style['border-block-style'] = "double groove" should set the property value
|
||||
Fail e.style['border-block-style'] = "hidden hidden" should set the property value
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 7 tests
|
||||
|
||||
7 Pass
|
||||
Pass e.style['border-block-start-width'] = "-20px" should not set the property value
|
||||
Pass e.style['border-block-start-width'] = "auto" should not set the property value
|
||||
Pass e.style['border-block-start-width'] = "medium 40px" should not set the property value
|
||||
Pass e.style['border-block-end-width'] = "10" should not set the property value
|
||||
Pass e.style['border-block-end-width'] = "30%" should not set the property value
|
||||
Pass e.style['border-block-width'] = "thick, thin" should not set the property value
|
||||
Pass e.style['border-block-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-block-start-width'] = "10px" should set the property value
|
||||
Pass e.style['border-block-start-width'] = "calc(10px + 0.5em)" should set the property value
|
||||
Pass e.style['border-block-start-width'] = "thick" should set the property value
|
||||
Pass e.style['border-block-start-width'] = "thin" should set the property value
|
||||
Pass e.style['border-block-end-width'] = "0" should set the property value
|
||||
Pass e.style['border-block-end-width'] = "calc(10px - 0.5em)" should set the property value
|
||||
Pass e.style['border-block-end-width'] = "medium" should set the property value
|
||||
Fail e.style['border-block-width'] = "10px" should set the property value
|
||||
Fail e.style['border-block-width'] = "medium calc(10px + 0.5em)" should set the property value
|
||||
Fail e.style['border-block-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-block-color with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-color">
|
||||
<meta name="assert" content="border-block-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-block-start-color", "#12");
|
||||
test_invalid_value("border-block-start-color", "auto");
|
||||
test_invalid_value("border-block-start-color", "red green");
|
||||
test_invalid_value("border-block-start-color", "rgb");
|
||||
test_invalid_value("border-block-start-color", "rgb(1,2,3,4,5)");
|
||||
test_invalid_value("border-block-start-color", "rgb(10%, 20, 30%)");
|
||||
test_invalid_value("border-block-end-color", "#123456789");
|
||||
test_invalid_value("border-block-end-color", "123");
|
||||
test_invalid_value("border-block-end-color", "hsla(1,2,3,4,5)");
|
||||
test_invalid_value("border-block-end-color", "red, green");
|
||||
test_invalid_value("border-block-end-color", "rgb(1)");
|
||||
test_invalid_value("border-block-end-color", "rgba(-2, 300, 400%, -0.5)");
|
||||
test_invalid_value("border-block-color", "auto");
|
||||
test_invalid_value("border-block-color", "lime, transparent");
|
||||
test_invalid_value("border-block-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-block-color with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-color">
|
||||
<meta name="assert" content="border-block-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-block-start-color", "currentcolor");
|
||||
test_valid_value("border-block-start-color", "rgb(2, 3, 4)");
|
||||
test_valid_value("border-block-end-color", "#234", "rgb(34, 51, 68)");
|
||||
test_valid_value("border-block-end-color", "transparent");
|
||||
test_valid_value("border-block-color", "#234", "rgb(34, 51, 68)");
|
||||
test_valid_value("border-block-color", "transparent rgb(2, 3, 4)");
|
||||
test_valid_value("border-block-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-block-style with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-style">
|
||||
<meta name="assert" content="border-block-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-block-start-style", "auto");
|
||||
test_invalid_value("border-block-start-style", "hidden, outset");
|
||||
test_invalid_value("border-block-end-style", "solid double");
|
||||
test_invalid_value("border-block-style", "auto");
|
||||
test_invalid_value("border-block-style", "groove, ridge");
|
||||
test_invalid_value("border-block-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-block-style with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block">
|
||||
<meta name="assert" content="border-block-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-block-start-style", "dotted");
|
||||
test_valid_value("border-block-start-style", "groove");
|
||||
test_valid_value("border-block-start-style", "inset");
|
||||
test_valid_value("border-block-start-style", "none");
|
||||
test_valid_value("border-block-start-style", "solid");
|
||||
test_valid_value("border-block-end-style", "dashed");
|
||||
test_valid_value("border-block-end-style", "double");
|
||||
test_valid_value("border-block-end-style", "hidden");
|
||||
test_valid_value("border-block-end-style", "outset");
|
||||
test_valid_value("border-block-end-style", "ridge");
|
||||
test_valid_value("border-block-style", "dotted");
|
||||
test_valid_value("border-block-style", "double groove");
|
||||
test_valid_value("border-block-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-block-width with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-width">
|
||||
<meta name="assert" content="border-block-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-block-start-width", "-20px");
|
||||
test_invalid_value("border-block-start-width", "auto");
|
||||
test_invalid_value("border-block-start-width", "medium 40px");
|
||||
test_invalid_value("border-block-end-width", "10");
|
||||
test_invalid_value("border-block-end-width", "30%");
|
||||
|
||||
test_invalid_value("border-block-width", "thick, thin");
|
||||
test_invalid_value("border-block-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-block-width with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-width">
|
||||
<meta name="assert" content="border-block-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-block-start-width", "10px");
|
||||
test_valid_value("border-block-start-width", "calc(10px + 0.5em)", "calc(0.5em + 10px)");
|
||||
test_valid_value("border-block-start-width", "thick");
|
||||
test_valid_value("border-block-start-width", "thin");
|
||||
test_valid_value("border-block-end-width", "0", "0px");
|
||||
test_valid_value("border-block-end-width", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
|
||||
test_valid_value("border-block-end-width", "medium");
|
||||
test_valid_value("border-block-width", "10px");
|
||||
test_valid_value("border-block-width", "medium calc(10px + 0.5em)", "medium calc(0.5em + 10px)");
|
||||
test_valid_value("border-block-width", "10px 10px", "10px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue