diff --git a/Libraries/LibWeb/CSS/Properties.json b/Libraries/LibWeb/CSS/Properties.json index ab1852dfd22..8331e41e0af 100644 --- a/Libraries/LibWeb/CSS/Properties.json +++ b/Libraries/LibWeb/CSS/Properties.json @@ -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, diff --git a/Libraries/LibWeb/CSS/StyleComputer.cpp b/Libraries/LibWeb/CSS/StyleComputer.cpp index 06ce9bb0693..a11589fc14c 100644 --- a/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/Libraries/LibWeb/CSS/StyleComputer.cpp @@ -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 { // 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`. diff --git a/Tests/LibWeb/Layout/expected/block-size.txt b/Tests/LibWeb/Layout/expected/block-size.txt new file mode 100644 index 00000000000..52d5e48fb1d --- /dev/null +++ b/Tests/LibWeb/Layout/expected/block-size.txt @@ -0,0 +1,38 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x1710 [BFC] children: not-inline + BlockContainer at (8,70) content-size 784x1632 children: not-inline + BlockContainer 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
+ TextNode <#text> + BlockContainer 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
+ TextNode <#text> + BlockContainer 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) [0,0 800x1710] + PaintableWithLines (BlockContainer) [8,70 784x1632] + PaintableWithLines (BlockContainer

.min-block-test) [8,70 784x700] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,840 784x76] + PaintableWithLines (BlockContainer

.max-block-test) [8,986 200x100] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,1156 784x76] + PaintableWithLines (BlockContainer

.block-size-test) [8,1302 200x400] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,1772 784x0] diff --git a/Tests/LibWeb/Layout/input/block-size.html b/Tests/LibWeb/Layout/input/block-size.html new file mode 100644 index 00000000000..9c96b2bc7b8 --- /dev/null +++ b/Tests/LibWeb/Layout/input/block-size.html @@ -0,0 +1,33 @@ + + +

KK

+
+

KK

+
+

KK

diff --git a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt index 9d75b2c2eb5..4c6df4ec242 100644 --- a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt +++ b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt @@ -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' diff --git a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt index e475fa85f01..59eb08b0527 100644 --- a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt +++ b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt @@ -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: {} diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt index e75ecc5b120..bab0cf39051 100644 --- a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt +++ b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt @@ -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