mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 17:37:34 +00:00
LibWeb: Obey CSS aspect-ratio property during layout
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:
parent
84e7216603
commit
1051624084
14 changed files with 131 additions and 55 deletions
|
@ -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
7
Tests/LibWeb/Layout/input/aspect-ratio-auto.html
Normal 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
7
Tests/LibWeb/Layout/input/aspect-ratio-ratio.html
Normal 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"/>
|
Loading…
Add table
Add a link
Reference in a new issue