Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-09-22 12:50:08 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Ignore insets in Taffy for static and sticky positionings (#39401)

Browse source 
Taffy treats static and sticky positionings as relative. So the inset
properties shifted the element in the relpos way, which was no good.
It's better to just treat them as `auto` instead.

Testing: 3 existing tests pass, and adding a new one.
Fixes: #39399

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-09-19 22:17:56 +02:00 • committed by GitHub
parent 994d767ae5
commit 0de0f741b6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 54 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

14
components/layout/taffy/stylo_taffy/wrapper.rs
View file

@ -10,6 +10,7 @@ use style::values::computed::{GridTemplateAreas, LengthPercentage};
use style::values::generics::grid::{TrackListValue, TrackRepeat, TrackSize}; use style::values::generics::grid::{TrackListValue, TrackRepeat, TrackSize};
use style::values::specified::position::NamedArea; use style::values::specified::position::NamedArea;
use style::{Atom, OwnedSlice}; use style::{Atom, OwnedSlice};
use taffy::prelude::TaffyAuto;
use super::{convert, stylo}; use super::{convert, stylo};
@ -73,6 +74,19 @@ impl<T: Deref<Target = ComputedValues>> taffy::CoreStyle for TaffyStyloStyle<T>
#[inline] #[inline]
fn inset(&self) -> taffy::Rect<taffy::LengthPercentageAuto> { fn inset(&self) -> taffy::Rect<taffy::LengthPercentageAuto> {
// Taffy doesn't support static nor sticky positionings, they are treated
// as relative. As a workaround, ignore the insets.
if matches!(
self.style.get_box().position,
stylo::Position::Static | stylo::Position::Sticky
) {
return taffy::Rect {
left: taffy::LengthPercentageAuto::AUTO,
right: taffy::LengthPercentageAuto::AUTO,
top: taffy::LengthPercentageAuto::AUTO,
bottom: taffy::LengthPercentageAuto::AUTO,
};
}
let position_styles = self.style.get_position(); let position_styles = self.style.get_position();
taffy::Rect { taffy::Rect {
left: convert::inset(&position_styles.left), left: convert::inset(&position_styles.left),

13
tests/wpt/meta/MANIFEST.json vendored
View file

@ -237547,6 +237547,19 @@
{} {}
] ]
], ],
"position-static-001.html": [
"38647cbb0feb64a50cf176379cbdcd8c4f189812",
[
null,
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
],
"replaced-object-backdrop.html": [ "replaced-object-backdrop.html": [
"b9d2cb599bd4610aaa9161fbf7fd7f8a35e89b8b", "b9d2cb599bd4610aaa9161fbf7fd7f8a35e89b8b",
[ [

6
tests/wpt/meta/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html.ini vendored
View file

@ -1,6 +0,0 @@
[grid-column-axis-alignment-sticky-positioned-items-002.html]
[.grid 1]
expected: FAIL
[.grid 2]
expected: FAIL

6
tests/wpt/meta/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html.ini vendored
View file

@ -1,6 +0,0 @@
[grid-row-axis-alignment-sticky-positioned-items-002.html]
[.grid 1]
expected: FAIL
[.grid 2]
expected: FAIL

2
tests/wpt/meta/css/css-position/sticky/position-sticky-grid.html.ini vendored
View file

@ -1,2 +0,0 @@
[position-sticky-grid.html]
expected: FAIL

27
tests/wpt/tests/css/css-position/position-static-001.html vendored Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-position/#insets">
<link rel="help" href="https://github.com/servo/servo/issues/39399">
<link rel="match" href="../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Inset propeties do not apply to a statically positioned grid item.">
<style>
#grid {
display: grid;
width: 200px;
height: 200px;
background: red;
}
#item {
width: 200px;
height: 200px;
top: 200px;
left: 200px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="item"></div>
</div>