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

layout: Use overflow: visible if overflow was propagated to viewport (#38598)

Browse source 
The `overflow-*` values of either the root element or the `<body>` get
propagated to the viewport. However, we were missing this part:
> The element from which the value is propagated must then have a used
`overflow` value of `visible`.

See https://drafts.csswg.org/css-overflow/#overflow-propagation

Testing:
 - `css/cssom-view/scrolling-quirks-vs-nonquirks.html`
 - `css/css-overflow/overflow-body-propagation-007.html`
 - `css/css-overflow/overflow-body-propagation-008.html`
 - `css/css-overflow/overflow-body-propagation-009.html`
 - `css/css-overflow/scrollable-overflow-with-nested-elements-001.html` 
 - `css/css-overflow/scrollable-overflow-with-nested-elements-002.html` 
 - `css/css-overflow/scrollable-overflow-with-nested-elements-003.html`
 - `css/css-overflow/scrollable-overflow-with-nested-elements-004.html`
 - `css/css-overflow/scrollbar-gutter-scroll-into-view.html`

Failures:
 - `css/css-overflow/overflow-body-propagation-010.html`
   Failing because of missing support for `contain: paint`.
- `css/css-overflow/scrollable-overflow-with-nested-elements-005.html`
Failing because of wrong `data-expected-height`, but correct
`data-expected-scroll-height` which is core of this PR.
`data-expected-height` can be dealt separately.


Fixes: #38248

---------

Signed-off-by: Shubham Gupta <shubham13297@gmail.com>
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Shubham Gupta 2025-08-20 22:21:51 +08:00 • committed by GitHub
parent 37088aa4c3
commit d8ff9c7a08
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 373 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

36
components/layout/dom.rs
View file

@ -27,6 +27,7 @@ use crate::flow::BlockLevelBox;
use crate::flow::inline::{InlineItem, SharedInlineStyles};
use crate::fragment_tree::Fragment;
use crate::geom::PhysicalSize;
use crate::layout_box_base::LayoutBoxBase;
use crate::replaced::CanvasInfo;
use crate::table::TableLevelBox;
use crate::taffy::TaffyItemBox;
@ -73,7 +74,7 @@ impl InnerDOMLayoutData {
self.self_box
.borrow()
.as_ref()
.map(LayoutBox::fragments)
.map(|layout_box| layout_box.with_base_flat(LayoutBoxBase::fragments))
.unwrap_or_default()
}
@ -139,17 +140,38 @@ impl LayoutBox {
}
}
pub(crate) fn fragments(&self) -> Vec<Fragment> {
pub(crate) fn with_base_flat<T>(&self, callback: impl Fn(&LayoutBoxBase) -> Vec<T>) -> Vec<T> {
match self {
LayoutBox::DisplayContents(..) => vec![],
LayoutBox::BlockLevel(block_level_box) => block_level_box.borrow().fragments(),
LayoutBox::BlockLevel(block_level_box) => block_level_box.borrow().with_base(callback),
LayoutBox::InlineLevel(inline_items) => inline_items
.iter()
.flat_map(|inline_item| inline_item.borrow().fragments())
.flat_map(|inline_item| inline_item.borrow().with_base(&callback))
.collect(),
LayoutBox::FlexLevel(flex_level_box) => flex_level_box.borrow().fragments(),
LayoutBox::TaffyItemBox(taffy_item_box) => taffy_item_box.borrow().fragments(),
LayoutBox::TableLevelBox(table_box) => table_box.fragments(),
LayoutBox::FlexLevel(flex_level_box) => flex_level_box.borrow().with_base(callback),
LayoutBox::TaffyItemBox(taffy_item_box) => taffy_item_box.borrow().with_base(callback),
LayoutBox::TableLevelBox(table_box) => table_box.with_base(callback),
}
}
pub(crate) fn with_base_mut(&mut self, callback: impl Fn(&mut LayoutBoxBase)) {
match self {
LayoutBox::DisplayContents(..) => {},
LayoutBox::BlockLevel(block_level_box) => {
block_level_box.borrow_mut().with_base_mut(callback);
},
LayoutBox::InlineLevel(inline_items) => {
for inline_item in inline_items {
inline_item.borrow_mut().with_base_mut(&callback);
}
},
LayoutBox::FlexLevel(flex_level_box) => {
flex_level_box.borrow_mut().with_base_mut(callback)
},
LayoutBox::TableLevelBox(table_level_box) => table_level_box.with_base_mut(callback),
LayoutBox::TaffyItemBox(taffy_item_box) => {
taffy_item_box.borrow_mut().with_base_mut(callback)
},
}
}

25
components/layout/flexbox/mod.rs
View file

@ -22,7 +22,8 @@ use crate::context::LayoutContext;
use crate::dom::LayoutBox;
use crate::dom_traversal::{NodeAndStyleInfo, NonReplacedContents};
use crate::formatting_contexts::IndependentFormattingContext;
use crate::fragment_tree::{BaseFragmentInfo, Fragment};
use crate::fragment_tree::BaseFragmentInfo;
use crate::layout_box_base::LayoutBoxBase;
use crate::positioned::AbsolutelyPositionedBox;
mod geom;
@ -190,14 +191,24 @@ impl FlexLevelBox {
}
}
pub(crate) fn fragments(&self) -> Vec<Fragment> {
pub(crate) fn with_base<T>(&self, callback: impl Fn(&LayoutBoxBase) -> T) -> T {
match self {
FlexLevelBox::FlexItem(flex_item_box) => flex_item_box
.independent_formatting_context
.base
.fragments(),
FlexLevelBox::FlexItem(flex_item_box) => {
callback(&flex_item_box.independent_formatting_context.base)
},
FlexLevelBox::OutOfFlowAbsolutelyPositionedBox(positioned_box) => {
positioned_box.borrow().context.base.fragments()
callback(&positioned_box.borrow().context.base)
},
}
}
pub(crate) fn with_base_mut<T>(&mut self, callback: impl Fn(&mut LayoutBoxBase) -> T) -> T {
match self {
FlexLevelBox::FlexItem(flex_item_box) => {
callback(&mut flex_item_box.independent_formatting_context.base)
},
FlexLevelBox::OutOfFlowAbsolutelyPositionedBox(positioned_box) => {
callback(&mut positioned_box.borrow_mut().context.base)
},
}
}

29
components/layout/flow/inline/mod.rs
View file

@ -125,6 +125,7 @@ use crate::fragment_tree::{
PositioningFragment,
};
use crate::geom::{LogicalRect, LogicalVec2, ToLogical};
use crate::layout_box_base::LayoutBoxBase;
use crate::positioned::{AbsolutelyPositionedBox, PositioningContext};
use crate::sizing::{ComputeInlineContentSizes, ContentSizes, InlineContentSizesResult};
use crate::style_ext::{ComputedValuesExt, PaddingBorderMargin};
@ -273,20 +274,38 @@ impl InlineItem {
}
}
pub(crate) fn fragments(&self) -> Vec<Fragment> {
pub(crate) fn with_base<T>(&self, callback: impl Fn(&LayoutBoxBase) -> T) -> T {
match self {
InlineItem::StartInlineBox(inline_box) => inline_box.borrow().base.fragments(),
InlineItem::StartInlineBox(inline_box) => callback(&inline_box.borrow().base),
InlineItem::EndInlineBox | InlineItem::TextRun(..) => {
unreachable!("Should never have these kind of fragments attached to a DOM node")
},
InlineItem::OutOfFlowAbsolutelyPositionedBox(positioned_box, ..) => {
positioned_box.borrow().context.base.fragments()
callback(&positioned_box.borrow().context.base)
},
InlineItem::OutOfFlowFloatBox(float_box) => callback(&float_box.borrow().contents.base),
InlineItem::Atomic(independent_formatting_context, ..) => {
callback(&independent_formatting_context.borrow().base)
},
}
}
pub(crate) fn with_base_mut(&mut self, callback: impl Fn(&mut LayoutBoxBase)) {
match self {
InlineItem::StartInlineBox(inline_box) => {
callback(&mut inline_box.borrow_mut().base);
},
InlineItem::EndInlineBox | InlineItem::TextRun(..) => {
unreachable!("Should never have these kind of fragments attached to a DOM node")
},
InlineItem::OutOfFlowAbsolutelyPositionedBox(positioned_box, ..) => {
callback(&mut positioned_box.borrow_mut().context.base)
},
InlineItem::OutOfFlowFloatBox(float_box) => {
float_box.borrow().contents.base.fragments()
callback(&mut float_box.borrow_mut().contents.base)
},
InlineItem::Atomic(independent_formatting_context, ..) => {
independent_formatting_context.borrow().base.fragments()
callback(&mut independent_formatting_context.borrow_mut().base)
},
}
}

4
components/layout/flow/mod.rs
View file

@ -139,10 +139,6 @@ impl BlockLevelBox {
self.with_base(|base| base.clear_fragment_layout_cache());
}
pub(crate) fn fragments(&self) -> Vec<Fragment> {
self.with_base(LayoutBoxBase::fragments)
}
pub(crate) fn with_base<T>(&self, callback: impl Fn(&LayoutBoxBase) -> T) -> T {
match self {
BlockLevelBox::Independent(independent_formatting_context) => {

23
components/layout/flow/root.rs
View file

@ -26,7 +26,7 @@ use crate::flow::float::FloatBox;
use crate::flow::inline::InlineItem;
use crate::flow::{BlockContainer, BlockFormattingContext, BlockLevelBox};
use crate::formatting_contexts::IndependentFormattingContext;
use crate::fragment_tree::FragmentTree;
use crate::fragment_tree::{FragmentFlags, FragmentTree};
use crate::geom::{LogicalVec2, PhysicalSize};
use crate::positioned::{AbsolutelyPositionedBox, PositioningContext};
use crate::replaced::ReplacedContents;
@ -48,10 +48,6 @@ impl BoxTree {
#[servo_tracing::instrument(name = "Box Tree Construction", skip_all)]
pub(crate) fn construct(context: &LayoutContext, root_element: ServoLayoutNode<'_>) -> Self {
let root_element = root_element.to_threadsafe();
let boxes = construct_for_root_element(context, root_element);
// Zero box for `:root { display: none }`, one for the root element otherwise.
assert!(boxes.len() <= 1);
// From https://www.w3.org/TR/css-overflow-3/#overflow-propagation:
// > UAs must apply the overflow-* values set on the root element to the viewport when the
@ -65,6 +61,7 @@ impl BoxTree {
let mut viewport_overflow_x = root_style.clone_overflow_x();
let mut viewport_overflow_y = root_style.clone_overflow_y();
let mut element_propagating_overflow = root_element;
if viewport_overflow_x == Overflow::Visible &&
viewport_overflow_y == Overflow::Visible &&
!root_style.get_box().display.is_none()
@ -81,12 +78,28 @@ impl BoxTree {
if !style.get_box().display.is_none() {
viewport_overflow_x = style.clone_overflow_x();
viewport_overflow_y = style.clone_overflow_y();
element_propagating_overflow = child;
break;
}
}
}
let boxes = construct_for_root_element(context, root_element);
// Zero box for `:root { display: none }`, one for the root element otherwise.
assert!(boxes.len() <= 1);
if let Some(layout_data) = element_propagating_overflow.inner_layout_data() {
if let Some(ref mut layout_box) = *layout_data.self_box.borrow_mut() {
layout_box.with_base_mut(|base| {
base.base_fragment_info
.flags
.insert(FragmentFlags::PROPAGATED_OVERFLOW_TO_VIEWPORT)
});
}
}
let contents = BlockContainer::BlockLevelBoxes(boxes);
let contains_floats = contents.contains_floats();
Self {

3
components/layout/fragment_tree/base_fragment.rs
View file

@ -176,6 +176,9 @@ bitflags! {
const SIZE_DEPENDS_ON_BLOCK_CONSTRAINTS_AND_CAN_BE_CHILD_OF_FLEX_ITEM = 1 << 8;
/// Whether or not the node that created this fragment is the root element.
const IS_ROOT_ELEMENT = 1 << 9;
/// If element has propagated the overflow value to viewport.
const PROPAGATED_OVERFLOW_TO_VIEWPORT = 1 << 10;
}
}

9
components/layout/style_ext.rs
View file

@ -598,6 +598,15 @@ impl ComputedValuesExt for ComputedValues {
let mut overflow_x = style_box.overflow_x;
let mut overflow_y = style_box.overflow_y;
// https://www.w3.org/TR/css-overflow-3/#overflow-propagation
// The element from which the value is propagated must then have a used overflow value of visible.
if fragment_flags.contains(FragmentFlags::PROPAGATED_OVERFLOW_TO_VIEWPORT) {
return AxesOverflow {
x: Overflow::Visible,
y: Overflow::Visible,
};
}
// From <https://www.w3.org/TR/css-overflow-4/#overflow-control>:
// "On replaced elements, the used values of all computed values other than visible is clip."
if fragment_flags.contains(FragmentFlags::IS_REPLACED) {

21
components/layout/table/mod.rs
View file

@ -88,7 +88,7 @@ use crate::SharedStyle;
use crate::cell::ArcRefCell;
use crate::flow::BlockContainer;
use crate::formatting_contexts::IndependentFormattingContext;
use crate::fragment_tree::{BaseFragmentInfo, Fragment};
use crate::fragment_tree::BaseFragmentInfo;
use crate::geom::PhysicalVec;
use crate::layout_box_base::LayoutBoxBase;
use crate::style_ext::BorderStyleColor;
@ -412,12 +412,21 @@ impl TableLevelBox {
}
}
pub(crate) fn fragments(&self) -> Vec<Fragment> {
pub(crate) fn with_base<T>(&self, callback: impl Fn(&LayoutBoxBase) -> T) -> T {
match self {
TableLevelBox::Caption(caption) => caption.borrow().context.base.fragments(),
TableLevelBox::Cell(cell) => cell.borrow().base.fragments(),
TableLevelBox::TrackGroup(track_group) => track_group.borrow().base.fragments(),
TableLevelBox::Track(track) => track.borrow().base.fragments(),
TableLevelBox::Caption(caption) => callback(&caption.borrow().context.base),
TableLevelBox::Cell(cell) => callback(&cell.borrow().base),
TableLevelBox::TrackGroup(track_group) => callback(&track_group.borrow().base),
TableLevelBox::Track(track) => callback(&track.borrow().base),
}
}
pub(crate) fn with_base_mut<T>(&mut self, callback: impl Fn(&mut LayoutBoxBase) -> T) -> T {
match self {
TableLevelBox::Caption(caption) => callback(&mut caption.borrow_mut().context.base),
TableLevelBox::Cell(cell) => callback(&mut cell.borrow_mut().base),
TableLevelBox::TrackGroup(track_group) => callback(&mut track_group.borrow_mut().base),
TableLevelBox::Track(track) => callback(&mut track.borrow_mut().base),
}
}

18
components/layout/taffy/mod.rs
View file

@ -21,6 +21,7 @@ use crate::dom::LayoutBox;
use crate::dom_traversal::{NodeAndStyleInfo, NonReplacedContents};
use crate::formatting_contexts::IndependentFormattingContext;
use crate::fragment_tree::Fragment;
use crate::layout_box_base::LayoutBoxBase;
use crate::positioned::{AbsolutelyPositionedBox, PositioningContext};
#[derive(Debug, MallocSizeOf)]
@ -146,13 +147,24 @@ impl TaffyItemBox {
}
}
pub(crate) fn fragments(&self) -> Vec<Fragment> {
pub(crate) fn with_base<T>(&self, callback: impl Fn(&LayoutBoxBase) -> T) -> T {
match self.taffy_level_box {
TaffyItemBoxInner::InFlowBox(ref independent_formatting_context) => {
independent_formatting_context.base.fragments()
callback(&independent_formatting_context.base)
},
TaffyItemBoxInner::OutOfFlowAbsolutelyPositionedBox(ref positioned_box) => {
positioned_box.borrow().context.base.fragments()
callback(&positioned_box.borrow().context.base)
},
}
}
pub(crate) fn with_base_mut<T>(&mut self, callback: impl Fn(&mut LayoutBoxBase) -> T) -> T {
match &mut self.taffy_level_box {
TaffyItemBoxInner::InFlowBox(independent_formatting_context) => {
callback(&mut independent_formatting_context.base)
},
TaffyItemBoxInner::OutOfFlowAbsolutelyPositionedBox(positioned_box) => {
callback(&mut positioned_box.borrow_mut().context.base)
},
}
}