The Acid1 test has a bit of an unusual background - the html and body
tags have different background colors. Our painting order of the DOM was
such that the body background was painted first, then all other elements
were painted in-phase according to Appendix E of CSS 2.1. So the html
element's background color was painted over the body background.
This removes the special handling of the body background from
InitialContainingBlockBox and now all boxes are painted in-phase. Doing
this also exposed that we weren't handling Section 2.11.2 of the spec;
when the html background is unset, the body's background should be
propagated to the html element.
The ListItemMarker gets its index 1-based while the
String::bijective_base_from expects its index to be 0-based. This patch
adjusts the index passed around accordingly.
Previously they were positioned with a fixed offset. However this lead
to wider markers with more than one character to collide with the
element itself.
Now the ListItemMarkerBox generates and stores the appropriate String
in its constructor and sets its own width according to that.
The ListItemBox then lays out the Marker taking this width into
account.
This also made the painting a lot easier since we don't generate the
needed Strings every time we repaint, just once.
Why exactly the linter didn't whine about this is a mystery. These
constants aren't needed anymore since the functionality moved to
AK/String a while ago.
When computing the y-position of a clearing element, use the height of
the border box of the associated floating elements.
This also extracts this block of code to a helper lambda since it is
used twice.
Previously, the method for computing the height of absolutely positioned
replaced elements only invoked the method for non-replaced elements.
That method is now implemented fully enough that it sometimes computed a
height of 0 for replaced elements. This implements section 10.6.5 rule 1
of the CSS spec to avoid that behavior.
This commit unifies methods and method/param names between the above
classes, as well as adds [[nodiscard]] and ALWAYS_INLINE where
appropriate. It also renamed the various move_by methods to
translate_by, as that more closely matches the transformation
terminology.
Now we use min-height for calculating the height of block boxes.
Besides, now we check if min-height/max-height are percentage values
and don't use them if parent's height isn't explicitly set (CSS 2.1
section 10.7).
Now we set margins, borders and paddings for floating boxes and include
them into calculating floating box positions by using margin_box() and
margin_box_as_relative_rect().
This allows us to convert a number to a String given a bijective
(zero-less) alphabet.
So you count A,B,C,...,Y,Z,AA,AB,...
This was surprisingly very tricky!
This allows the ListItemMarker to be displayed with different (simple)
alphabets in the future.
This doesn't exactly do what you would think from its name: It surely
adds an extra leading zero to the front of a number, but only if the
number is less than 10. CSS is weird sometimes.
Creating a ChunkIterator allows you to iterate over the text in a
Layout::TextNode at your leisure by calling next() when you want
another chunk.
This is one of many steps towards improving inline layout.
Height computation algorithm is actually
different for absolutely positioned boxes
and block formatting contexts (where it doesn't include floats)
Fixes#6408
SPDX License Identifiers are a more compact / standardized
way of representing file license information.
See: https://spdx.dev/resources/use/#identifiers
This was done with the `ambr` search and replace tool.
ambr --no-parent-ignore --key-from-file --rep-from-file key.txt rep.txt *
In the ListItemMarkerBox render the correct thing when painting.
This covers decimal counting for ordered lists as well as square,
disc, and circle for unordered lists. Thus all currently supported
list-style-types are displayed correctly.
This closes#2059
As well as correctly calculating the height of TableRowBox, this change
calculates the heights of TableRowGroupBoxs also.
As before, this does not correctly take into consideration the 'height'
attribute.
Now the horizontal layout is approximately correct for the
TableRowGroupBoxs we can now see that the `layout_row` method will need
updating to correctly calculate cell width across all rows, not just the
current TableRowGroupBox.
As the spec for the table fixup algorythm says:
> Treat table-row-groups in this spec also encompass the specialized
> table-header-groups and table-footer-groups.
This commit fixes algorithm for computing auto height (CSS 2.2 10.6.7)
by including floating boxes into computation and implements one of the cases
for computing the height of absolutely positioned, non-replaced elements (10.6.4 rule 3)
The bullet point should not be centered in the height of the list item,
but rather stay in front of the first line.
So, instead of giving the marker the full height of the ListItemBox,
it gets the height of a single line.
This closes#6384
This is because it includes the initial node that the function was
called on, which makes it "inclusive" as according to the spec.
This is important as there are non-inclusive variants, particularly
used in the node mutation algorithms.
The background-repeat value may be specified as either one- or two-value
identifiers (to be interpreted as horizontal and vertical repeat). This
adds two pseudo-properties, background-repeat-x and background-repeat-y,
to handle this. One-value identifiers are mapped to two-value in
accordance with the spec.
For now, painting of background color is kept separate. The ICB needs to
perform a "translate" call between painting the color and background,
whereas other divs must not make that call.
This also adds an API to Label to determine if the Label itself or its
child TextNode is hovered. This allows ButtonBox to render in a hovered
state when the label is hovered.
A label's format is: <label>Label text</label>
So, a TextNode is created as a child of the Label node, and EventHandler
will send events to the TextNode. This changes TextNode to accept mouse
events if its parent is a Label, and to forward those events upward.
The HTML <label> element is special in that it may be associated with
some other <input> element. When the label element is clicked, the input
element should be activated.
To achieve this, a LableableNode base class is introduced to provide an
interface for "labelable" elements to handle mouse events on their
associated labels. This not only allows clicking the label to activate
the input, but dragging the mouse from the label to the input (and vice-
versa) while the mouse is clicked will also active the label.
As of this commit, this infrastructure is not hooked up to any elements.
For example:
<div>
<input type=radio name=group value=item1 />
</div>
<div>
<input type=radio name=group value=item2 />
</div>
Is a valid DOM and clicking on of these radio buttons should uncheck
the other.
Update the painting of background images for both <body> nodes and other
non-initial nodes. Currently, only the following values are supported:
repeat, repeat-x, repeat-y, no-repeat
This also doesn't support the two-value syntax which allows for setting
horizontal and vertical repetition separately.
This is required for the block formatting context to know the height of
the <br> element while computing the height of its parent. Specifically,
this comes into play when the <br> element is the first or last child of
its parent. In that case, it previously would not have any fragments, so
BlockFormattingContext::compute_auto_height_for_block_level_element
would infer its top and bottom positions to be 0.
Turns out compute_position should be invoked before placing the element
in normal flow. Otherwise, the position isn't set on the first layout.
The effect was that the block would "jump" into place on a secondary
layout.
This is a follow-up to commit:
deda7c8995
Section 10.3 "Calculating widths and margins" indicates that the 'left'
and 'right' properties of relatively positioned elements should be set
in accordance with the rules of section 9.4.3.
