mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-29 04:09:13 +00:00
LibWeb: Add border-*-radius logical properties
This commit is contained in:
Tim Ledbetter
Andreas Kling
parent
e77561d3a9
commit
5b522c096e
Notes:
github-actions[bot]
2025-07-01 09:17:45 +00:00
Author: https://github.com/tcl3
Commit: 5b522c096e
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5252
9 changed files with 215 additions and 9 deletions
|
|
@ -687,6 +687,24 @@
|
|||
"hashless-hex-color"
|
||||
]
|
||||
},
|
||||
"border-end-end-radius": {
|
||||
"logical-alias-for": [
|
||||
"border-top-left-radius",
|
||||
"border-bottom-left-radius",
|
||||
"border-top-right-radius",
|
||||
"border-bottom-right-radius"
|
||||
],
|
||||
"max-values": 1
|
||||
},
|
||||
"border-end-start-radius": {
|
||||
"logical-alias-for": [
|
||||
"border-top-left-radius",
|
||||
"border-bottom-left-radius",
|
||||
"border-top-right-radius",
|
||||
"border-bottom-right-radius"
|
||||
],
|
||||
"max-values": 1
|
||||
},
|
||||
"border-inline-color": {
|
||||
"inherited": false,
|
||||
"initial": "currentcolor",
|
||||
|
|
@ -901,6 +919,24 @@
|
|||
"unitless-length"
|
||||
]
|
||||
},
|
||||
"border-start-end-radius": {
|
||||
"logical-alias-for": [
|
||||
"border-top-left-radius",
|
||||
"border-bottom-left-radius",
|
||||
"border-top-right-radius",
|
||||
"border-bottom-right-radius"
|
||||
],
|
||||
"max-values": 1
|
||||
},
|
||||
"border-start-start-radius": {
|
||||
"logical-alias-for": [
|
||||
"border-top-left-radius",
|
||||
"border-bottom-left-radius",
|
||||
"border-top-right-radius",
|
||||
"border-bottom-right-radius"
|
||||
],
|
||||
"max-values": 1
|
||||
},
|
||||
"border-style": {
|
||||
"initial": "none",
|
||||
"longhands": [
|
||||
|
|
|
|||
|
|
@ -935,6 +935,50 @@ PropertyID StyleComputer::map_logical_alias_to_physical_property_id(PropertyID p
|
|||
if (first_is_one_of(mapping_context.writing_mode, WritingMode::VerticalRl, WritingMode::SidewaysRl))
|
||||
return PropertyID::BorderRightWidth;
|
||||
return PropertyID::BorderLeftWidth;
|
||||
case PropertyID::BorderEndEndRadius:
|
||||
if (mapping_context.writing_mode == WritingMode::HorizontalTb) {
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderBottomRightRadius;
|
||||
return PropertyID::BorderBottomLeftRadius;
|
||||
}
|
||||
|
||||
if (first_is_one_of(mapping_context.writing_mode, WritingMode::VerticalRl, WritingMode::SidewaysRl)) {
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderBottomLeftRadius;
|
||||
return PropertyID::BorderTopLeftRadius;
|
||||
}
|
||||
|
||||
if (mapping_context.writing_mode == WritingMode::VerticalLr) {
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderBottomRightRadius;
|
||||
return PropertyID::BorderTopRightRadius;
|
||||
}
|
||||
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderTopRightRadius;
|
||||
return PropertyID::BorderBottomRightRadius;
|
||||
case PropertyID::BorderEndStartRadius:
|
||||
if (mapping_context.writing_mode == WritingMode::HorizontalTb) {
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderBottomLeftRadius;
|
||||
return PropertyID::BorderBottomRightRadius;
|
||||
}
|
||||
|
||||
if (first_is_one_of(mapping_context.writing_mode, WritingMode::VerticalRl, WritingMode::SidewaysRl)) {
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderTopLeftRadius;
|
||||
return PropertyID::BorderBottomLeftRadius;
|
||||
}
|
||||
|
||||
if (mapping_context.writing_mode == WritingMode::VerticalLr) {
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderTopRightRadius;
|
||||
return PropertyID::BorderBottomRightRadius;
|
||||
}
|
||||
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderBottomRightRadius;
|
||||
return PropertyID::BorderTopRightRadius;
|
||||
case PropertyID::BorderInlineStartColor:
|
||||
if (mapping_context.writing_mode == WritingMode::HorizontalTb) {
|
||||
if (used_direction == Direction::Ltr)
|
||||
|
|
@ -1032,7 +1076,49 @@ PropertyID StyleComputer::map_logical_alias_to_physical_property_id(PropertyID p
|
|||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderTopWidth;
|
||||
return PropertyID::BorderBottomWidth;
|
||||
case PropertyID::BorderStartEndRadius:
|
||||
if (mapping_context.writing_mode == WritingMode::HorizontalTb) {
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderTopRightRadius;
|
||||
return PropertyID::BorderTopLeftRadius;
|
||||
}
|
||||
|
||||
if (first_is_one_of(mapping_context.writing_mode, WritingMode::VerticalRl, WritingMode::SidewaysRl)) {
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderBottomRightRadius;
|
||||
return PropertyID::BorderTopRightRadius;
|
||||
}
|
||||
|
||||
if (mapping_context.writing_mode == WritingMode::VerticalLr) {
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderBottomLeftRadius;
|
||||
return PropertyID::BorderTopLeftRadius;
|
||||
}
|
||||
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderTopLeftRadius;
|
||||
return PropertyID::BorderBottomLeftRadius;
|
||||
case PropertyID::BorderStartStartRadius:
|
||||
if (mapping_context.writing_mode == WritingMode::HorizontalTb) {
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderTopLeftRadius;
|
||||
return PropertyID::BorderTopRightRadius;
|
||||
}
|
||||
|
||||
if (first_is_one_of(mapping_context.writing_mode, WritingMode::VerticalRl, WritingMode::SidewaysRl)) {
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderTopRightRadius;
|
||||
return PropertyID::BorderBottomRightRadius;
|
||||
}
|
||||
|
||||
if (mapping_context.writing_mode == WritingMode::VerticalLr) {
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderTopLeftRadius;
|
||||
return PropertyID::BorderBottomLeftRadius;
|
||||
}
|
||||
if (used_direction == Direction::Ltr)
|
||||
return PropertyID::BorderBottomLeftRadius;
|
||||
return PropertyID::BorderTopLeftRadius;
|
||||
case PropertyID::MarginBlockStart:
|
||||
if (mapping_context.writing_mode == WritingMode::HorizontalTb)
|
||||
return PropertyID::MarginTop;
|
||||
|
|
|
|||
|
|
@ -103,6 +103,8 @@ All properties associated with getComputedStyle(document.body):
|
|||
"border-bottom-right-radius",
|
||||
"border-bottom-style",
|
||||
"border-bottom-width",
|
||||
"border-end-end-radius",
|
||||
"border-end-start-radius",
|
||||
"border-inline-end-color",
|
||||
"border-inline-end-style",
|
||||
"border-inline-end-width",
|
||||
|
|
@ -115,6 +117,8 @@ All properties associated with getComputedStyle(document.body):
|
|||
"border-right-color",
|
||||
"border-right-style",
|
||||
"border-right-width",
|
||||
"border-start-end-radius",
|
||||
"border-start-start-radius",
|
||||
"border-top-color",
|
||||
"border-top-left-radius",
|
||||
"border-top-right-radius",
|
||||
|
|
|
|||
|
|
@ -239,6 +239,10 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'border-collapse': 'separate'
|
||||
'borderColor': 'rgb(0, 0, 0)'
|
||||
'border-color': 'rgb(0, 0, 0)'
|
||||
'borderEndEndRadius': '0px'
|
||||
'border-end-end-radius': '0px'
|
||||
'borderEndStartRadius': '0px'
|
||||
'border-end-start-radius': '0px'
|
||||
'borderInlineColor': 'rgb(0, 0, 0)'
|
||||
'border-inline-color': 'rgb(0, 0, 0)'
|
||||
'borderInlineEnd': '0px rgb(0, 0, 0)'
|
||||
|
|
@ -281,6 +285,10 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'border-right-width': '0px'
|
||||
'borderSpacing': '0px'
|
||||
'border-spacing': '0px'
|
||||
'borderStartEndRadius': '0px'
|
||||
'border-start-end-radius': '0px'
|
||||
'borderStartStartRadius': '0px'
|
||||
'border-start-start-radius': '0px'
|
||||
'borderStyle': 'none'
|
||||
'border-style': 'none'
|
||||
'borderTop': '0px rgb(0, 0, 0)'
|
||||
|
|
|
|||
|
|
@ -101,6 +101,8 @@ border-bottom-left-radius: 0px
|
|||
border-bottom-right-radius: 0px
|
||||
border-bottom-style: none
|
||||
border-bottom-width: 0px
|
||||
border-end-end-radius: 0px
|
||||
border-end-start-radius: 0px
|
||||
border-inline-end-color: rgb(0, 0, 0)
|
||||
border-inline-end-style: none
|
||||
border-inline-end-width: 0px
|
||||
|
|
@ -113,6 +115,8 @@ border-left-width: 0px
|
|||
border-right-color: rgb(0, 0, 0)
|
||||
border-right-style: none
|
||||
border-right-width: 0px
|
||||
border-start-end-radius: 0px
|
||||
border-start-start-radius: 0px
|
||||
border-top-color: rgb(0, 0, 0)
|
||||
border-top-left-radius: 0px
|
||||
border-top-right-radius: 0px
|
||||
|
|
@ -154,7 +158,7 @@ grid-row-start: auto
|
|||
grid-template-areas: none
|
||||
grid-template-columns: none
|
||||
grid-template-rows: none
|
||||
height: 2340px
|
||||
height: 2400px
|
||||
inline-size: 784px
|
||||
inset-block-end: auto
|
||||
inset-block-start: auto
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 237 tests
|
||||
Found 241 tests
|
||||
|
||||
231 Pass
|
||||
235 Pass
|
||||
6 Fail
|
||||
Pass accent-color
|
||||
Pass border-collapse
|
||||
|
|
@ -103,6 +103,8 @@ Pass border-bottom-left-radius
|
|||
Pass border-bottom-right-radius
|
||||
Pass border-bottom-style
|
||||
Pass border-bottom-width
|
||||
Pass border-end-end-radius
|
||||
Pass border-end-start-radius
|
||||
Pass border-inline-end-color
|
||||
Pass border-inline-end-style
|
||||
Pass border-inline-end-width
|
||||
|
|
@ -115,6 +117,8 @@ Pass border-left-width
|
|||
Pass border-right-color
|
||||
Pass border-right-style
|
||||
Pass border-right-width
|
||||
Pass border-start-end-radius
|
||||
Pass border-start-start-radius
|
||||
Pass border-top-color
|
||||
Pass border-top-left-radius
|
||||
Pass border-top-right-radius
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ Harness status: OK
|
|||
|
||||
Found 68 tests
|
||||
|
||||
57 Pass
|
||||
11 Fail
|
||||
61 Pass
|
||||
7 Fail
|
||||
Pass Property block-size has initial value 0px
|
||||
Pass Property block-size does not inherit
|
||||
Pass Property border-block-end-color has initial value rgb(0, 0, 255)
|
||||
|
|
@ -18,9 +18,9 @@ Pass Property border-block-start-style has initial value none
|
|||
Pass Property border-block-start-style does not inherit
|
||||
Pass Property border-block-start-width has initial value 3px
|
||||
Pass Property border-block-start-width does not inherit
|
||||
Fail Property border-end-end-radius has initial value 0px
|
||||
Pass Property border-end-end-radius has initial value 0px
|
||||
Fail Property border-end-end-radius does not inherit
|
||||
Fail Property border-end-start-radius has initial value 0px
|
||||
Pass Property border-end-start-radius has initial value 0px
|
||||
Fail Property border-end-start-radius does not inherit
|
||||
Pass Property border-inline-end-color has initial value rgb(0, 0, 255)
|
||||
Pass Property border-inline-end-color does not inherit
|
||||
|
|
@ -34,9 +34,9 @@ Pass Property border-inline-start-style has initial value none
|
|||
Pass Property border-inline-start-style does not inherit
|
||||
Pass Property border-inline-start-width has initial value 3px
|
||||
Pass Property border-inline-start-width does not inherit
|
||||
Fail Property border-start-end-radius has initial value 0px
|
||||
Pass Property border-start-end-radius has initial value 0px
|
||||
Fail Property border-start-end-radius does not inherit
|
||||
Fail Property border-start-start-radius has initial value 0px
|
||||
Pass Property border-start-start-radius has initial value 0px
|
||||
Fail Property border-start-start-radius does not inherit
|
||||
Pass Property inline-size has initial value 294px
|
||||
Pass Property inline-size does not inherit
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 41 tests
|
||||
|
||||
41 Pass
|
||||
Pass Test that logical border-*-radius properties are supported.
|
||||
Pass Test that logical border-*-radius properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '.
|
||||
Pass Test that border-*-radius shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '.
|
||||
Pass Test that border-*-radius properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.
|
||||
Pass Test that border-*-radius properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.
|
||||
Pass Test that logical border-*-radius properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: rtl; '.
|
||||
Pass Test that border-*-radius shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '.
|
||||
Pass Test that border-*-radius properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '.
|
||||
Pass Test that border-*-radius properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '.
|
||||
Pass Test that logical border-*-radius properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '.
|
||||
Pass Test that border-*-radius shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '.
|
||||
Pass Test that border-*-radius properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '.
|
||||
Pass Test that border-*-radius properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '.
|
||||
Pass Test that logical border-*-radius properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: rtl; '.
|
||||
Pass Test that border-*-radius shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '.
|
||||
Pass Test that border-*-radius properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '.
|
||||
Pass Test that border-*-radius properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '.
|
||||
Pass Test that logical border-*-radius properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '.
|
||||
Pass Test that border-*-radius shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '.
|
||||
Pass Test that border-*-radius properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '.
|
||||
Pass Test that border-*-radius properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '.
|
||||
Pass Test that logical border-*-radius properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: ltr; '.
|
||||
Pass Test that border-*-radius shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '.
|
||||
Pass Test that border-*-radius properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '.
|
||||
Pass Test that border-*-radius properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '.
|
||||
Pass Test that logical border-*-radius properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '.
|
||||
Pass Test that border-*-radius shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '.
|
||||
Pass Test that border-*-radius properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '.
|
||||
Pass Test that border-*-radius properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '.
|
||||
Pass Test that logical border-*-radius properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: ltr; '.
|
||||
Pass Test that border-*-radius shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '.
|
||||
Pass Test that border-*-radius properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '.
|
||||
Pass Test that border-*-radius properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '.
|
||||
Pass Test that logical border-*-radius properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '.
|
||||
Pass Test that border-*-radius shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '.
|
||||
Pass Test that border-*-radius properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '.
|
||||
Pass Test that border-*-radius properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '.
|
||||
Pass Test that logical border-*-radius properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: rtl; '.
|
||||
Pass Test that border-*-radius shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '.
|
||||
Pass Test that border-*-radius properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '.
|
||||
Pass Test that border-*-radius properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '.
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Logical Properties: flow-relative border-radius</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-logical-1/#border-radius-properties">
|
||||
<meta name="assert" content="This test checks the interaction of the flow-relative border-*-radius properties with the physical ones in different writing modes." />
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="module">
|
||||
import {runTests, createCornerPropertyGroup} from "./resources/test-box-properties.js";
|
||||
runTests(createCornerPropertyGroup("border-*-radius", {
|
||||
type: "length",
|
||||
prerequisites: {"border-style": "solid"},
|
||||
}));
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue