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)
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)
This is the expected behavior per the HTML spec. Fixes an issue where
styling these elements wouldn't have the expected effect unless you also
set the display property.
(cherry picked from commit 3faff34bf6a290e4df1c73f92e8c7d992a78a8e0)
Previously, `SVGSVGBox` would have a natural aspect ratio of 0 if it
had a viewbox with zero width. This led to a division by zero, causing
a crash.
Found by Domato.
(cherry picked from commit 4cdafea36334bcff8c4bbb083076ae55b599177c)
- Change min track sizing function to be "auto" when flex size is
specified.
- Never check if min track sizing funciton is flexible, because only
max is allowed to be flexible.
- Address FIXME in automatic_minimum_size to avoid regressions after
making two fixes mentioned above.
(cherry picked from commit 3270df476dd46b140e1b9de1e8328647744b56ab)
Areas are disassembled into boundary lines on `build_grid_areas()` step,
so we can always use them to find grid item's position during placement.
This way we support both ways to define area: `grid-template-areas` and
implicitly using `-start` and `-end` boundary line names.
(cherry picked from commit 7a1f3f7ae3af2744e2f99df29baf09153d631b24)
When traversing the layout tree to find an appropriate box child to
derive the baseline from. Only the child's margin and offset was being
applied. Now we sum each offset on the recursive call.
(cherry picked from commit 3c897e7cf3594f02f559599e1bf28747c9edba13)
Previously the input element was displayed with value 0, when no value
was set in the HTML. Now it uses `value_sanitization_algorithm()`, which
will calculate the default value.
In `value_sanitization_algorithm()` there was a logical mistake/typo.
The comment from the spec says "unless the maximum is less than the
minimum".
The added layout test would fail without the code changes.
Fixes#520
(cherry picked from commit 191531b7b18d2edf97dc7bf88a9c19903eeae2d5)
Previously, setting CSS `line-height: 0` on an `input` element would
result in no text being displayed.
Other browsers handle this by setting the minimum height to the
"normal" value for single line inputs.
(cherry picked from commit 629068c2a7eb02db37ffb4fe8d536306ee71e156)
Solving using the unconstrained height, when solving for bottom, would
either leave a gap over overflow its container.
(cherry picked from commit bee42160c5e2cdb949e6057f029391ee7e0fa9fa)
Like 1132c858e9, out-of-flow elements such
as float elements would get inserted into block level `::before` and
`::after` pseudo-element nodes when they should instead be inserted as a
sibling to the pseudo element. This change fixes that.
This fixes a few layout issues on the swedish tax agency website
(skatteverket.se). :^)
(cherry picked from commit 9ed2669fc801a3475c9f383ae7221b6a2b1a7fa5)
If a flex item has a preferred aspect ratio and the flex basis is not
definite, we were falling back to using stretch-fit for the main size,
since that appeared to match other browsers.
However, we missed the case where we actually have a definite cross size
through which the preferred aspect ratio can be naturally resolved.
(cherry picked from commit db1faef786dbd1722bbe6a1f4a5616f3069bdb6a)
This line changes padding top to align cell content to baseline:
`cell.padding_top += m_rows[cell.row_index].baseline - cell.baseline`
Which means available for distribution height `height_diff` could have
changed so it needs to be refreshed before assigning the rest of it to
padding bottom:
`cell_state.padding_bottom += height_diff;`
Fixes https://github.com/SerenityOS/serenity/issues/22032
As a layout test, this verifies that the fallback attr() substitution
results in the expected layout node. For example, the fallback content
for a `string` attribute type should create a text node.
There was no need to set an available height constraint when doing early
height calculation for inline-flex boxes. It created a situation where
the flex containers could wrongly get zero height early, and then
resolve percentages against zero instead of the real intrinsic size.
Fixes#23942
When both insets in a given axis are auto, we should use the static
position for absolutely positioned elements.
By doing this correctly, we exposed a bunch of other small bugs which
had to be fixed to compensate for new test failures. Those fixes are
included here as well:
- Don't apply margins twice.
- Compute the static position containing block chain correctly.
This makes https://brave.com/ look much better. :^)
Doing multiple `for_each_in_subtree()` passes was kind of a hack. We
can resolve everything in a single pass with a little more control over
the layout process. This also fixes a few minor issues like the sizing
of nested `<g>` elements.
More work is needed here though as this is still fairly ad-hoc.
Note: This does regress `css-namespace-tag-name-selector.html`,
previously SVG text within `<a>` elements would appear. However, this
was only because `for_each_in_subtree()` would blindly look through the
InlineNodes from the unimplemented `SVGAElement`s.
This is often used on login forms, for example, to toggle the visibility
of a password. The site will change the <input> element's type to "text"
to allow the password to show.
