This is rather subtle and points to our architecture around definite
sizes not being exactly right, but...
At some points during flexbox layout, the spec tells us that the sizes
of certain flex items are considered definite from this point on.
We implement this by marking each item's associated UsedValues as
"has-definite-width/height".
However, this breaks code that tries to resolve computed "auto" sizes
by taking the corresponding size from the containing block. The end
result was that the 1st sizing pass in flexbox would find the right size
for an "auto" sized item, but the 2nd pass would override the correct
size with the containing block's content size in that axis instead.
To work around the issue, FFC now remembers when it "definitizes" an
item, and future attempts to resolve an "auto" computed size for that
value will bypass the computed-auto-is-resolved-against-containing-block
step of the algorithm. It's not perfect, and we'll need to think more
about how to really represent these intermediate states relating to
box sizes being definite..
By asking if the value *contains* a percentage rather than whether it
*is* one, we cover many more cases where e.g `width: calc(100% - 10px)`
should be "treated as auto" etc.
Values that contain percentages require special treatment in various
parts of layout. Previously we had no way of peeking into calc() values
to see if their expression contains one or more percentages. That's the
bulk of what we're adding here.
This partially adds serialization code for
`CSSFontFaceRule::serialized()` to spec. This is only partially
implemented as some parts of the `@font-face` rule are not implemented
yet.
Now that the positions of each grid item have been calculated, and the
sizes of the individual rows and columns ascertained, can actually
layout the different items.
According to the spec it's necessary to:
1. Layout the cells in the grid
2. Find the sizes of the rows and columns
Since I had started to do this backwards, and as I expand in future
commits, I take here the opportunity to start with a clean state.
The occupation_grid keeps track of which cells in the grid have been
filled out.
Often in the spec they talk about intrinsic_track_sizes and this way can
have a clearer way of checking if a GridTrackSize is indeed an
"intrinsic track size".
Makes it more convenient to create auto GridTrackSizes. I think having
an auto GridTrackSize be defined by an auto Length value kind of
confusing, and this at least helps when creating one.
To follow spec more closely, only set the has_span value if there is a
number immediately following, like "span 2". Otherwise the span value
should be ignored.
Use float instead of int for the GridTrackSize length value as
FlexibleLengths can be "1fr" as well as ".49fr" in grid-track-row
and grid-track-column values.
Before this change, we'd always insert one line box fragment, even when
a float was taking up too much space on the line, and the fragment
didn't actually fit.
We now perform line breaks until we have enough space between floats.
This fixes many page layouts where we'd previously see small fragments
of inline content outside the right edge of the containing block.
Not visiting the field holding SubtleCrypto in Crypto caused subtle
crashes all over the Value functions, due to accessing SubtleCrypto
after it was garbage collected (and potentially replaced by a new cell).
This meant that the crashes were only appearing in Value::to_boolean,
Value::typeof, etc. Which then held pointer to things that looked like
Shapes, Environments and other non-Object Cells.
To find the actual cause, all pointer used to construct Values were
checked and if a pointer was none of the allowed types, the backtrace
is logged.
Co-authored-by: Luke Wilde <lukew@serenityos.org>
This patch makes use of helpers implemented for window.length to resolve
two FIXMEs in WindowProxy previously simply assuming no child browsing
contexts :^)
If the containing block has indefinite height, we can't resolve
percentage heights against it. Instead of treating it as 0 by accident,
let's treat it as "auto" on purpose.
This brings back the cheek borders on Acid2.
When querying the HTML element (in strict mode) or the BODY element
(in quirks mode), we return the viewport dimensions.
Layout doesn't change the size of the viewport, so we can actually
reorder the steps here and avoid performing layout in some cases.
This removes a bunch of synchronous layouts on pages with reCAPTCHA.
Let's make 16px the default font size instead of 10px. This makes our
layout results match those of other engines in many more cases.
Also make the h1-h6 element styles use relative (em) font sizes, also
matching other browsers.
Instead of hard-coding the names of system fonts to use for the CSS
generic fonts (like "sans-serif", "monospace", etc.) we now call out
to a Platform::FontPlugin and ask for the generic names.
We didn't set their display at all before, and since CSS display is not
inherited, anonymous block wrappers were actually "display: inline", but
it kinda worked anyway because we positioned blocks based on their C++
class (BlockContainer) rather than their CSS display value.
Now that we position based on CSS display value, this broke positioning
of anonymous wrapper blocks, and this fixes that.
Before this change, block-level boxes were laid out vertically by
placing them after the nearest previous BlockContainer sibling. This
only worked if the preceding block-level box happened to be a
BlockContainer.
This fixes an issue where the screenshot on netsurf-browser.org was not
being laid out properly (it was `img { display: block }` which creates
a block-level ImageBox, and ImageBox is not a BlockContainer but a
ReplacedBox, so the following block-level box was skipping over the
ImageBox and being placed next to whatever was before the ImageBox..)
