Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-06 16:45:39 +00:00
Code Issues Projects Releases Packages Wiki Activity

layout: Implement overflow scroll support for different axes (#35414)

Browse source 
* layout: Add AxesScrollSensitivity to enable control of scroll in axis

Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>

* layout_2013: Be compatible with AxesScrollSensitivity

Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>

* layout: update struct AxesScrollSensitivity to euclid::Vector2D

Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>

* display_list: implement From<Overflow> for ScrollSensitivity

Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>

* layout: simplify and reuse scroll related logic

Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>

* layout_2013: simplify and reuse scroll related logic

Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>

* layout, layout_2013: revert AxesScrollSensitivity to pair struct

Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>

* layout: Reimport ComputedOverflow as #35103 depends on it

Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>

* layout: Add AxesOverflow to replace PhysicalVec

Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>

* layout: implement scroll of viewport for different axes

Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>

* layout: explicitly handle overflow match

Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>

* Update components/shared/webrender/Cargo.toml

Co-authored-by: Martin Robinson <mrobinson@igalia.com>
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>

---------

Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
This commit is contained in:
Euclid Ye 2025-02-14 16:14:57 +08:00 • committed by GitHub
parent 9b3e23633d
commit 03fc54e682
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 111 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/layout_2020/display_list/mod.rs
View file

@ -36,7 +36,7 @@ use webrender_api::{
ImageRendering, NinePatchBorder, NinePatchBorderSource,
};
use webrender_traits::display_list::{
CompositorDisplayListInfo, ScrollSensitivity, ScrollTreeNodeId,
AxesScrollSensitivity, CompositorDisplayListInfo, ScrollTreeNodeId,
};
use wr::units::LayoutVector2D;
@ -101,7 +101,7 @@ impl DisplayList {
content_size: units::LayoutSize,
pipeline_id: wr::PipelineId,
epoch: wr::Epoch,
root_scroll_sensitivity: ScrollSensitivity,
root_scroll_sensitivity: AxesScrollSensitivity,
) -> Self {
Self {
wr: wr::DisplayListBuilder::new(pipeline_id),

22
components/layout_2020/display_list/stacking_context.rs
View file

@ -26,7 +26,7 @@ use style::values::specified::box_::DisplayOutside;
use style::Zero;
use webrender_api::units::{LayoutPoint, LayoutRect, LayoutTransform, LayoutVector2D};
use webrender_api::{self as wr, BorderRadius};
use webrender_traits::display_list::{ScrollSensitivity, ScrollTreeNodeId, ScrollableNodeInfo};
use webrender_traits::display_list::{AxesScrollSensitivity, ScrollTreeNodeId, ScrollableNodeInfo};
use wr::units::{LayoutPixel, LayoutSize};
use wr::{ClipChainId, SpatialTreeItemKey, StickyOffsetBounds};
@ -38,8 +38,8 @@ use crate::fragment_tree::{
BoxFragment, ContainingBlockManager, Fragment, FragmentFlags, FragmentTree,
PositioningFragment, SpecificLayoutInfo,
};
use crate::geom::{AuOrAuto, PhysicalRect, PhysicalSides, PhysicalVec};
use crate::style_ext::ComputedValuesExt;
use crate::geom::{AuOrAuto, PhysicalRect, PhysicalSides};
use crate::style_ext::{AxesOverflow, ComputedValuesExt};
#[derive(Clone)]
pub(crate) struct ContainingBlock {
@ -212,7 +212,7 @@ impl DisplayList {
external_id: wr::ExternalScrollId,
content_rect: LayoutRect,
clip_rect: LayoutRect,
scroll_sensitivity: ScrollSensitivity,
scroll_sensitivity: AxesScrollSensitivity,
) -> ScrollTreeNodeId {
let spatial_tree_item_key = self.get_next_spatial_tree_item_key();
@ -1373,7 +1373,7 @@ impl BoxFragment {
}
// TODO: merge this function with style.effective_overflow()
fn used_overflow(&self) -> PhysicalVec<ComputedOverflow> {
fn used_overflow(&self) -> AxesOverflow {
let mut overflow = self.style.effective_overflow();
let is_replaced_element = self.base.flags.contains(FragmentFlags::IS_REPLACED);
@ -1483,12 +1483,12 @@ impl BoxFragment {
display_list.wr.pipeline_id,
);
let sensitivity =
if ComputedOverflow::Hidden == overflow.x && ComputedOverflow::Hidden == overflow.y {
ScrollSensitivity::Script
} else {
ScrollSensitivity::ScriptAndInputEvents
};
let overflow = self.style.effective_overflow();
let sensitivity = AxesScrollSensitivity {
x: overflow.x.into(),
y: overflow.y.into(),
};
let content_rect = self.scrollable_overflow().to_webrender();

34
components/layout_2020/flow/root.rs
View file

@ -13,7 +13,7 @@ use style::dom::OpaqueNode;
use style::properties::ComputedValues;
use style::values::computed::Overflow;
use style_traits::CSSPixel;
use webrender_traits::display_list::ScrollSensitivity;
use webrender_traits::display_list::AxesScrollSensitivity;
use crate::cell::ArcRefCell;
use crate::context::LayoutContext;
@ -40,8 +40,8 @@ pub struct BoxTree {
/// <https://drafts.csswg.org/css-backgrounds/#special-backgrounds>
canvas_background: CanvasBackground,
/// Whether or not the root element should be sensitive to scrolling input events.
sensitive_to_scroll_input: bool,
/// Whether or not the viewport should be sensitive to scrolling input events in two axes
scroll_sensitivity: AxesScrollSensitivity,
}
impl BoxTree {
@ -54,7 +54,7 @@ impl BoxTree {
// Zero box for `:root { display: none }`, one for the root element otherwise.
assert!(boxes.len() <= 1);
// From https://drafts.csswg.org/css-overflow/#propdef-overflow:
// From https://drafts.csswg.org/css-overflow/#overflow-propagation:
// > UAs must apply the overflow-* values set on the root element to the viewport when the
// > root element’s display value is not none. However, when the root element is an [HTML]
// > html element (including XML syntax for HTML) whose overflow value is visible (in both
@ -62,12 +62,13 @@ impl BoxTree {
// > none, user agents must instead apply the overflow-* values of the first such child
// > element to the viewport. The element from which the value is propagated must then have a
// > used overflow value of visible.
//
// TODO: This should handle when different overflow is set multiple axes, which requires the
// compositor scroll tree to allow setting a value per axis.
let root_style = root_element.style(context);
let mut root_overflow = root_style.effective_overflow().y;
if root_overflow == Overflow::Visible && !root_style.get_box().display.is_none() {
let root_overflow = root_style.effective_overflow();
let mut viewport_overflow = root_overflow;
if root_overflow.x == Overflow::Visible &&
root_overflow.y == Overflow::Visible &&
!root_style.get_box().display.is_none()
{
for child in iter_child_nodes(root_element) {
if !child
.to_threadsafe()
@ -79,7 +80,7 @@ impl BoxTree {
let style = child.style(context);
if !style.get_box().display.is_none() {
root_overflow = style.effective_overflow().y;
viewport_overflow = style.effective_overflow();
break;
}
}
@ -93,7 +94,10 @@ impl BoxTree {
contains_floats,
},
canvas_background: CanvasBackground::for_root_element(context, root_element),
sensitive_to_scroll_input: root_overflow != Overflow::Hidden,
scroll_sensitivity: AxesScrollSensitivity {
x: viewport_overflow.x.to_scrollable().into(),
y: viewport_overflow.y.to_scrollable().into(),
},
}
}
@ -392,18 +396,12 @@ impl BoxTree {
acc.union(&child_overflow)
});
let root_scroll_sensitivity = if self.sensitive_to_scroll_input {
ScrollSensitivity::ScriptAndInputEvents
} else {
ScrollSensitivity::Script
};
FragmentTree {
root_fragments,
scrollable_overflow,
initial_containing_block: physical_containing_block,
canvas_background: self.canvas_background.clone(),
root_scroll_sensitivity,
root_scroll_sensitivity: self.scroll_sensitivity,
}
}
}

4
components/layout_2020/fragment_tree/fragment_tree.rs
View file

@ -9,7 +9,7 @@ use fxhash::FxHashSet;
use style::animation::AnimationSetKey;
use style::dom::OpaqueNode;
use webrender_api::units;
use webrender_traits::display_list::ScrollSensitivity;
use webrender_traits::display_list::AxesScrollSensitivity;
use super::{ContainingBlockManager, Fragment, Tag};
use crate::display_list::StackingContext;
@ -38,7 +38,7 @@ pub struct FragmentTree {
pub(crate) canvas_background: CanvasBackground,
/// Whether or not the root element is sensitive to scroll input events.
pub root_scroll_sensitivity: ScrollSensitivity,
pub root_scroll_sensitivity: AxesScrollSensitivity,
}
impl FragmentTree {

25
components/layout_2020/style_ext.rs
View file

@ -30,8 +30,8 @@ use webrender_api as wr;
use crate::dom_traversal::Contents;
use crate::fragment_tree::FragmentFlags;
use crate::geom::{
AuOrAuto, LengthPercentageOrAuto, LogicalSides, LogicalVec2, PhysicalSides, PhysicalSize,
PhysicalVec, Size, Sizes,
AuOrAuto, LengthPercentageOrAuto, LogicalSides, LogicalVec2, PhysicalSides, PhysicalSize, Size,
Sizes,
};
use crate::table::TableLayoutStyle;
use crate::{ContainingBlock, IndefiniteContainingBlock};
@ -52,6 +52,11 @@ pub(crate) enum DisplayGeneratingBox {
/// <https://drafts.csswg.org/css-display-3/#layout-specific-display>
LayoutInternal(DisplayLayoutInternal),
}
#[derive(Clone, Copy, Debug)]
pub struct AxesOverflow {
pub x: Overflow,
pub y: Overflow,
}
impl DisplayGeneratingBox {
pub(crate) fn display_inside(&self) -> DisplayInside {
@ -301,7 +306,7 @@ pub(crate) trait ComputedValuesExt {
) -> LogicalSides<LengthPercentageOrAuto<'_>>;
fn has_transform_or_perspective(&self, fragment_flags: FragmentFlags) -> bool;
fn effective_z_index(&self, fragment_flags: FragmentFlags) -> i32;
fn effective_overflow(&self) -> PhysicalVec<Overflow>;
fn effective_overflow(&self) -> AxesOverflow;
fn establishes_block_formatting_context(&self) -> bool;
fn establishes_stacking_context(&self, fragment_flags: FragmentFlags) -> bool;
fn establishes_scroll_container(&self) -> bool;
@ -517,7 +522,7 @@ impl ComputedValuesExt for ComputedValues {
/// Get the effective overflow of this box. The property only applies to block containers,
/// flex containers, and grid containers. And some box types only accept a few values.
/// <https://www.w3.org/TR/css-overflow-3/#overflow-control>
fn effective_overflow(&self) -> PhysicalVec<Overflow> {
fn effective_overflow(&self) -> AxesOverflow {
let style_box = self.get_box();
let overflow_x = style_box.overflow_x;
let overflow_y = style_box.overflow_y;
@ -547,9 +552,15 @@ impl ComputedValuesExt for ComputedValues {
_ => false,
};
if ignores_overflow {
PhysicalVec::new(Overflow::Visible, Overflow::Visible)
AxesOverflow {
x: Overflow::Visible,
y: Overflow::Visible,
}
} else {
PhysicalVec::new(overflow_x, overflow_y)
AxesOverflow {
x: overflow_x,
y: overflow_y,
}
}
}
@ -583,6 +594,8 @@ impl ComputedValuesExt for ComputedValues {
/// Whether or not the `overflow` value of this style establishes a scroll container.
fn establishes_scroll_container(&self) -> bool {
// Checking one axis suffices, because the computed value ensures that
// either both axes are scrollable, or none is scrollable.
self.effective_overflow().x.is_scrollable()
}