Our current text iterator is not aware of multi-code point graphemes.
Instead of simply incrementing an iterator one code point at a time, use
our Unicode grapheme segmenter to break text into fragments.
(cherry picked from commit f0105b473b9cc3446ec36359b559db9a8e78446d;
amended as usual for Unicode::Segmenter -> Locale::Segmenter, and to
tweak expected/multi-code-point-graphemes.txt for serenity's superior
emoji glyphs)
This condition was included to implement flex containers with auto
height, but it actually can reset the definitive height to 0 for inline
blocks with only replaced elements such as an SVG. Removing the
condition does not break any in-tree test, so let's improve the
situation on the SVG side of things for now.
(cherry picked from commit 352a66390f27fb7bbbfa823364fefc9af00d4b63)
It's possible to resolve box's height without doing inner layout, when
computed value is not auto. Doing that fixes height resolution, when box
with percentage height has containing block with percentage height.
Before:
- resolve used width
- layout box's content
- resolve height
After:
- resolve used width
- resolve height if treated as not auto
- layout box's content
- resolve height if treated as auto
(cherry picked from commit 9098e39a43313e26023daeedc1dfee7e754ba8f3)
We were already allowing intrinsic height layout to see definite widths,
and I can't think of a reason *not* to allow it the other way around.
More importantly, this fixes an issue where things with an aspect ratio
didn't have a height to resolve against before.
Makes the logo show up on https://basecamp.com/ :^)
(cherry picked from commit 077bc68a4cbf2d8c97abc818515a22471da42c99)
When a block container has `clear` set and some clearance is applied,
that clearance prevents margins from adjoining and therefore resets
the margin state. But when a floating box has `clear` set, that
clearance only goes between floating boxes so should not reset margin
state. BlockFormattingContexts already do that correctly, and this PR
changes InlineFormattingContext to do the same.
Fixes#1462; adds reduced input from that issue as test.
(cherry picked from commit 9075f64cacabe7f548481cf63dbaa3e532d93574)
Before this change, we transferred the input element's line-height to
both the editable text *and* the placeholder. This caused some strange
doubling of the effective line-height when the editable text was empty,
pushing down the placeholder.
(cherry picked from commit 13ba491924c4fc3831d5a8986673d832a721f545;
amended some slighly different horizontal sizes in the expectations
file. Maybe due to serenity not using harfbuzz for shaping, or due
to not have another earlier change yet. If it's the latter, this will
fix itself when that's brought in.)
Append text chunks to either the start or end of the text fragment,
depending on the text direction. The direction is determined by what
script its code points are from.
(cherry picked from commit 11e7d72686d86b3e900c0e9ab76e75d3922f06d3;
amended to minorly tweak dimensions in expected files due to serenity
not using harfbuzz for text shaping)
This means that an `<input type=password>` will show the correct number
of *s in it when non-ASCII characters are entered.
We also don't need to perform text-transform on these as that doesn't
affect the output length, so I've moved it earlier.
(cherry picked from commit c747b1c6b56156b5797fad0d8d95164f415c8b25;
amended to slightly adjust some BlockContainer and PaintableWithLines
widths, since serenity does not use harfbuzz for text shaping)
On any `display: list-item` Node a CSS pseudo element (`::marker`) needs
to be created. This commit allows the ::maker pseudo element to be
nested within other pseudo elements (e. g. ::before or ::after).
This fixes this WPT test:
http://wpt.live/css/CSS2/generated-content/after-content-display-003.xht
(cherry picked from commit 15d2857a01b5bda90ace3d02cf9e1bc8ce279d38)
When aspect-ratio is degenerate (e.g. 0/1 or 1/0) we should
fallback to the same behaviour as `aspect-ratio: auto` according to spec
This commit explicitly handles this case and fixes five WPT test in
css/css-sizing/aspect-ratio (zero-or-infinity-[006-010])
(cherry picked from commit c6f77f4818a03411c14d9e60b743a7541a8280f6)
This fixes an issue where https://hey.com/ was horizontally scrollable
even though it shouldn't be.
(cherry picked from commit 94721385ceb17e20428b94a946d39828bdd5b74e)
This ensures the HTML parser completes running if it previously stopped
at an insertion point during a call to `document.write`.
(cherry picked from commit 230314238655204b89dd0736da4537b475eb252a)
This is what the spec tells us to do:
The root element’s display type is always blockified,
and its principal box always establishes an independent
formatting context.
Additionally, a display of contents computes to block
on the root element.
Spec link: https://drafts.csswg.org/css-display/#rootFixes#1562
(cherry picked from commit f1be662f683155705f851bcf440fe30d0e606a87)
Currently we are crashing in `verify_cast<BlockContainer>(box)` on
attempt to create BFC for SVG box.
(cherry picked from commit fa907029ee6f202095011b84b109bc4a2b56c58b)
We were incorrectly looking at the CSS computed values for width and
height to determine the natural size of <svg> root elements.
This meant that elements where the attribute and computed value were
different values would end up with incorrect natural size.
(cherry picked from commit 8eacfc8f10256f29fed0405a6bf1cb95e73b9bef)
Fixes implementation of the following line from the spec:
"However, limit the growth of any fit-content() tracks by their
fit-content() argument."
Now we correctly apply a limit to increased growth limit rather than to
the planned increase.
Change in "Tests/LibWeb/Layout/input/grid/fit-content-2.html" is a
progression and "Item as wide as the content." is actually as wide as a
content.
(cherry picked from commit 07aa25ce5095521437889079e511f6885684a762)
When deciding if the grid containers min size should be limited by a
max size. Check for a max height or width depending on the dimension,
instead of just always checking for a max width.
(cherry picked from commit ef037b4152f96d88380005625b8d66761923b7ba)
Implements:
"If the product of the hypothetical fr size and a flexible track’s flex
factor is less than the track’s base size, restart this algorithm
treating all such tracks as inflexible."
Fixes https://github.com/LadybirdBrowser/ladybird/issues/1211
(cherry picked from commit 7b2042571bf42d140bafb5e771c5bbadbcca2e9d)
This appears to have been a bug in the spec which was later corrected -
so to fix the crash we can simply remove this assertion.
Fixes: #868
(cherry picked from commit 07940a89cad5ecfa21c2d1d8e055941bdb097ef9)
None of HTML event loop processing steps are relevant for decoded SVGs,
so we can simply skip them while collecting documents for processing.
(cherry picked from commit c87214d79cf834ee9b7b4da65e902e5233c0a5cc)
When the flex container is sized under a min-content constraint in the
main axis, any flex items with a percentage main size should collapse
to zero width, not take up their own intrinsic min-content size.
This is not in the spec, but matches how other browsers behave.
Fixes an issue where the cartoons on https://basecamp.com/ were way
too large. :^)
(cherry picked from commit 59ed823724331d6457e81f8674aef392ca4dc174)
Reverse the order of flex lines, when the `flex-wrap` property is set to
`wrap-reverse`. This will also swap the cross-start and cross-end
directions.
(cherry picked from commit 46649fbe1b015a7f4bfad4e059ecaf3c513f3a26)
When a flex container with a reverse `flex-direction` is wrapped. Only
each line should be reversed, not all items.
(cherry picked from commit e2c1fe7255c84ad1ee172765ef9f107949117098)
When determining the intrinsic cross size contribution of a flex item
with a preferred aspect ratio, we have to account for any min/max
constraints in the main axis.
(cherry picked from commit bde2d3dc7b359cd4f56ad9975c44d22e43ef82fe)
In calculating the base size of a flex item, we have a piece of ad-hoc
code that deals with an item that does have an instrinsic aspect ratio,
but not a cross size to resolve that ratio against. In determining the
actual flex item size however, we also take into account the minimum
content width and height, which assumes the box' intrinsic width or
height when available. This would break having an image as a flex item,
which gets stretched to its maximum size within the flex container
instead of the flex item being shrunk to the instrinsic size of the
image.
Fix this by only stretching flex items that do not have an instrinsic
width nor height set.
(cherry picked from commit 7a783d3a89aec0caaa63a483c855fe921b6d0984)
Per css-ui-4, setting `appearance: none` is supposed to suppress the
creation of a native-looking widget for stuff like checkboxes, radio
buttons, etc.
This patch implements this behavior by simply falling back to creating
a layout node based on the CSS `display` property in such cases.
This fixes an issue on the hey.com imbox page where we were rendering
checkboxes on top of sender profile photos.
(cherry picked from commit 58c523ae46af90ab17d6b98966d97fa776ae2bf4)
This allows us to run the WPT tests under quirks/unitless-length/
without crashing, giving us over 4600 new passing subtests. :^)
(cherry picked from commit 5df6c6eecff678bf2a1fe8960149302d42015439)
This allows us to progress further on this WPT test:
https://wpt.live/quirks/unitless-length/quirks.html
...although it still crashes before finishing.
(cherry picked from commit 5e240f997caa8b62275d3c5d18a1cf1885349971)
Function is defined as `round(<rounding-strategy>?, A, B?)`
With this change resolved type is `typeof(resolve(A))`, instead of
`typeof(A)`.
For example `round(up, 20%, 1px)` with 200px percentage basis is now
correctly resolved in 40px instead of 40%.
Progress on https://www.notion.so/ landing page.
(cherry picked from commit 41e37f00795920686fad7b211381905618fb345a)
According to https://www.w3.org/TR/css-grid-2/#placement-shorthands
when setting the 'grid-row' and 'grid-column' shorthand property to a
single <custom-ident> value, both 'grid-row-start'/'grid-column-start'
and 'grid-row-end'/'grid-column-end' should be set to that
<custom_ident>.
(cherry picked from commit 3e92ec80f3873bb81cbc8b0dc93bb3a6a145172c)
The `start` and `end` value set the text alignment based on the computed
value of `direction`. The default value of `text-align` is now `start`
instead of `left`.
(cherry picked from commit 1537d589ca4908c3631dc38e66c97fd37fa2f526)
Adds additional padding to the end-side of the scrollable overflow
rectangle as necessary to enable a scroll position that satisfies
the requirements of `place-content: end` alignment.
(cherry picked from commit 963cf1c2c4e4b1cd482c41d6f673b7207bbcc067)
These let you format counters' current values as strings for use in
generated content.
(cherry picked from commit 898e3bd89878ddb87df06e056031673dc770be2b)
This code previously only allocated enough space in
m_col_elements_by_index for 1 slot per column, meaning that columns
with a span > 1 would write off the end of it.
(cherry picked from commit 9e32c9329acd89d73eeff3494a5e728077962513)
We now follow the rules from the spec more closely, along with an
unspecified quirk for when the offsetParent is a non-positioned body
element. (Spec bug linked in a comment.)
This fixes a whole bunch of css-flexbox tests on WPT, which already had
correct layout, but the reported metrics from JS API were wrong.
(cherry picked from commit d49ae5af32044cb83bc14073b92676a1662c3bc1)
The :host family of pseudo class selectors select the shadow host
element when matching against a rule from within the element's shadow
tree.
This is a bit convoluted due to the fact that the document-level
StyleComputer keeps track of *all* style rules, and not just the
document-level ones.
In the future, we should refactor style storage so that shadow roots
have their own style scope, and we can simplify a lot of this.
(cherry picked from commit 4c326fc5f6f64797764e7f32a9789b74665f2fec)
