mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-04-22 12:35:14 +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: https://github.com/LadybirdBrowser/ladybird/commit/010cdd8f907 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"
|
||||
},
|
||||
"block-size": {
|
||||
"logical-alias-for": [
|
||||
"height",
|
||||
"width"
|
||||
],
|
||||
"initial": "auto",
|
||||
"max-values": 1
|
||||
},
|
||||
"border": {
|
||||
"inherited": false,
|
||||
"initial": "medium currentcolor none",
|
||||
|
|
@ -2002,6 +2010,13 @@
|
|||
"math-style"
|
||||
]
|
||||
},
|
||||
"max-block-size": {
|
||||
"logical-alias-for": [
|
||||
"max-height",
|
||||
"max-width"
|
||||
],
|
||||
"initial": "none"
|
||||
},
|
||||
"max-height": {
|
||||
"animation-type": "by-computed-value",
|
||||
"inherited": false,
|
||||
|
|
@ -2047,6 +2062,13 @@
|
|||
"unitless-length"
|
||||
]
|
||||
},
|
||||
"min-block-size": {
|
||||
"logical-alias-for": [
|
||||
"min-height",
|
||||
"min-width"
|
||||
],
|
||||
"initial": "0"
|
||||
},
|
||||
"min-height": {
|
||||
"animation-type": "by-computed-value",
|
||||
"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> {
|
||||
// FIXME: Honor writing-mode, direction and text-orientation.
|
||||
switch (property_id) {
|
||||
case PropertyID::BlockSize:
|
||||
return PropertyID::Height;
|
||||
case PropertyID::MarginBlockStart:
|
||||
return PropertyID::MarginTop;
|
||||
case PropertyID::MarginBlockEnd:
|
||||
|
|
@ -892,6 +894,26 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
|
|||
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 (!value.is_transition()) {
|
||||
// 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:
|
||||
'cssText': ''
|
||||
'length': '215'
|
||||
'length': '218'
|
||||
'parentRule': 'null'
|
||||
'cssFloat': 'none'
|
||||
'WebkitAlignContent': 'normal'
|
||||
|
|
@ -183,6 +183,8 @@ All supported properties and their default values exposed from CSSStyleDeclarati
|
|||
'background-repeat': 'repeat'
|
||||
'backgroundSize': 'auto auto'
|
||||
'background-size': 'auto auto'
|
||||
'blockSize': 'auto'
|
||||
'block-size': 'auto'
|
||||
'border': 'medium none rgb(0, 0, 0)'
|
||||
'borderBottom': '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'
|
||||
'mathStyle': 'normal'
|
||||
'math-style': 'normal'
|
||||
'maxBlockSize': 'none'
|
||||
'max-block-size': 'none'
|
||||
'maxHeight': 'none'
|
||||
'max-height': 'none'
|
||||
'maxInlineSize': 'none'
|
||||
'max-inline-size': 'none'
|
||||
'maxWidth': 'none'
|
||||
'max-width': 'none'
|
||||
'minBlockSize': '0px'
|
||||
'min-block-size': '0px'
|
||||
'minHeight': 'auto'
|
||||
'min-height': 'auto'
|
||||
'minInlineSize': '0px'
|
||||
|
|
|
|||
|
|
@ -84,137 +84,140 @@ All properties associated with getComputedStyle(document.body):
|
|||
"81": "background-position-y",
|
||||
"82": "background-repeat",
|
||||
"83": "background-size",
|
||||
"84": "border-bottom-color",
|
||||
"85": "border-bottom-left-radius",
|
||||
"86": "border-bottom-right-radius",
|
||||
"87": "border-bottom-style",
|
||||
"88": "border-bottom-width",
|
||||
"89": "border-left-color",
|
||||
"90": "border-left-style",
|
||||
"91": "border-left-width",
|
||||
"92": "border-right-color",
|
||||
"93": "border-right-style",
|
||||
"94": "border-right-width",
|
||||
"95": "border-top-color",
|
||||
"96": "border-top-left-radius",
|
||||
"97": "border-top-right-radius",
|
||||
"98": "border-top-style",
|
||||
"99": "border-top-width",
|
||||
"100": "bottom",
|
||||
"101": "box-shadow",
|
||||
"102": "box-sizing",
|
||||
"103": "clear",
|
||||
"104": "clip",
|
||||
"105": "clip-path",
|
||||
"106": "column-count",
|
||||
"107": "column-gap",
|
||||
"108": "column-span",
|
||||
"109": "column-width",
|
||||
"110": "contain",
|
||||
"111": "content",
|
||||
"112": "content-visibility",
|
||||
"113": "counter-increment",
|
||||
"114": "counter-reset",
|
||||
"115": "counter-set",
|
||||
"116": "cx",
|
||||
"117": "cy",
|
||||
"118": "display",
|
||||
"119": "filter",
|
||||
"120": "flex-basis",
|
||||
"121": "flex-direction",
|
||||
"122": "flex-grow",
|
||||
"123": "flex-shrink",
|
||||
"124": "flex-wrap",
|
||||
"125": "float",
|
||||
"126": "grid-auto-columns",
|
||||
"127": "grid-auto-flow",
|
||||
"128": "grid-auto-rows",
|
||||
"129": "grid-column-end",
|
||||
"130": "grid-column-start",
|
||||
"131": "grid-row-end",
|
||||
"132": "grid-row-start",
|
||||
"133": "grid-template-areas",
|
||||
"134": "grid-template-columns",
|
||||
"135": "grid-template-rows",
|
||||
"136": "height",
|
||||
"137": "inline-size",
|
||||
"138": "inset-block-end",
|
||||
"139": "inset-block-start",
|
||||
"140": "inset-inline-end",
|
||||
"141": "inset-inline-start",
|
||||
"142": "isolation",
|
||||
"143": "justify-content",
|
||||
"144": "justify-items",
|
||||
"145": "justify-self",
|
||||
"146": "left",
|
||||
"147": "margin-block-end",
|
||||
"148": "margin-block-start",
|
||||
"149": "margin-bottom",
|
||||
"150": "margin-inline-end",
|
||||
"151": "margin-inline-start",
|
||||
"152": "margin-left",
|
||||
"153": "margin-right",
|
||||
"154": "margin-top",
|
||||
"155": "mask",
|
||||
"156": "mask-image",
|
||||
"157": "mask-type",
|
||||
"158": "max-height",
|
||||
"159": "max-inline-size",
|
||||
"160": "max-width",
|
||||
"161": "min-height",
|
||||
"162": "min-inline-size",
|
||||
"163": "min-width",
|
||||
"164": "object-fit",
|
||||
"165": "object-position",
|
||||
"166": "opacity",
|
||||
"167": "order",
|
||||
"168": "outline-color",
|
||||
"169": "outline-offset",
|
||||
"170": "outline-style",
|
||||
"171": "outline-width",
|
||||
"172": "overflow-x",
|
||||
"173": "overflow-y",
|
||||
"174": "padding-block-end",
|
||||
"175": "padding-block-start",
|
||||
"176": "padding-bottom",
|
||||
"177": "padding-inline-end",
|
||||
"178": "padding-inline-start",
|
||||
"179": "padding-left",
|
||||
"180": "padding-right",
|
||||
"181": "padding-top",
|
||||
"182": "position",
|
||||
"183": "r",
|
||||
"184": "right",
|
||||
"185": "rotate",
|
||||
"186": "row-gap",
|
||||
"187": "rx",
|
||||
"188": "ry",
|
||||
"189": "scale",
|
||||
"190": "scrollbar-gutter",
|
||||
"191": "scrollbar-width",
|
||||
"192": "stop-color",
|
||||
"193": "stop-opacity",
|
||||
"194": "table-layout",
|
||||
"195": "text-decoration-color",
|
||||
"196": "text-decoration-style",
|
||||
"197": "text-decoration-thickness",
|
||||
"198": "text-overflow",
|
||||
"199": "top",
|
||||
"200": "transform",
|
||||
"201": "transform-box",
|
||||
"202": "transform-origin",
|
||||
"203": "transition-delay",
|
||||
"204": "transition-duration",
|
||||
"205": "transition-property",
|
||||
"206": "transition-timing-function",
|
||||
"207": "translate",
|
||||
"208": "unicode-bidi",
|
||||
"209": "user-select",
|
||||
"210": "vertical-align",
|
||||
"211": "width",
|
||||
"212": "x",
|
||||
"213": "y",
|
||||
"214": "z-index"
|
||||
"84": "block-size",
|
||||
"85": "border-bottom-color",
|
||||
"86": "border-bottom-left-radius",
|
||||
"87": "border-bottom-right-radius",
|
||||
"88": "border-bottom-style",
|
||||
"89": "border-bottom-width",
|
||||
"90": "border-left-color",
|
||||
"91": "border-left-style",
|
||||
"92": "border-left-width",
|
||||
"93": "border-right-color",
|
||||
"94": "border-right-style",
|
||||
"95": "border-right-width",
|
||||
"96": "border-top-color",
|
||||
"97": "border-top-left-radius",
|
||||
"98": "border-top-right-radius",
|
||||
"99": "border-top-style",
|
||||
"100": "border-top-width",
|
||||
"101": "bottom",
|
||||
"102": "box-shadow",
|
||||
"103": "box-sizing",
|
||||
"104": "clear",
|
||||
"105": "clip",
|
||||
"106": "clip-path",
|
||||
"107": "column-count",
|
||||
"108": "column-gap",
|
||||
"109": "column-span",
|
||||
"110": "column-width",
|
||||
"111": "contain",
|
||||
"112": "content",
|
||||
"113": "content-visibility",
|
||||
"114": "counter-increment",
|
||||
"115": "counter-reset",
|
||||
"116": "counter-set",
|
||||
"117": "cx",
|
||||
"118": "cy",
|
||||
"119": "display",
|
||||
"120": "filter",
|
||||
"121": "flex-basis",
|
||||
"122": "flex-direction",
|
||||
"123": "flex-grow",
|
||||
"124": "flex-shrink",
|
||||
"125": "flex-wrap",
|
||||
"126": "float",
|
||||
"127": "grid-auto-columns",
|
||||
"128": "grid-auto-flow",
|
||||
"129": "grid-auto-rows",
|
||||
"130": "grid-column-end",
|
||||
"131": "grid-column-start",
|
||||
"132": "grid-row-end",
|
||||
"133": "grid-row-start",
|
||||
"134": "grid-template-areas",
|
||||
"135": "grid-template-columns",
|
||||
"136": "grid-template-rows",
|
||||
"137": "height",
|
||||
"138": "inline-size",
|
||||
"139": "inset-block-end",
|
||||
"140": "inset-block-start",
|
||||
"141": "inset-inline-end",
|
||||
"142": "inset-inline-start",
|
||||
"143": "isolation",
|
||||
"144": "justify-content",
|
||||
"145": "justify-items",
|
||||
"146": "justify-self",
|
||||
"147": "left",
|
||||
"148": "margin-block-end",
|
||||
"149": "margin-block-start",
|
||||
"150": "margin-bottom",
|
||||
"151": "margin-inline-end",
|
||||
"152": "margin-inline-start",
|
||||
"153": "margin-left",
|
||||
"154": "margin-right",
|
||||
"155": "margin-top",
|
||||
"156": "mask",
|
||||
"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": "object-fit",
|
||||
"168": "object-position",
|
||||
"169": "opacity",
|
||||
"170": "order",
|
||||
"171": "outline-color",
|
||||
"172": "outline-offset",
|
||||
"173": "outline-style",
|
||||
"174": "outline-width",
|
||||
"175": "overflow-x",
|
||||
"176": "overflow-y",
|
||||
"177": "padding-block-end",
|
||||
"178": "padding-block-start",
|
||||
"179": "padding-bottom",
|
||||
"180": "padding-inline-end",
|
||||
"181": "padding-inline-start",
|
||||
"182": "padding-left",
|
||||
"183": "padding-right",
|
||||
"184": "padding-top",
|
||||
"185": "position",
|
||||
"186": "r",
|
||||
"187": "right",
|
||||
"188": "rotate",
|
||||
"189": "row-gap",
|
||||
"190": "rx",
|
||||
"191": "ry",
|
||||
"192": "scale",
|
||||
"193": "scrollbar-gutter",
|
||||
"194": "scrollbar-width",
|
||||
"195": "stop-color",
|
||||
"196": "stop-opacity",
|
||||
"197": "table-layout",
|
||||
"198": "text-decoration-color",
|
||||
"199": "text-decoration-style",
|
||||
"200": "text-decoration-thickness",
|
||||
"201": "text-overflow",
|
||||
"202": "top",
|
||||
"203": "transform",
|
||||
"204": "transform-box",
|
||||
"205": "transform-origin",
|
||||
"206": "transition-delay",
|
||||
"207": "transition-duration",
|
||||
"208": "transition-property",
|
||||
"209": "transition-timing-function",
|
||||
"210": "translate",
|
||||
"211": "unicode-bidi",
|
||||
"212": "user-select",
|
||||
"213": "vertical-align",
|
||||
"214": "width",
|
||||
"215": "x",
|
||||
"216": "y",
|
||||
"217": "z-index"
|
||||
}
|
||||
All properties associated with document.body.style by default:
|
||||
{}
|
||||
|
|
|
|||
|
|
@ -82,6 +82,7 @@ background-position-x: 0%
|
|||
background-position-y: 0%
|
||||
background-repeat: repeat
|
||||
background-size: auto auto
|
||||
block-size: auto
|
||||
border-bottom-color: rgb(0, 0, 0)
|
||||
border-bottom-left-radius: 0px
|
||||
border-bottom-right-radius: 0px
|
||||
|
|
@ -134,7 +135,7 @@ grid-row-start: auto
|
|||
grid-template-areas: none
|
||||
grid-template-columns: auto
|
||||
grid-template-rows: auto
|
||||
height: 2312px
|
||||
height: 2329px
|
||||
inline-size: auto
|
||||
inset-block-end: auto
|
||||
inset-block-start: auto
|
||||
|
|
@ -156,9 +157,11 @@ margin-top: 8px
|
|||
mask: none
|
||||
mask-image: none
|
||||
mask-type: luminance
|
||||
max-block-size: none
|
||||
max-height: none
|
||||
max-inline-size: none
|
||||
max-width: none
|
||||
min-block-size: 0px
|
||||
min-height: auto
|
||||
min-inline-size: 0px
|
||||
min-width: auto
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue