RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 17:37:34 +00:00
Code Issues Activity Actions

LibWeb: Obey CSS aspect-ratio property during layout

Browse source 
Calculate a "preferred aspect ratio" based on the value of
`aspect-ratio` and the presence of a natural aspect ratio, and use that
in layout.

This is by no means complete or perfect, but we do now apply the given
aspect-ratio to things.

The spec is a bit vague, just saying to calculate sizes for
aspect-ratio'ed boxes the same as you would for replaced elements. My
naive solution here is to find everywhere we were checking for a
ReplacedBox, and then also accept a regular Box with a preferred aspect
ratio. This gets us pretty far. :^)

https://www.w3.org/TR/css-sizing-4/#aspect-ratio-minimum is not at all
implemented.
This commit is contained in:
Sam Atkins 2023-06-08 16:47:50 +01:00 • committed by Andreas Kling
parent 84e7216603
commit 1051624084
14 changed files with 131 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

7
Tests/LibWeb/Layout/input/aspect-ratio-auto-and-ratio.html Normal file
View file

@ -0,0 +1,7 @@
<!doctype html><style>
div, img {
width: 200px;
aspect-ratio: auto 2/1;
border: 1px solid black;
}
</style><div></div><img src="120.png"/>

7
Tests/LibWeb/Layout/input/aspect-ratio-auto.html Normal file
View file

@ -0,0 +1,7 @@
<!doctype html><style>
div, img {
width: 200px;
aspect-ratio: auto;
border: 1px solid black;
}
</style><div></div><img src="120.png"/>

7
Tests/LibWeb/Layout/input/aspect-ratio-ratio.html Normal file
View file

@ -0,0 +1,7 @@
<!doctype html><style>
div, img {
width: 200px;
aspect-ratio: 2/1;
border: 1px solid black;
}
</style><div></div><img src="120.png"/>