diff options
| author | Andreas Kling <kling@serenityos.org> | 2023-04-17 17:31:18 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-04-17 18:22:53 +0200 |
| commit | c710575f886dbca9fed966edf35ed53d400f8189 (patch) | |
| tree | 27d6b734511624aee795088749c55b806f8089fe /Tests/LibWeb/Layout | |
| parent | 7f79208759f7b788cde8aeeeec4ff0cdb34171db (diff) | |
| download | serenity-c710575f886dbca9fed966edf35ed53d400f8189.zip | |
LibWeb: Honor box-sizing in flex item "specified size suggestion"
Although the spec doesn't mention it, if a flex item has box-sizing:
border-box, and the specified size suggestion is a definite size, we
have to subtract the borders and padding from the size before using it.
This fixes an issue seen in "This Week in Ladybird #4" where the
screenshots ended up in one long vertical stack instead of paired up
2 by 2.
Diffstat (limited to 'Tests/LibWeb/Layout')
2 files changed, 26 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/expected/flex/specified-size-suggestion-with-box-sizing-border-box.txt b/Tests/LibWeb/Layout/expected/flex/specified-size-suggestion-with-box-sizing-border-box.txt new file mode 100644 index 0000000000..c41d592c1c --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/specified-size-suggestion-with-box-sizing-border-box.txt @@ -0,0 +1,5 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer <html> at (0,0) content-size 800x100 children: not-inline + Box <body> at (0,0) content-size 800x100 flex-container(row) children: not-inline + ImageBox <img> at (0,0) content-size 400x100 flex-item children: not-inline + ImageBox <img.padded> at (600,0) content-size 200x100 flex-item children: not-inline diff --git a/Tests/LibWeb/Layout/input/flex/specified-size-suggestion-with-box-sizing-border-box.html b/Tests/LibWeb/Layout/input/flex/specified-size-suggestion-with-box-sizing-border-box.html new file mode 100644 index 0000000000..0d8afc1230 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/specified-size-suggestion-with-box-sizing-border-box.html @@ -0,0 +1,21 @@ +<!doctype html><style> + * { + margin: 0; + padding: 0; + box-sizing: border-box; + font: 16px SerenitySans; + } + body { + width: 800px; + display: flex; + flex-wrap: wrap; + } + img { + width: 50%; + height: 100px; + background: pink; + } + .padded { + padding-left: 200px; + } +</style><body><img><img class="padded" alt="hello this text is here to make the img have a wide intrinsic size" />
\ No newline at end of file |