summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authormatcool <26722564+matcool@users.noreply.github.com>2023-04-03 18:26:13 -0300
committerAndreas Kling <kling@serenityos.org>2023-04-05 16:23:56 +0200
commitcc33a57620574658425f240c715f2107c6d02433 (patch)
tree476b4e8e20a21e5e46aafc7b676e2d3013f3e1aa
parent9b4b12f133850dcc3b3c27c240dabbe1faefd17f (diff)
downloadserenity-cc33a57620574658425f240c715f2107c6d02433.zip
LibWeb: Use intrinsic aspect ratio when calculating max content height
-rw-r--r--Tests/LibWeb/Layout/expected/flex-item-on-row-with-intrinsic-aspect-ratio.txt4
-rw-r--r--Tests/LibWeb/Layout/input/flex-item-on-row-with-intrinsic-aspect-ratio.html12
-rw-r--r--Userland/Libraries/LibWeb/Layout/FormattingContext.cpp3
3 files changed, 19 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/expected/flex-item-on-row-with-intrinsic-aspect-ratio.txt b/Tests/LibWeb/Layout/expected/flex-item-on-row-with-intrinsic-aspect-ratio.txt
new file mode 100644
index 0000000000..6da0287415
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-item-on-row-with-intrinsic-aspect-ratio.txt
@@ -0,0 +1,4 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+ BlockContainer <html> at (0,0) content-size 800x200 children: not-inline
+ Box <body> at (0,0) content-size 800x200 flex-container(row) children: not-inline
+ ImageBox <img> at (0,0) content-size 400x200 flex-item children: not-inline
diff --git a/Tests/LibWeb/Layout/input/flex-item-on-row-with-intrinsic-aspect-ratio.html b/Tests/LibWeb/Layout/input/flex-item-on-row-with-intrinsic-aspect-ratio.html
new file mode 100644
index 0000000000..ed59d6391e
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-item-on-row-with-intrinsic-aspect-ratio.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html><html><head><style>
+ * {
+ margin: 0;
+ padding: 0;
+ }
+ body {
+ display: flex;
+ }
+ img {
+ width: 400px;
+ }
+</style></head><body><img src="data:image/png;base64,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rDWw4f9TYqar07wWc60Y6bIy+eVlRsvz8zgci/lkzY+BMyxAsAAEC0CwAMECECwAwQK2E3tYgDMsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAAwfInAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAEC2i8fwDFkO6lWFprKQAAAABJRU5ErkJggg=="> \ No newline at end of file
diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
index 803b051940..421643823e 100644
--- a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
@@ -1205,6 +1205,9 @@ CSSPixels FormattingContext::calculate_min_content_height(Layout::Box const& box
CSSPixels FormattingContext::calculate_max_content_height(Layout::Box const& box, AvailableSize const& available_width) const
{
+ if (box.has_intrinsic_aspect_ratio() && available_width.is_definite())
+ return available_width.to_px() / *box.intrinsic_aspect_ratio();
+
if (box.has_intrinsic_height())
return *box.intrinsic_height();