RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-28 02:47: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

9
Tests/LibWeb/Layout/expected/aspect-ratio-auto-and-ratio.txt Normal file
View file

@ -0,0 +1,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x320 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x304 children: not-inline
BlockContainer <div> at (9,9) content-size 200x100 children: not-inline
BlockContainer <(anonymous)> at (8,110) content-size 784x202 children: inline
line 0 width: 202, height: 202, bottom: 202, baseline: 202
frag 0 from ImageBox start: 0, length: 0, rect: [9,111 200x200]
ImageBox <img> at (9,111) content-size 200x200 children: not-inline
TextNode <#text>

9
Tests/LibWeb/Layout/expected/aspect-ratio-auto.txt Normal file
View file

@ -0,0 +1,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x220 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x204 children: not-inline
BlockContainer <div> at (9,9) content-size 200x0 children: not-inline
BlockContainer <(anonymous)> at (8,10) content-size 784x202 children: inline
line 0 width: 202, height: 202, bottom: 202, baseline: 202
frag 0 from ImageBox start: 0, length: 0, rect: [9,11 200x200]
ImageBox <img> at (9,11) content-size 200x200 children: not-inline
TextNode <#text>

9
Tests/LibWeb/Layout/expected/aspect-ratio-ratio.txt Normal file
View file

@ -0,0 +1,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x220 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x204 children: not-inline
BlockContainer <div> at (9,9) content-size 200x100 children: not-inline
BlockContainer <(anonymous)> at (8,110) content-size 784x102 children: inline
line 0 width: 202, height: 102, bottom: 102, baseline: 102
frag 0 from ImageBox start: 0, length: 0, rect: [9,111 200x100]
ImageBox <img> at (9,111) content-size 200x100 children: not-inline
TextNode <#text>