You can now cycle through focusable elements (currently only hyperlinks
are focusable) with the Tab key.
The focus outline is rendered in a new FocusOutline paint phase.
The text cursor follows slightly different "intuitive" rules than the
regular hit testing. Clicking past the right edge of a text box should
still "hit" the text box, and place the cursor at its end, for example.
We solve this by adding a HitTestType enum that is passed to hit_test()
and determines whether past-the-edge candidates are considered.
Const pointers into the DOM was a nice idea, but in practice, there are
too many situations where the layout tree wants to some non-const thing
to the DOM.
LibWeb keeps growing and the Web namespace is filling up fast.
Let's put DOM stuff into Web::DOM, just like we already started doing
with SVG stuff in Web::SVG.
We now remember the last candidate fragment when hit testing past the
right end of text and use that as the fallback result if nothing else
matches. This makes it possible to drag-select outside the line boxes
in a way that feels mostly natural. :^)
Sometimes people make tables with a specific width. In those cases,
we can't just use the auto-sizing algorithm, but instead have to
respect whatever width the content specifies.
This is a bit rickety right now, since we don't implement generation
of anonymous table boxes.
The basic mechanism here is that block layout (which table-cell uses)
now has a virtual way of asking for the width of the logical containing
block. This is necessary as table-row does not produce a block-level
element and so was previously unable to provide a containing block
width for table-cell layout.
If the table has a non-auto specified width, we now interpret that as
a request to use fixed table layout. This will evolve over time. :^)
Margin collapsing is a bit confusing, but if I understand correctly,
when collapsing a box's top margin with the vertically adjacent
sibling box above, we should "skip over" empty (0-height) boxes and
collapse their margin with *their* vertically adjacent sibling box
above, etc. Iterating until we hit the first non-empty in-flow block.
This pulls up the bottom part of the face on ACID2. :^)
We could previously place a box next to a preceding sibling with
position:fixed, which is wrong since fixed-position elements are taken
out of the normal flow.
Sometimes we end up with an empty line box at the bottom of a block.
Instead of worrying about this in all the places we split into lines,
just remove the trailing box (if any) after splitting is finshed.
To make this possible, I also had to give each LayoutNode a Document&
so it can resolve document-specific colors correctly. There's probably
ways to avoid having this extra member by resolving colors later, but
this works for now.
This patch also adds the ability for Length to contain percentage
values. This is a little off-spec, but will make storing and dealing
with lengths a lot easier.
To resolve a Length to a px-or-auto Length, there are now helpers
for that. After calling them, you no longer have to think about
em, rem, %, and such things.
This avoids having to query the StyleProperties hash map whenever we
need to know if an element is absolutely positioned. This was extremely
hot in interactive window resize profiles.
In this case, we need to undo the right-side offsetting, since the
width computation algorithm will already have stretched the width to
accomodate both the side constraints.
Previously we would always just use the combined content width as the
shrunken width in shrink-to-fit width calculations, but if the element
has a non-auto specified width, we should just let that take over.
This is far from perfect and doesn't take stuff like min/max-width
into account. Will need more work, this just covers the basic case.
"Paint" matches what we call this in the rest of the system. Let's not
confuse things by mixing paint/render/draw all the time. I'm guilty of
this in more places..
Also rename RenderingContext => PaintContext.
The shrink-to-fit width algorithm actually works a little bit different
in the absolute positioning context, so it can't share all of its code
with non-absolute positioning.
Also, inline-block elements were always inserting unnecessary line
breaks when splitting, which caused the preferred width to be smaller
than it should be. This patch fixes that as well, by just not breaking
after inline-block elements in LayoutMode::OnlyRequiredLineBreaks.
CSS defines a very specific paint order. This patch starts steering us
towards respecting that by introducing the PaintPhase enum with values:
- Background
- Border
- Foreground
- Overlay (internal overlays used by inspector)
Basically, to get the right visual result, we have to render the page
multiple times, going one phase at a time.
Hey, why not. We did all the hard work for display:inline-block already
and now we can just allow this.
This makes <a><h1>Hello friends!</h1></a> work :^)
Previously, layout recursively performed these steps (roughly):
1. Compute own width
2. Compute own position
3. Layout in-flow children
4. Compute own height
5. Layout absolutely positioned descendants
However, step (2) was pretty inconsistent. Some things computed their
own position, others had their parent do it for them, etc.
To get closer to CSS spec language, and make things easier in general,
this patch reorganizes the algorithm into:
1. Compute own width & height
2. Compute width & height of in-flow managed descendants
3. Move in-flow managed descendants to their final position
4. Layout absolutely positioned descendants
Block layout is now driven by the containing block, which will iterate
the descendants it's responsible for. There are a lot of inefficient
patterns in this logic right now, but they can easily be replaced with
better iteration functions once we settle on a long-term architecture.
Since the ICB (LayoutDocument) is at (0, 0), it doesn't rely on a
containing block to move it into place.
This code is still evolving along with my understanding of CSS layout,
so it's likely that we'll reorganize this again sooner or later. :^)
To get the expected behavior for <center>, we needed a special text
alignment mode that centers block-level elements (and not just line
box fragments.)
Skip over absolutely positioned children when laying out the inline
children of a block. This takes them out of the flow and allows them
to be positioned correctly relative to the (absolute) containing block.
Fixed position elements have the ICB as their containing block.
The magic of fixed positioning is implemented at the rendering stage,
where we temporarily translate painting by the current scroll offset.
Note that "absolutely positioned" includes both position:absolute
and position:fixed.
