mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-08 01:00:05 +00:00
LibWeb/CSS: Implement the ({min,max}-)block-size properties
These are heavily used by morrisons.com, using them in place of the usual properties these map to.
This commit is contained in:
Luke Wilde
Andreas Kling
parent
f204970052
commit
010cdd8f90
Notes:
github-actions[bot]
2025-01-31 13:19:26 +00:00
Author: https://github.com/Lubrsi
Commit: 010cdd8f90
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3399
Reviewed-by: https://github.com/AtkinsSJ
7 changed files with 260 additions and 133 deletions
|
|
@ -448,6 +448,14 @@
|
||||||
],
|
],
|
||||||
"percentages-resolve-to": "length"
|
"percentages-resolve-to": "length"
|
||||||
},
|
},
|
||||||
|
"block-size": {
|
||||||
|
"logical-alias-for": [
|
||||||
|
"height",
|
||||||
|
"width"
|
||||||
|
],
|
||||||
|
"initial": "auto",
|
||||||
|
"max-values": 1
|
||||||
|
},
|
||||||
"border": {
|
"border": {
|
||||||
"inherited": false,
|
"inherited": false,
|
||||||
"initial": "medium currentcolor none",
|
"initial": "medium currentcolor none",
|
||||||
|
|
@ -2002,6 +2010,13 @@
|
||||||
"math-style"
|
"math-style"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"max-block-size": {
|
||||||
|
"logical-alias-for": [
|
||||||
|
"max-height",
|
||||||
|
"max-width"
|
||||||
|
],
|
||||||
|
"initial": "none"
|
||||||
|
},
|
||||||
"max-height": {
|
"max-height": {
|
||||||
"animation-type": "by-computed-value",
|
"animation-type": "by-computed-value",
|
||||||
"inherited": false,
|
"inherited": false,
|
||||||
|
|
@ -2047,6 +2062,13 @@
|
||||||
"unitless-length"
|
"unitless-length"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"min-block-size": {
|
||||||
|
"logical-alias-for": [
|
||||||
|
"min-height",
|
||||||
|
"min-width"
|
||||||
|
],
|
||||||
|
"initial": "0"
|
||||||
|
},
|
||||||
"min-height": {
|
"min-height": {
|
||||||
"animation-type": "by-computed-value",
|
"animation-type": "by-computed-value",
|
||||||
"inherited": false,
|
"inherited": false,
|
||||||
|
|
|
||||||
|
|
@ -629,6 +629,8 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
|
||||||
auto map_logical_property_to_real_property = [](PropertyID property_id) -> Optional<PropertyID> {
|
auto map_logical_property_to_real_property = [](PropertyID property_id) -> Optional<PropertyID> {
|
||||||
// FIXME: Honor writing-mode, direction and text-orientation.
|
// FIXME: Honor writing-mode, direction and text-orientation.
|
||||||
switch (property_id) {
|
switch (property_id) {
|
||||||
|
case PropertyID::BlockSize:
|
||||||
|
return PropertyID::Height;
|
||||||
case PropertyID::MarginBlockStart:
|
case PropertyID::MarginBlockStart:
|
||||||
return PropertyID::MarginTop;
|
return PropertyID::MarginTop;
|
||||||
case PropertyID::MarginBlockEnd:
|
case PropertyID::MarginBlockEnd:
|
||||||
|
|
@ -892,6 +894,26 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (property_id == CSS::PropertyID::MaxBlockSize || property_id == CSS::PropertyID::MinBlockSize) {
|
||||||
|
// FIXME: Use writing-mode to determine if we should set width or height.
|
||||||
|
bool is_horizontal = true;
|
||||||
|
|
||||||
|
if (is_horizontal) {
|
||||||
|
if (property_id == CSS::PropertyID::MaxBlockSize) {
|
||||||
|
set_longhand_property(CSS::PropertyID::MaxHeight, value);
|
||||||
|
} else {
|
||||||
|
set_longhand_property(CSS::PropertyID::MinHeight, value);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (property_id == CSS::PropertyID::MaxBlockSize) {
|
||||||
|
set_longhand_property(CSS::PropertyID::MaxWidth, value);
|
||||||
|
} else {
|
||||||
|
set_longhand_property(CSS::PropertyID::MinWidth, value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (property_id == CSS::PropertyID::Transition) {
|
if (property_id == CSS::PropertyID::Transition) {
|
||||||
if (!value.is_transition()) {
|
if (!value.is_transition()) {
|
||||||
// Handle `none` as a shorthand for `all 0s ease 0s`.
|
// Handle `none` as a shorthand for `all 0s ease 0s`.
|
||||||
|
|
|
||||||
38
Tests/LibWeb/Layout/expected/block-size.txt
Normal file
38
Tests/LibWeb/Layout/expected/block-size.txt
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 800x1710 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,70) content-size 784x1632 children: not-inline
|
||||||
|
BlockContainer <p.min-block-test> at (8,70) content-size 784x700 children: inline
|
||||||
|
frag 0 from TextNode start: 0, length: 2, rect: [8,70 85.875x76] baseline: 58.984375
|
||||||
|
"KK"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <(anonymous)> at (8,840) content-size 784x76 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
BreakNode <br>
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <p.max-block-test> at (8,986) content-size 200x100 children: inline
|
||||||
|
frag 0 from TextNode start: 0, length: 2, rect: [8,986 85.875x76] baseline: 58.984375
|
||||||
|
"KK"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <(anonymous)> at (8,1156) content-size 784x76 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
BreakNode <br>
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <p.block-size-test> at (8,1302) content-size 200x400 children: inline
|
||||||
|
frag 0 from TextNode start: 0, length: 2, rect: [8,1302 85.875x76] baseline: 58.984375
|
||||||
|
"KK"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <(anonymous)> at (8,1772) content-size 784x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
|
||||||
|
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x1710]
|
||||||
|
PaintableWithLines (BlockContainer<HTML>) [0,0 800x1710]
|
||||||
|
PaintableWithLines (BlockContainer<BODY>) [8,70 784x1632]
|
||||||
|
PaintableWithLines (BlockContainer<P>.min-block-test) [8,70 784x700]
|
||||||
|
TextPaintable (TextNode<#text>)
|
||||||
|
PaintableWithLines (BlockContainer(anonymous)) [8,840 784x76]
|
||||||
|
PaintableWithLines (BlockContainer<P>.max-block-test) [8,986 200x100]
|
||||||
|
TextPaintable (TextNode<#text>)
|
||||||
|
PaintableWithLines (BlockContainer(anonymous)) [8,1156 784x76]
|
||||||
|
PaintableWithLines (BlockContainer<P>.block-size-test) [8,1302 200x400]
|
||||||
|
TextPaintable (TextNode<#text>)
|
||||||
|
PaintableWithLines (BlockContainer(anonymous)) [8,1772 784x0]
|
||||||
33
Tests/LibWeb/Layout/input/block-size.html
Normal file
33
Tests/LibWeb/Layout/input/block-size.html
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
font: 70px SerenitySans;
|
||||||
|
}
|
||||||
|
.min-block-test {
|
||||||
|
background: red;
|
||||||
|
min-height: 400px;
|
||||||
|
min-width: 200px;
|
||||||
|
|
||||||
|
min-block-size: 700px;
|
||||||
|
writing-mode: horizontal-tb;
|
||||||
|
}
|
||||||
|
.max-block-test {
|
||||||
|
background: blue;
|
||||||
|
max-height: 400px;
|
||||||
|
max-width: 200px;
|
||||||
|
height: 600px;
|
||||||
|
|
||||||
|
max-block-size: 100px;
|
||||||
|
writing-mode: horizontal-tb;
|
||||||
|
}
|
||||||
|
.block-size-test {
|
||||||
|
background: blue;
|
||||||
|
block-size: 400px;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p class="min-block-test">KK</p>
|
||||||
|
<br>
|
||||||
|
<p class="max-block-test">KK</p>
|
||||||
|
<br>
|
||||||
|
<p class="block-size-test">KK</p>
|
||||||
|
|
@ -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': '215'
|
'length': '218'
|
||||||
'parentRule': 'null'
|
'parentRule': 'null'
|
||||||
'cssFloat': 'none'
|
'cssFloat': 'none'
|
||||||
'WebkitAlignContent': 'normal'
|
'WebkitAlignContent': 'normal'
|
||||||
|
|
@ -183,6 +183,8 @@ All supported properties and their default values exposed from CSSStyleDeclarati
|
||||||
'background-repeat': 'repeat'
|
'background-repeat': 'repeat'
|
||||||
'backgroundSize': 'auto auto'
|
'backgroundSize': 'auto auto'
|
||||||
'background-size': 'auto auto'
|
'background-size': 'auto auto'
|
||||||
|
'blockSize': 'auto'
|
||||||
|
'block-size': 'auto'
|
||||||
'border': 'medium none rgb(0, 0, 0)'
|
'border': 'medium none rgb(0, 0, 0)'
|
||||||
'borderBottom': 'medium none rgb(0, 0, 0)'
|
'borderBottom': 'medium none rgb(0, 0, 0)'
|
||||||
'border-bottom': 'medium none rgb(0, 0, 0)'
|
'border-bottom': 'medium none rgb(0, 0, 0)'
|
||||||
|
|
@ -437,12 +439,16 @@ All supported properties and their default values exposed from CSSStyleDeclarati
|
||||||
'math-shift': 'normal'
|
'math-shift': 'normal'
|
||||||
'mathStyle': 'normal'
|
'mathStyle': 'normal'
|
||||||
'math-style': 'normal'
|
'math-style': 'normal'
|
||||||
|
'maxBlockSize': 'none'
|
||||||
|
'max-block-size': 'none'
|
||||||
'maxHeight': 'none'
|
'maxHeight': 'none'
|
||||||
'max-height': 'none'
|
'max-height': 'none'
|
||||||
'maxInlineSize': 'none'
|
'maxInlineSize': 'none'
|
||||||
'max-inline-size': 'none'
|
'max-inline-size': 'none'
|
||||||
'maxWidth': 'none'
|
'maxWidth': 'none'
|
||||||
'max-width': 'none'
|
'max-width': 'none'
|
||||||
|
'minBlockSize': '0px'
|
||||||
|
'min-block-size': '0px'
|
||||||
'minHeight': 'auto'
|
'minHeight': 'auto'
|
||||||
'min-height': 'auto'
|
'min-height': 'auto'
|
||||||
'minInlineSize': '0px'
|
'minInlineSize': '0px'
|
||||||
|
|
|
||||||
|
|
@ -84,137 +84,140 @@ All properties associated with getComputedStyle(document.body):
|
||||||
"81": "background-position-y",
|
"81": "background-position-y",
|
||||||
"82": "background-repeat",
|
"82": "background-repeat",
|
||||||
"83": "background-size",
|
"83": "background-size",
|
||||||
"84": "border-bottom-color",
|
"84": "block-size",
|
||||||
"85": "border-bottom-left-radius",
|
"85": "border-bottom-color",
|
||||||
"86": "border-bottom-right-radius",
|
"86": "border-bottom-left-radius",
|
||||||
"87": "border-bottom-style",
|
"87": "border-bottom-right-radius",
|
||||||
"88": "border-bottom-width",
|
"88": "border-bottom-style",
|
||||||
"89": "border-left-color",
|
"89": "border-bottom-width",
|
||||||
"90": "border-left-style",
|
"90": "border-left-color",
|
||||||
"91": "border-left-width",
|
"91": "border-left-style",
|
||||||
"92": "border-right-color",
|
"92": "border-left-width",
|
||||||
"93": "border-right-style",
|
"93": "border-right-color",
|
||||||
"94": "border-right-width",
|
"94": "border-right-style",
|
||||||
"95": "border-top-color",
|
"95": "border-right-width",
|
||||||
"96": "border-top-left-radius",
|
"96": "border-top-color",
|
||||||
"97": "border-top-right-radius",
|
"97": "border-top-left-radius",
|
||||||
"98": "border-top-style",
|
"98": "border-top-right-radius",
|
||||||
"99": "border-top-width",
|
"99": "border-top-style",
|
||||||
"100": "bottom",
|
"100": "border-top-width",
|
||||||
"101": "box-shadow",
|
"101": "bottom",
|
||||||
"102": "box-sizing",
|
"102": "box-shadow",
|
||||||
"103": "clear",
|
"103": "box-sizing",
|
||||||
"104": "clip",
|
"104": "clear",
|
||||||
"105": "clip-path",
|
"105": "clip",
|
||||||
"106": "column-count",
|
"106": "clip-path",
|
||||||
"107": "column-gap",
|
"107": "column-count",
|
||||||
"108": "column-span",
|
"108": "column-gap",
|
||||||
"109": "column-width",
|
"109": "column-span",
|
||||||
"110": "contain",
|
"110": "column-width",
|
||||||
"111": "content",
|
"111": "contain",
|
||||||
"112": "content-visibility",
|
"112": "content",
|
||||||
"113": "counter-increment",
|
"113": "content-visibility",
|
||||||
"114": "counter-reset",
|
"114": "counter-increment",
|
||||||
"115": "counter-set",
|
"115": "counter-reset",
|
||||||
"116": "cx",
|
"116": "counter-set",
|
||||||
"117": "cy",
|
"117": "cx",
|
||||||
"118": "display",
|
"118": "cy",
|
||||||
"119": "filter",
|
"119": "display",
|
||||||
"120": "flex-basis",
|
"120": "filter",
|
||||||
"121": "flex-direction",
|
"121": "flex-basis",
|
||||||
"122": "flex-grow",
|
"122": "flex-direction",
|
||||||
"123": "flex-shrink",
|
"123": "flex-grow",
|
||||||
"124": "flex-wrap",
|
"124": "flex-shrink",
|
||||||
"125": "float",
|
"125": "flex-wrap",
|
||||||
"126": "grid-auto-columns",
|
"126": "float",
|
||||||
"127": "grid-auto-flow",
|
"127": "grid-auto-columns",
|
||||||
"128": "grid-auto-rows",
|
"128": "grid-auto-flow",
|
||||||
"129": "grid-column-end",
|
"129": "grid-auto-rows",
|
||||||
"130": "grid-column-start",
|
"130": "grid-column-end",
|
||||||
"131": "grid-row-end",
|
"131": "grid-column-start",
|
||||||
"132": "grid-row-start",
|
"132": "grid-row-end",
|
||||||
"133": "grid-template-areas",
|
"133": "grid-row-start",
|
||||||
"134": "grid-template-columns",
|
"134": "grid-template-areas",
|
||||||
"135": "grid-template-rows",
|
"135": "grid-template-columns",
|
||||||
"136": "height",
|
"136": "grid-template-rows",
|
||||||
"137": "inline-size",
|
"137": "height",
|
||||||
"138": "inset-block-end",
|
"138": "inline-size",
|
||||||
"139": "inset-block-start",
|
"139": "inset-block-end",
|
||||||
"140": "inset-inline-end",
|
"140": "inset-block-start",
|
||||||
"141": "inset-inline-start",
|
"141": "inset-inline-end",
|
||||||
"142": "isolation",
|
"142": "inset-inline-start",
|
||||||
"143": "justify-content",
|
"143": "isolation",
|
||||||
"144": "justify-items",
|
"144": "justify-content",
|
||||||
"145": "justify-self",
|
"145": "justify-items",
|
||||||
"146": "left",
|
"146": "justify-self",
|
||||||
"147": "margin-block-end",
|
"147": "left",
|
||||||
"148": "margin-block-start",
|
"148": "margin-block-end",
|
||||||
"149": "margin-bottom",
|
"149": "margin-block-start",
|
||||||
"150": "margin-inline-end",
|
"150": "margin-bottom",
|
||||||
"151": "margin-inline-start",
|
"151": "margin-inline-end",
|
||||||
"152": "margin-left",
|
"152": "margin-inline-start",
|
||||||
"153": "margin-right",
|
"153": "margin-left",
|
||||||
"154": "margin-top",
|
"154": "margin-right",
|
||||||
"155": "mask",
|
"155": "margin-top",
|
||||||
"156": "mask-image",
|
"156": "mask",
|
||||||
"157": "mask-type",
|
"157": "mask-image",
|
||||||
"158": "max-height",
|
"158": "mask-type",
|
||||||
"159": "max-inline-size",
|
"159": "max-block-size",
|
||||||
"160": "max-width",
|
"160": "max-height",
|
||||||
"161": "min-height",
|
"161": "max-inline-size",
|
||||||
"162": "min-inline-size",
|
"162": "max-width",
|
||||||
"163": "min-width",
|
"163": "min-block-size",
|
||||||
"164": "object-fit",
|
"164": "min-height",
|
||||||
"165": "object-position",
|
"165": "min-inline-size",
|
||||||
"166": "opacity",
|
"166": "min-width",
|
||||||
"167": "order",
|
"167": "object-fit",
|
||||||
"168": "outline-color",
|
"168": "object-position",
|
||||||
"169": "outline-offset",
|
"169": "opacity",
|
||||||
"170": "outline-style",
|
"170": "order",
|
||||||
"171": "outline-width",
|
"171": "outline-color",
|
||||||
"172": "overflow-x",
|
"172": "outline-offset",
|
||||||
"173": "overflow-y",
|
"173": "outline-style",
|
||||||
"174": "padding-block-end",
|
"174": "outline-width",
|
||||||
"175": "padding-block-start",
|
"175": "overflow-x",
|
||||||
"176": "padding-bottom",
|
"176": "overflow-y",
|
||||||
"177": "padding-inline-end",
|
"177": "padding-block-end",
|
||||||
"178": "padding-inline-start",
|
"178": "padding-block-start",
|
||||||
"179": "padding-left",
|
"179": "padding-bottom",
|
||||||
"180": "padding-right",
|
"180": "padding-inline-end",
|
||||||
"181": "padding-top",
|
"181": "padding-inline-start",
|
||||||
"182": "position",
|
"182": "padding-left",
|
||||||
"183": "r",
|
"183": "padding-right",
|
||||||
"184": "right",
|
"184": "padding-top",
|
||||||
"185": "rotate",
|
"185": "position",
|
||||||
"186": "row-gap",
|
"186": "r",
|
||||||
"187": "rx",
|
"187": "right",
|
||||||
"188": "ry",
|
"188": "rotate",
|
||||||
"189": "scale",
|
"189": "row-gap",
|
||||||
"190": "scrollbar-gutter",
|
"190": "rx",
|
||||||
"191": "scrollbar-width",
|
"191": "ry",
|
||||||
"192": "stop-color",
|
"192": "scale",
|
||||||
"193": "stop-opacity",
|
"193": "scrollbar-gutter",
|
||||||
"194": "table-layout",
|
"194": "scrollbar-width",
|
||||||
"195": "text-decoration-color",
|
"195": "stop-color",
|
||||||
"196": "text-decoration-style",
|
"196": "stop-opacity",
|
||||||
"197": "text-decoration-thickness",
|
"197": "table-layout",
|
||||||
"198": "text-overflow",
|
"198": "text-decoration-color",
|
||||||
"199": "top",
|
"199": "text-decoration-style",
|
||||||
"200": "transform",
|
"200": "text-decoration-thickness",
|
||||||
"201": "transform-box",
|
"201": "text-overflow",
|
||||||
"202": "transform-origin",
|
"202": "top",
|
||||||
"203": "transition-delay",
|
"203": "transform",
|
||||||
"204": "transition-duration",
|
"204": "transform-box",
|
||||||
"205": "transition-property",
|
"205": "transform-origin",
|
||||||
"206": "transition-timing-function",
|
"206": "transition-delay",
|
||||||
"207": "translate",
|
"207": "transition-duration",
|
||||||
"208": "unicode-bidi",
|
"208": "transition-property",
|
||||||
"209": "user-select",
|
"209": "transition-timing-function",
|
||||||
"210": "vertical-align",
|
"210": "translate",
|
||||||
"211": "width",
|
"211": "unicode-bidi",
|
||||||
"212": "x",
|
"212": "user-select",
|
||||||
"213": "y",
|
"213": "vertical-align",
|
||||||
"214": "z-index"
|
"214": "width",
|
||||||
|
"215": "x",
|
||||||
|
"216": "y",
|
||||||
|
"217": "z-index"
|
||||||
}
|
}
|
||||||
All properties associated with document.body.style by default:
|
All properties associated with document.body.style by default:
|
||||||
{}
|
{}
|
||||||
|
|
|
||||||
|
|
@ -82,6 +82,7 @@ background-position-x: 0%
|
||||||
background-position-y: 0%
|
background-position-y: 0%
|
||||||
background-repeat: repeat
|
background-repeat: repeat
|
||||||
background-size: auto auto
|
background-size: auto auto
|
||||||
|
block-size: auto
|
||||||
border-bottom-color: rgb(0, 0, 0)
|
border-bottom-color: rgb(0, 0, 0)
|
||||||
border-bottom-left-radius: 0px
|
border-bottom-left-radius: 0px
|
||||||
border-bottom-right-radius: 0px
|
border-bottom-right-radius: 0px
|
||||||
|
|
@ -134,7 +135,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: 2312px
|
height: 2329px
|
||||||
inline-size: auto
|
inline-size: auto
|
||||||
inset-block-end: auto
|
inset-block-end: auto
|
||||||
inset-block-start: auto
|
inset-block-start: auto
|
||||||
|
|
@ -156,9 +157,11 @@ margin-top: 8px
|
||||||
mask: none
|
mask: none
|
||||||
mask-image: none
|
mask-image: none
|
||||||
mask-type: luminance
|
mask-type: luminance
|
||||||
|
max-block-size: none
|
||||||
max-height: none
|
max-height: none
|
||||||
max-inline-size: none
|
max-inline-size: none
|
||||||
max-width: none
|
max-width: none
|
||||||
|
min-block-size: 0px
|
||||||
min-height: auto
|
min-height: auto
|
||||||
min-inline-size: 0px
|
min-inline-size: 0px
|
||||||
min-width: auto
|
min-width: auto
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue