mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-04-24 13:35:12 +00:00
LibWeb: Avoid computing automatic minimum size for some flex items
There's a specific (and thankfully very common!) scenario where we can actually skip calculating the automatic minimum size for flex items. In single-line (no wrapping) flex containers, if the sum of all item flex base sizes is <= the flex container's main size, we know that none of the items will be shrunk by the layout algorithm. And so for any flex item with definite main size AND automatic minimum main size, we can treat the automatic minimum size as 0.
This commit is contained in:
Andreas Kling
Andreas Kling
parent
6f5b107fcc
commit
7b2a427430
Notes:
github-actions[bot]
2025-04-22 13:47:03 +00:00
Author: https://github.com/awesomekling Commit: https://github.com/LadybirdBrowser/ladybird/commit/7b2a4274309 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4427
4 changed files with 366 additions and 10 deletions
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
* Copyright (c) 2021-2024, Andreas Kling <andreas@ladybird.org>
|
||||
* Copyright (c) 2021-2025, Andreas Kling <andreas@ladybird.org>
|
||||
* Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
|
|
@ -94,7 +94,38 @@ void FlexFormattingContext::run(AvailableSpace const& available_space)
|
|||
// FIXME: Get rid of prepare_for_replaced_layout() and make replaced elements figure out their intrinsic size lazily.
|
||||
static_cast<ReplacedBox&>(*item.box).prepare_for_replaced_layout();
|
||||
}
|
||||
determine_flex_base_size_and_hypothetical_main_size(item);
|
||||
determine_flex_base_size(item);
|
||||
}
|
||||
|
||||
// OPTIMIZATION: We try to avoid calculating the "automatic minimum size" if possible,
|
||||
// since it may require expensive intrinsic sizing layout.
|
||||
// If this is a single-line flex container and the sum of flex bases sizes
|
||||
// won't exceed the available space in the main axis, we know the layout
|
||||
// algorithm won't have to shrink anything, thus not needing the minimum size.
|
||||
bool const should_skip_automatic_minimum_size_clamp = [&] {
|
||||
if (m_layout_mode == LayoutMode::IntrinsicSizing)
|
||||
return false;
|
||||
if (!is_single_line())
|
||||
return false;
|
||||
if (is_row_layout() && !m_flex_container_state.has_definite_width())
|
||||
return false;
|
||||
if (!is_row_layout() && !m_flex_container_state.has_definite_height())
|
||||
return false;
|
||||
CSSPixels sum_of_item_flex_base_sizes = 0;
|
||||
for (auto& item : m_flex_items) {
|
||||
if (!has_definite_main_size(item))
|
||||
return false;
|
||||
sum_of_item_flex_base_sizes += item.flex_base_size;
|
||||
}
|
||||
if (sum_of_item_flex_base_sizes > m_available_space_for_items->main.to_px_or_zero())
|
||||
return false;
|
||||
return true;
|
||||
}();
|
||||
for (auto& item : m_flex_items) {
|
||||
// The hypothetical main size is the item’s flex base size clamped according to its used min and max main sizes (and flooring the content box size at zero).
|
||||
auto clamp_max = has_main_max_size(item.box) ? specified_main_max_size(item.box) : CSSPixels::max();
|
||||
auto clamp_min = has_main_min_size(item.box) ? specified_main_min_size(item.box) : (should_skip_automatic_minimum_size_clamp ? 0 : automatic_minimum_size(item));
|
||||
item.hypothetical_main_size = max(CSSPixels(0), css_clamp(item.flex_base_size, clamp_min, clamp_max));
|
||||
}
|
||||
|
||||
if (available_space.width.is_intrinsic_sizing_constraint() || available_space.height.is_intrinsic_sizing_constraint()) {
|
||||
|
|
@ -556,8 +587,8 @@ CSSPixels FlexFormattingContext::adjust_cross_size_through_aspect_ratio_for_main
|
|||
return cross_size;
|
||||
}
|
||||
|
||||
// https://www.w3.org/TR/css-flexbox-1/#algo-main-item
|
||||
void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(FlexItem& item)
|
||||
// https://drafts.csswg.org/css-flexbox-1/#algo-main-item
|
||||
void FlexFormattingContext::determine_flex_base_size(FlexItem& item)
|
||||
{
|
||||
auto& child_box = item.box;
|
||||
|
||||
|
|
@ -694,10 +725,7 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(
|
|||
item.flex_base_size = adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(child_box, item.flex_base_size, computed_cross_min_size(child_box), computed_cross_max_size(child_box));
|
||||
}
|
||||
|
||||
// The hypothetical main size is the item’s flex base size clamped according to its used min and max main sizes (and flooring the content box size at zero).
|
||||
auto clamp_min = has_main_min_size(child_box) ? specified_main_min_size(child_box) : automatic_minimum_size(item);
|
||||
auto clamp_max = has_main_max_size(child_box) ? specified_main_max_size(child_box) : CSSPixels::max();
|
||||
item.hypothetical_main_size = max(CSSPixels(0), css_clamp(item.flex_base_size, clamp_min, clamp_max));
|
||||
// NOTE: We don't clamp the main size until we have them for all items.
|
||||
}
|
||||
|
||||
// https://drafts.csswg.org/css-flexbox-1/#min-size-auto
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
* Copyright (c) 2021-2024, Andreas Kling <andreas@ladybird.org>
|
||||
* Copyright (c) 2021-2025, Andreas Kling <andreas@ladybird.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
|
@ -173,7 +173,7 @@ private:
|
|||
|
||||
void determine_available_space_for_items(AvailableSpace const&);
|
||||
|
||||
void determine_flex_base_size_and_hypothetical_main_size(FlexItem&);
|
||||
void determine_flex_base_size(FlexItem&);
|
||||
|
||||
void collect_flex_items_into_flex_lines();
|
||||
|
||||
|
|
|
|||
245
Tests/LibWeb/Layout/expected/flex/flex-optimization-cases.txt
Normal file
245
Tests/LibWeb/Layout/expected/flex/flex-optimization-cases.txt
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x2016 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 500x2000 children: not-inline
|
||||
Box <div> at (8,8) content-size 500x17 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,8) content-size 78.59375x17 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 10, rect: [8,8 78.59375x17] baseline: 13.296875
|
||||
"abcdefghij"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,25) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div> at (8,25) content-size 500x17 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,25) content-size 0x17 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 10, rect: [8,25 78.59375x17] baseline: 13.296875
|
||||
"abcdefghij"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,42) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div> at (8,42) content-size 500x17 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,42) content-size 100x17 flex-item [BFC] children: inline
|
||||
frag 0 from BlockContainer start: 0, length: 0, rect: [8,42 100x17] baseline: 13.296875
|
||||
TextNode <#text>
|
||||
BlockContainer <span> at (8,42) content-size 100x17 inline-block [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,42 9.703125x17] baseline: 13.296875
|
||||
"x"
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,59) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div> at (8,59) content-size 500x17 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,59) content-size 210.09375x17 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 24, rect: [8,59 210.09375x17] baseline: 13.296875
|
||||
"longwordlongwordlongword"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,76) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div> at (8,76) content-size 500x200 flex-container(column) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,76) content-size 500x200 flex-item [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,76) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,76) content-size 500x200 children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,276) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,276) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div> at (8,276) content-size 500x17 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,276) content-size 500x17 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 10, rect: [8,276 78.59375x17] baseline: 13.296875
|
||||
"abcdefghij"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,293) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div> at (8,293) content-size 500x8 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
ImageBox <img> at (8,293) content-size 8x8 flex-item children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,301) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div> at (8,301) content-size 100x17 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,301) content-size 210.09375x17 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 24, rect: [8,301 210.09375x17] baseline: 13.296875
|
||||
"longwordlongwordlongword"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,318) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div> at (8,318) content-size 500x18.421875 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,318) content-size 36.84375x18.421875 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 5, rect: [8,318 36.84375x17] baseline: 13.296875
|
||||
"hello"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,336.421875) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div> at (8,336.421875) content-size 500x100 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,336.421875) content-size 200x100 flex-item [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,436.421875) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div> at (8,436.421875) content-size 500x0 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,436.421875) content-size 0x0 flex-item [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,436.421875) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,436.421875) content-size 0x100 children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,536.421875) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,436.421875) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div> at (8,436.421875) content-size 500x120 flex-container(column) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,436.421875) content-size 500x120 flex-item [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,436.421875) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,436.421875) content-size 500x120 children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,556.421875) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,556.421875) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div> at (8,556.421875) content-size 500x300 flex-container(column) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,556.421875) content-size 500x300 flex-item [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,556.421875) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,556.421875) content-size 500x300 children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,856.421875) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,856.421875) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div> at (8,856.421875) content-size 500x150 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,856.421875) content-size 300x150 flex-item [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,856.421875) content-size 300x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,856.421875) content-size 300x150 children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,1006.421875) content-size 300x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,1006.421875) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div> at (8,1006.421875) content-size 500x8 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
ImageBox <img> at (8,1006.421875) content-size 8x8 flex-item children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,1014.421875) content-size 500x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x2016]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x2016]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 500x2000]
|
||||
PaintableBox (Box<DIV>) [8,8 500x17]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,8 78.59375x17]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,25 500x0]
|
||||
PaintableBox (Box<DIV>) [8,25 500x17]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,25 0x17] overflow: [8,25 78.59375x17]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,42 500x0]
|
||||
PaintableBox (Box<DIV>) [8,42 500x17]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,42 100x17]
|
||||
PaintableWithLines (BlockContainer<SPAN>) [8,42 100x17]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,59 500x0]
|
||||
PaintableBox (Box<DIV>) [8,59 500x17]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,59 210.09375x17]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,76 500x0]
|
||||
PaintableBox (Box<DIV>) [8,76 500x200]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,76 500x200]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,76 500x0]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,76 500x200]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,276 500x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,276 500x0]
|
||||
PaintableBox (Box<DIV>) [8,276 500x17]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,276 500x17]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,293 500x0]
|
||||
PaintableBox (Box<DIV>) [8,293 500x8]
|
||||
ImagePaintable (ImageBox<IMG>) [8,293 8x8]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,301 500x0]
|
||||
PaintableBox (Box<DIV>) [8,301 100x17] overflow: [8,301 210.09375x17]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,301 210.09375x17]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,318 500x0]
|
||||
PaintableBox (Box<DIV>) [8,318 500x18.421875]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,318 36.84375x18.421875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,336.421875 500x0]
|
||||
PaintableBox (Box<DIV>) [8,336.421875 500x100]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,336.421875 200x100]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,436.421875 500x0]
|
||||
PaintableBox (Box<DIV>) [8,436.421875 500x0]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,436.421875 0x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,436.421875 0x0]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,436.421875 0x100]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,536.421875 0x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,436.421875 500x0]
|
||||
PaintableBox (Box<DIV>) [8,436.421875 500x120]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,436.421875 500x120]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,436.421875 500x0]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,436.421875 500x120]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,556.421875 500x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,556.421875 500x0]
|
||||
PaintableBox (Box<DIV>) [8,556.421875 500x300]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,556.421875 500x300]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,556.421875 500x0]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,556.421875 500x300]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,856.421875 500x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,856.421875 500x0]
|
||||
PaintableBox (Box<DIV>) [8,856.421875 500x150]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,856.421875 300x150]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,856.421875 300x0]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,856.421875 300x150]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,1006.421875 300x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,1006.421875 500x0]
|
||||
PaintableBox (Box<DIV>) [8,1006.421875 500x8]
|
||||
ImagePaintable (ImageBox<IMG>) [8,1006.421875 8x8]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,1014.421875 500x0]
|
||||
83
Tests/LibWeb/Layout/input/flex/flex-optimization-cases.html
Normal file
83
Tests/LibWeb/Layout/input/flex/flex-optimization-cases.html
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<style>
|
||||
* {
|
||||
outline: 1px solid black;
|
||||
}
|
||||
body {
|
||||
width: 500px;
|
||||
height: 2000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div style="background: rgba(255, 0, 0, 0.2);">abcdefghij</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div style="width: 0; background: rgba(0, 255, 0, 0.2);">abcdefghij</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div style="background: rgba(0, 0, 255, 0.2);">
|
||||
<span style="display: inline-block; width: 100px;">x</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div style="width: min-content; background: rgba(255, 255, 0, 0.2);">longwordlongwordlongword</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<div style="background: rgba(0, 255, 255, 0.2);">
|
||||
<div style="height: 200px; background: rgba(255, 0, 255, 0.2);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div style="flex: 1 1 auto; background: rgba(192, 0, 0, 0.2);">abcdefghij</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII"
|
||||
style="flex-basis: auto; background: rgba(0, 192, 0, 0.2);">
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap; width: 100px;">
|
||||
<div style="flex-basis: auto; background: rgba(0, 0, 192, 0.2);">longwordlongwordlongword</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div style="aspect-ratio: 2 / 1; background: rgba(192, 192, 0, 0.2);">hello</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div style="aspect-ratio: 2 / 1; width: 200px; background: rgba(0, 192, 192, 0.2);"></div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div style="aspect-ratio: 1 / 1; background: rgba(192, 0, 192, 0.2);">
|
||||
<div style="height: 100px; background: rgba(128, 0, 0, 0.2);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<div style="overflow: hidden; background: rgba(0, 128, 0, 0.2);">
|
||||
<div style="height: 120px; background: rgba(0, 0, 128, 0.2);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<div style="overflow: auto; background: rgba(128, 128, 0, 0.2);">
|
||||
<div style="height: 300px; background: rgba(0, 128, 128, 0.2);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div style="overflow: scroll; background: rgba(128, 0, 128, 0.2);">
|
||||
<div style="width: 300px; height: 150px; background: rgba(64, 0, 0, 0.2);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII"
|
||||
style="aspect-ratio: 1 / 1; background: rgba(0, 64, 0, 0.2);">
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue