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

layout: Account for transform in scrollable overflow (#36138)

Browse source 
In the scrollable overflow calcutation, apply CSS transforms to boxes
and scrollable overflow of the descendant. Clip unreachable scrollable
overflow according to it's block start and inline start scrolling
direction. And, renamed `Fragment::scrolling_overflow` to
`Fragment::scrolling_overflow_for_parent` as it was calculating the
scrolling overflow contribution from a child.

Add several WPT tests, testing the transform interaction `rotate`,
`scale`, and `skew` with scrollable overflow. There are several WPT test
that are testing the interaction that not expected from current browsers
implementation according to the spec.

Testing: Existing and new WPT. 
Fixes: #36031

---------

Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>
This commit is contained in:
Steven Novaryo 2025-04-29 17:37:27 +08:00 • committed by GitHub
parent b92542b756
commit bd6928f3dc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
37 changed files with 974 additions and 288 deletions
Download patch file Download diff file Expand all files Collapse all files

30
components/layout/style_ext.rs
View file

@ -12,7 +12,7 @@ use style::computed_values::mix_blend_mode::T as ComputedMixBlendMode;
use style::computed_values::position::T as ComputedPosition;
use style::computed_values::transform_style::T as ComputedTransformStyle;
use style::computed_values::unicode_bidi::T as UnicodeBidi;
use style::logical_geometry::{Direction as AxisDirection, WritingMode};
use style::logical_geometry::{Direction as AxisDirection, PhysicalSide, WritingMode};
use style::properties::ComputedValues;
use style::properties::longhands::backface_visibility::computed_value::T as BackfaceVisiblity;
use style::properties::longhands::box_sizing::computed_value::T as BoxSizing;
@ -280,6 +280,16 @@ impl Default for BorderStyleColor {
}
}
/// <https://drafts.csswg.org/cssom-view/#overflow-directions>
/// > A scrolling box of a viewport or element has two overflow directions,
/// > which are the block-end and inline-end directions for that viewport or element.
pub(crate) struct OverflowDirection {
/// Whether block-end or inline-end direction is [PhysicalSide::Right].
pub rightward: bool,
/// Whether block-end or inline-end direction is [PhysicalSide::Bottom].
pub downward: bool,
}
pub(crate) trait ComputedValuesExt {
fn physical_box_offsets(&self) -> PhysicalSides<LengthPercentageOrAuto<'_>>;
fn box_offsets(&self, writing_mode: WritingMode) -> LogicalSides<LengthPercentageOrAuto<'_>>;
@ -354,6 +364,7 @@ pub(crate) trait ComputedValuesExt {
writing_mode: WritingMode,
) -> bool;
fn is_inline_box(&self, fragment_flags: FragmentFlags) -> bool;
fn overflow_direction(&self) -> OverflowDirection;
}
impl ComputedValuesExt for ComputedValues {
@ -980,6 +991,23 @@ impl ComputedValuesExt for ComputedValues {
};
has_percentage(box_offsets.block_start) || has_percentage(box_offsets.block_end)
}
// <https://drafts.csswg.org/cssom-view/#overflow-directions>
fn overflow_direction(&self) -> OverflowDirection {
let inline_end_direction = self.writing_mode.inline_end_physical_side();
let block_end_direction = self.writing_mode.block_end_physical_side();
let rightward = inline_end_direction == PhysicalSide::Right ||
block_end_direction == PhysicalSide::Right;
let downward = inline_end_direction == PhysicalSide::Bottom ||
block_end_direction == PhysicalSide::Bottom;
// TODO(stevennovaryo): We should consider the flex-container's CSS (e.g. flow-direction: column-reverse).
OverflowDirection {
rightward,
downward,
}
}
}
pub(crate) enum LayoutStyle<'a> {