rgpui 1.3.0

//! 可滚动元素 - 将普通元素包装为带滚动条的滚动区域。

use std::{panic::Location, rc::Rc};

use crate::StyledExt;

use super::{Scrollbar, ScrollbarAxis, ScrollbarHandle};
use crate::{
    App, Div, Element, ElementId, InteractiveElement, IntoElement, ParentElement, RenderOnce,
    ScrollHandle, Stateful, StatefulInteractiveElement, StyleRefinement, Styled, Window, div,
    prelude::FluentBuilder,
};

/// 可滚动元素的扩展 trait。
///
/// 包装的元素本身就是滚动区域，而不是被插入到新的滚动区域内。
pub trait ScrollableElement: InteractiveElement + Styled + ParentElement + Element {
    /// 为元素添加一条滚动条。
    #[track_caller]
    fn scrollbar<H: ScrollbarHandle + Clone>(
        self,
        scroll_handle: &H,
        axis: impl Into<ScrollbarAxis>,
    ) -> Self {
        self.child(ScrollbarLayer {
            id: caller_id(),
            axis: axis.into(),
            scroll_handle: Rc::new(scroll_handle.clone()),
        })
    }

    /// 为元素添加一条垂直滚动条。
    #[track_caller]
    fn vertical_scrollbar<H: ScrollbarHandle + Clone>(self, scroll_handle: &H) -> Self {
        self.scrollbar(scroll_handle, ScrollbarAxis::Vertical)
    }

    /// 为元素添加一条水平滚动条。
    #[track_caller]
    fn horizontal_scrollbar<H: ScrollbarHandle + Clone>(self, scroll_handle: &H) -> Self {
        self.scrollbar(scroll_handle, ScrollbarAxis::Horizontal)
    }

    /// 等价于 [`StatefulInteractiveElement::overflow_scroll`]，但额外添加滚动条。
    /// 保留源元素作为滚动容器。
    #[track_caller]
    fn overflow_scrollbar(self) -> Scrollable<Self> {
        Scrollable::new(self, ScrollbarAxis::Both)
    }

    /// 等价于 [`StatefulInteractiveElement::overflow_x_scroll`]，但额外添加水平滚动条。
    /// 保留源元素作为滚动容器。
    #[track_caller]
    fn overflow_x_scrollbar(self) -> Scrollable<Self> {
        Scrollable::new(self, ScrollbarAxis::Horizontal)
    }

    /// 等价于 [`StatefulInteractiveElement::overflow_y_scroll`]，但额外添加垂直滚动条。
    /// 保留源元素作为滚动容器。
    #[track_caller]
    fn overflow_y_scrollbar(self) -> Scrollable<Self> {
        Scrollable::new(self, ScrollbarAxis::Vertical)
    }
}

/// 滚动元素包装器，将原元素渲染为滚动区域并叠加滚动条。
#[derive(IntoElement)]
pub struct Scrollable<E: InteractiveElement + Styled + ParentElement + Element> {
    id: ElementId,
    element: E,
    axis: ScrollbarAxis,
}

impl<E> Scrollable<E>
where
    E: InteractiveElement + Styled + ParentElement + Element,
{
    #[track_caller]
    fn new(element: E, axis: impl Into<ScrollbarAxis>) -> Self {
        Self {
            id: caller_id(),
            element,
            axis: axis.into(),
        }
    }
}

impl<E> Styled for Scrollable<E>
where
    E: InteractiveElement + Styled + ParentElement + Element,
{
    fn style(&mut self) -> &mut StyleRefinement {
        self.element.style()
    }
}

impl<E> ParentElement for Scrollable<E>
where
    E: InteractiveElement + Styled + ParentElement + Element,
{
    fn extend(&mut self, elements: impl IntoIterator<Item = crate::AnyElement>) {
        self.element.extend(elements)
    }
}

impl<E> InteractiveElement for Scrollable<E>
where
    E: InteractiveElement + Styled + ParentElement + Element,
{
    fn interactivity(&mut self) -> &mut crate::Interactivity {
        self.element.interactivity()
    }
}

impl<E> RenderOnce for Scrollable<E>
where
    E: InteractiveElement + Styled + ParentElement + Element + 'static,
{
    fn render(mut self, window: &mut Window, cx: &mut App) -> impl IntoElement {
        let scroll_handle = scroll_handle_for(&self.id, window, cx);

        // 保留调用者请求的尺寸在包装器上，同时保持调用者元素作为实际滚动跟踪的布局容器。
        let root_style = root_style_from(&mut self.element);

        let root_id = self.id.clone();
        let area_id = (self.id.clone(), "area");
        let content_id = (self.id.clone(), "content");
        let scrollbar_id = (self.id.clone(), "scrollbar");

        let content = self
            .element
            .id(content_id)
            .flex_none()
            .map(|this| match self.axis {
                ScrollbarAxis::Vertical => this.h_auto().min_h_full(),
                ScrollbarAxis::Horizontal => this.w_auto().min_w_full(),
                ScrollbarAxis::Both => this.size_auto().min_size_full(),
            });

        // 保持滚动区域在正常流中：其内容尺寸必须传递给 auto 尺寸的祖先
        // （例如随内容增长的 Dialog）。绝对定位的滚动区域会把这样的祖先压扁为零高度。
        let scroll_area = div()
            .id(area_id)
            .size_full()
            .flex()
            .track_scroll(&scroll_handle)
            .map(|this| match self.axis {
                ScrollbarAxis::Vertical => this.flex_col().overflow_y_scroll(),
                ScrollbarAxis::Horizontal => this.flex_row().overflow_x_scroll(),
                ScrollbarAxis::Both => this.overflow_scroll(),
            })
            // 单轴区域上 rgpui 会把另一轴的增量映射到本轴，导致纯水平手势触发垂直滚动。
            .restrict_scroll_to_axis()
            .child(content);

        div()
            .id(root_id)
            .size_full()
            .refine_style(&root_style)
            .relative()
            .child(scroll_area)
            .child(render_scrollbar(
                scrollbar_id,
                &scroll_handle,
                self.axis,
                window,
                cx,
            ))
    }
}

impl ScrollableElement for Div {}
impl<E> ScrollableElement for Stateful<E>
where
    E: ParentElement + Styled + Element,
    Self: InteractiveElement,
{
}

#[derive(IntoElement)]
struct ScrollbarLayer<H: ScrollbarHandle + Clone> {
    id: ElementId,
    axis: ScrollbarAxis,
    scroll_handle: Rc<H>,
}

impl<H> RenderOnce for ScrollbarLayer<H>
where
    H: ScrollbarHandle + Clone + 'static,
{
    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
        render_scrollbar(self.id, self.scroll_handle.as_ref(), self.axis, window, cx)
    }
}

#[inline]
#[track_caller]
pub(super) fn caller_id() -> ElementId {
    ElementId::CodeLocation(*Location::caller())
}

#[inline]
fn scroll_handle_for(id: &ElementId, window: &mut Window, cx: &mut App) -> ScrollHandle {
    window
        .use_keyed_state(id.clone(), cx, |_, _| ScrollHandle::default())
        .read(cx)
        .clone()
}

/// 从元素拷贝外层布局样式，使包装器与源元素在父布局中占位相同。
#[inline]
fn root_style_from<E>(element: &mut E) -> StyleRefinement
where
    E: Styled,
{
    let style = element.style();
    StyleRefinement {
        size: style.size.clone(),
        min_size: style.min_size.clone(),
        max_size: style.max_size.clone(),
        flex_grow: style.flex_grow,
        flex_shrink: style.flex_shrink,
        flex_basis: style.flex_basis,
        align_self: style.align_self,
        ..Default::default()
    }
}

#[inline]
fn render_scrollbar<H: ScrollbarHandle + Clone>(
    id: impl Into<ElementId>,
    scroll_handle: &H,
    axis: ScrollbarAxis,
    window: &mut Window,
    cx: &mut App,
) -> Div {
    // 检查器拾取元素时不渲染滚动条，以便拾取背景元素。
    let is_inspector_picking = window.is_inspector_picking(cx);
    if is_inspector_picking {
        return div();
    }

    div()
        .absolute()
        .top_0()
        .left_0()
        .right_0()
        .bottom_0()
        .child(Scrollbar::new(scroll_handle).id(id).axis(axis))
}

#[cfg(test)]
mod tests {
    use super::*;
    use crate::{
        Context, Render, ScrollDelta, ScrollWheelEvent, TestAppContext, VisualTestContext, point,
        px,
    };

    fn draw(cx: &mut VisualTestContext) {
        cx.run_until_parked();
        cx.update(|window, cx| {
            _ = window.draw(cx);
        });
    }

    fn scroll(cx: &mut VisualTestContext, x: f32, y: f32, dx: f32, dy: f32) {
        cx.simulate_event(ScrollWheelEvent {
            position: point(px(x), px(y)),
            delta: ScrollDelta::Pixels(point(px(dx), px(dy))),
            ..Default::default()
        });
        draw(cx);
    }

    fn row(selector: &'static str, height: f32) -> Div {
        div()
            .h(px(height))
            .flex_shrink_0()
            .debug_selector(move || selector.to_string())
    }

    fn plain_row(height: f32) -> Div {
        div().h(px(height)).flex_shrink_0()
    }

    fn item(selector: &'static str, width: f32) -> Div {
        div()
            .w(px(width))
            .h(px(20.))
            .flex_shrink_0()
            .debug_selector(move || selector.to_string())
    }

    fn plain_item(width: f32) -> Div {
        div().w(px(width)).h(px(20.)).flex_shrink_0()
    }

    struct SizeFullChildTest;

    impl Render for SizeFullChildTest {
        fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
            div()
                .w(px(100.))
                .h(px(100.))
                .overflow_y_scrollbar()
                .child(
                    div()
                        .size_full()
                        .child(crate::v_flex().children((0..4).map(|ix| {
                            div().h(px(50.)).flex_shrink_0().when(ix == 3, |this| {
                                this.debug_selector(|| "last-row".to_string())
                            })
                        }))),
                )
        }
    }

    struct AutoHeightParentTest;

    impl Render for AutoHeightParentTest {
        fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
            // 模拟 Dialog：面板高度为 auto（由内容驱动），主体是 flex_1 + overflow_hidden，
            // 可滚动内容应赋予面板其固有高度。
            // RGPUI 窗口根元素在 auto 尺寸下会拉伸到视口，所以把 auto 高度面板放在显式视口根之下。
            div().size_full().child(
                crate::v_flex()
                    .w(px(200.))
                    .child(
                        crate::v_flex().flex_1().overflow_hidden().child(
                            div().flex_1().overflow_hidden().child(
                                crate::v_flex()
                                    .size_full()
                                    .overflow_y_scrollbar()
                                    .child(plain_row(50.))
                                    .child(plain_row(50.)),
                            ),
                        ),
                    )
                    .child(row("auto-height-footer", 10.)),
            )
        }
    }

    struct MaxHeightParentTest;

    impl Render for MaxHeightParentTest {
        fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
            // 模拟带 max_h 的 Dialog：面板随内容增长到最大高度后，主体开始滚动。
            crate::v_flex()
                .w(px(200.))
                .max_h(px(100.))
                .child(
                    crate::v_flex().flex_1().overflow_hidden().child(
                        div().flex_1().overflow_hidden().child(
                            crate::v_flex()
                                .size_full()
                                .overflow_y_scrollbar()
                                .child(plain_row(50.))
                                .child(plain_row(50.))
                                .child(row("max-height-last-row", 50.)),
                        ),
                    ),
                )
                .child(row("max-height-footer", 10.))
        }
    }

    #[crate::test]
    fn auto_height_parent_gets_content_height(cx: &mut TestAppContext) {
        cx.update(crate::theme::init);
        let (_, cx) = cx.add_window_view(|_, _| AutoHeightParentTest);
        let cx: &mut VisualTestContext = cx;
        draw(cx);

        // 两行 50px 内容应将 footer 推到 y = 100。
        let footer = cx.debug_bounds("auto-height-footer").unwrap();
        assert_eq!(footer.top(), px(100.));
    }

    #[crate::test]
    fn max_height_parent_clamps_and_scrolls(cx: &mut TestAppContext) {
        cx.update(crate::theme::init);
        let (_, cx) = cx.add_window_view(|_, _| MaxHeightParentTest);
        let cx: &mut VisualTestContext = cx;
        draw(cx);

        // 内容 (150) + footer (10) 超过 max_h(100)：footer 固定在底部，主体得到剩余 90px 视口。
        let footer = cx.debug_bounds("max-height-footer").unwrap();
        assert_eq!(footer.top(), px(90.));

        let last_initial_y = cx.debug_bounds("max-height-last-row").unwrap().origin.y;
        scroll(cx, 10., 10., 0., -50.);
        assert!(cx.debug_bounds("max-height-last-row").unwrap().origin.y < last_initial_y);
    }

    struct GapLayoutTest;

    impl Render for GapLayoutTest {
        fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
            crate::v_flex()
                .w(px(100.))
                .h(px(100.))
                .gap(px(10.))
                .overflow_y_scrollbar()
                .child(row("first-row", 20.))
                .child(row("second-row", 20.))
        }
    }

    struct IssueGapRegressionTest;

    impl Render for IssueGapRegressionTest {
        fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
            div().w(px(100.)).h(px(100.)).child(
                crate::v_flex()
                    .flex_1()
                    .gap(px(30.))
                    .overflow_y_scrollbar()
                    .px(px(12.))
                    .pb(px(16.))
                    .children((0..5).map(|ix| {
                        div()
                            .h(px(20.))
                            .flex_shrink_0()
                            .when(ix == 0, |this| {
                                this.debug_selector(|| "issue-first-card".to_string())
                            })
                            .when(ix == 1, |this| {
                                this.debug_selector(|| "issue-second-card".to_string())
                            })
                            .when(ix == 4, |this| {
                                this.debug_selector(|| "issue-last-card".to_string())
                            })
                    })),
            )
        }
    }

    struct HorizontalGapLayoutTest;

    impl Render for HorizontalGapLayoutTest {
        fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
            crate::h_flex()
                .w(px(100.))
                .h(px(40.))
                .gap(px(10.))
                .overflow_x_scrollbar()
                .child(item("horizontal-first-item", 50.))
                .child(item("horizontal-second-item", 50.))
                .child(item("horizontal-last-item", 50.))
        }
    }

    struct OverflowScrollbarVerticalTest;

    impl Render for OverflowScrollbarVerticalTest {
        fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
            crate::v_flex()
                .w(px(100.))
                .h(px(100.))
                .gap(px(10.))
                .overflow_scrollbar()
                .child(row("both-axis-vertical-first-row", 50.))
                .child(row("both-axis-vertical-second-row", 50.))
                .child(row("both-axis-vertical-last-row", 50.))
        }
    }

    struct OverflowScrollbarHorizontalTest;

    impl Render for OverflowScrollbarHorizontalTest {
        fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
            crate::h_flex()
                .w(px(100.))
                .h(px(40.))
                .gap(px(10.))
                .overflow_scrollbar()
                .child(item("both-axis-horizontal-first-item", 50.))
                .child(item("both-axis-horizontal-second-item", 50.))
                .child(item("both-axis-horizontal-last-item", 50.))
        }
    }

    struct IndependentScrollablesTest;

    impl Render for IndependentScrollablesTest {
        fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
            crate::h_flex()
                .w(px(220.))
                .h(px(100.))
                .gap(px(20.))
                .child(
                    div().w(px(100.)).h(px(100.)).overflow_y_scrollbar().child(
                        crate::v_flex()
                            .child(plain_row(50.))
                            .child(plain_row(50.))
                            .child(row("left-scrollable-last-row", 50.)),
                    ),
                )
                .child(
                    div().w(px(100.)).h(px(100.)).overflow_y_scrollbar().child(
                        crate::v_flex()
                            .child(plain_row(50.))
                            .child(plain_row(50.))
                            .child(row("right-scrollable-last-row", 50.)),
                    ),
                )
        }
    }

    struct NoOverflowTest;

    impl Render for NoOverflowTest {
        fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
            crate::v_flex()
                .w(px(100.))
                .h(px(100.))
                .gap(px(10.))
                .overflow_y_scrollbar()
                .child(row("no-overflow-first-row", 20.))
                .child(row("no-overflow-second-row", 20.))
        }
    }

    #[crate::test]
    fn vertical_scrollbar_scrolls_past_a_size_full_child(cx: &mut TestAppContext) {
        cx.update(crate::theme::init);
        let (_, cx) = cx.add_window_view(|_, _| SizeFullChildTest);
        let cx: &mut VisualTestContext = cx;
        draw(cx);

        let initial_y = cx.debug_bounds("last-row").unwrap().origin.y;
        scroll(cx, 10., 10., 0., -50.);

        assert!(cx.debug_bounds("last-row").unwrap().origin.y < initial_y);
    }

    #[crate::test]
    fn vertical_scrollbar_preserves_source_gap(cx: &mut TestAppContext) {
        cx.update(crate::theme::init);
        let (_, cx) = cx.add_window_view(|_, _| GapLayoutTest);
        let cx: &mut VisualTestContext = cx;
        draw(cx);

        let first = cx.debug_bounds("first-row").unwrap();
        let second = cx.debug_bounds("second-row").unwrap();
        assert_eq!(second.top() - first.bottom(), px(10.));
    }

    #[crate::test]
    fn overflow_y_scrollbar_preserves_gap_for_exact_issue_chain(cx: &mut TestAppContext) {
        cx.update(crate::theme::init);
        let (_, cx) = cx.add_window_view(|_, _| IssueGapRegressionTest);
        let cx: &mut VisualTestContext = cx;
        draw(cx);

        let first = cx.debug_bounds("issue-first-card").unwrap();
        let second = cx.debug_bounds("issue-second-card").unwrap();
        let last_initial_y = cx.debug_bounds("issue-last-card").unwrap().origin.y;

        assert_eq!(second.top() - first.bottom(), px(30.));
        assert_eq!(first.left(), px(12.));

        scroll(cx, 10., 10., 0., -50.);

        let first_after_scroll = cx.debug_bounds("issue-first-card").unwrap();
        let second_after_scroll = cx.debug_bounds("issue-second-card").unwrap();
        let last_after_scroll_y = cx.debug_bounds("issue-last-card").unwrap().origin.y;

        assert_eq!(
            second_after_scroll.top() - first_after_scroll.bottom(),
            px(30.)
        );
        assert_eq!(first_after_scroll.left(), px(12.));
        assert!(last_after_scroll_y < last_initial_y);
    }

    #[crate::test]
    fn horizontal_scrollbar_preserves_source_gap_and_scrolls(cx: &mut TestAppContext) {
        cx.update(crate::theme::init);
        let (_, cx) = cx.add_window_view(|_, _| HorizontalGapLayoutTest);
        let cx: &mut VisualTestContext = cx;
        draw(cx);

        let first = cx.debug_bounds("horizontal-first-item").unwrap();
        let second = cx.debug_bounds("horizontal-second-item").unwrap();
        let last_initial_x = cx.debug_bounds("horizontal-last-item").unwrap().origin.x;

        assert_eq!(second.left() - first.right(), px(10.));

        scroll(cx, 10., 10., -50., 0.);

        let first_after_scroll = cx.debug_bounds("horizontal-first-item").unwrap();
        let second_after_scroll = cx.debug_bounds("horizontal-second-item").unwrap();
        let last_after_scroll_x = cx.debug_bounds("horizontal-last-item").unwrap().origin.x;

        assert_eq!(
            second_after_scroll.left() - first_after_scroll.right(),
            px(10.)
        );
        assert!(last_after_scroll_x < last_initial_x);
    }

    #[crate::test]
    fn overflow_scrollbar_preserves_vertical_source_gap(cx: &mut TestAppContext) {
        cx.update(crate::theme::init);
        let (_, cx) = cx.add_window_view(|_, _| OverflowScrollbarVerticalTest);
        let cx: &mut VisualTestContext = cx;
        draw(cx);

        let first = cx.debug_bounds("both-axis-vertical-first-row").unwrap();
        let second = cx.debug_bounds("both-axis-vertical-second-row").unwrap();

        assert_eq!(second.top() - first.bottom(), px(10.));
    }

    #[crate::test]
    fn overflow_scrollbar_preserves_gap_and_scrolls_horizontally(cx: &mut TestAppContext) {
        cx.update(crate::theme::init);
        let (_, cx) = cx.add_window_view(|_, _| OverflowScrollbarHorizontalTest);
        let cx: &mut VisualTestContext = cx;
        draw(cx);

        let first = cx.debug_bounds("both-axis-horizontal-first-item").unwrap();
        let second = cx.debug_bounds("both-axis-horizontal-second-item").unwrap();
        let last_initial_x = cx
            .debug_bounds("both-axis-horizontal-last-item")
            .unwrap()
            .origin
            .x;

        assert_eq!(second.left() - first.right(), px(10.));

        scroll(cx, 10., 10., -50., 0.);

        let first_after_scroll = cx.debug_bounds("both-axis-horizontal-first-item").unwrap();
        let second_after_scroll = cx.debug_bounds("both-axis-horizontal-second-item").unwrap();
        let last_after_scroll_x = cx
            .debug_bounds("both-axis-horizontal-last-item")
            .unwrap()
            .origin
            .x;

        assert_eq!(
            second_after_scroll.left() - first_after_scroll.right(),
            px(10.)
        );
        assert!(last_after_scroll_x < last_initial_x);
    }

    #[crate::test]
    fn multiple_scrollables_keep_independent_scroll_state(cx: &mut TestAppContext) {
        cx.update(crate::theme::init);
        let (_, cx) = cx.add_window_view(|_, _| IndependentScrollablesTest);
        let cx: &mut VisualTestContext = cx;
        draw(cx);

        let left_initial = cx.debug_bounds("left-scrollable-last-row").unwrap();
        let right_initial = cx.debug_bounds("right-scrollable-last-row").unwrap();

        scroll(cx, 10., 10., 0., -50.);

        let left_after_scroll = cx.debug_bounds("left-scrollable-last-row").unwrap();
        let right_after_scroll = cx.debug_bounds("right-scrollable-last-row").unwrap();

        assert!(left_after_scroll.top() < left_initial.top());
        assert_eq!(right_after_scroll.top(), right_initial.top());
    }

    #[crate::test]
    fn vertical_scrollbar_does_not_scroll_when_content_does_not_overflow(cx: &mut TestAppContext) {
        cx.update(crate::theme::init);
        let (_, cx) = cx.add_window_view(|_, _| NoOverflowTest);
        let cx: &mut VisualTestContext = cx;
        draw(cx);

        let first = cx.debug_bounds("no-overflow-first-row").unwrap();
        let second = cx.debug_bounds("no-overflow-second-row").unwrap();

        assert_eq!(second.top() - first.bottom(), px(10.));

        scroll(cx, 10., 10., 0., -50.);

        let first_after_scroll = cx.debug_bounds("no-overflow-first-row").unwrap();
        let second_after_scroll = cx.debug_bounds("no-overflow-second-row").unwrap();

        assert_eq!(first_after_scroll.top(), first.top());
        assert_eq!(second_after_scroll.top(), second.top());
        assert_eq!(
            second_after_scroll.top() - first_after_scroll.bottom(),
            px(10.)
        );
    }

    #[crate::test]
    fn horizontal_scrollbar_does_not_scroll_when_content_does_not_overflow(
        cx: &mut TestAppContext,
    ) {
        struct HorizontalNoOverflowTest;

        impl Render for HorizontalNoOverflowTest {
            fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
                crate::h_flex()
                    .w(px(100.))
                    .h(px(40.))
                    .gap(px(10.))
                    .overflow_x_scrollbar()
                    .child(item("no-overflow-first-item", 20.))
                    .child(item("no-overflow-second-item", 20.))
                    .child(plain_item(20.))
            }
        }

        cx.update(crate::theme::init);
        let (_, cx) = cx.add_window_view(|_, _| HorizontalNoOverflowTest);
        let cx: &mut VisualTestContext = cx;
        draw(cx);

        let first = cx.debug_bounds("no-overflow-first-item").unwrap();
        let second = cx.debug_bounds("no-overflow-second-item").unwrap();

        assert_eq!(second.left() - first.right(), px(10.));

        scroll(cx, 10., 10., -50., 0.);

        let first_after_scroll = cx.debug_bounds("no-overflow-first-item").unwrap();
        let second_after_scroll = cx.debug_bounds("no-overflow-second-item").unwrap();

        assert_eq!(first_after_scroll.left(), first.left());
        assert_eq!(second_after_scroll.left(), second.left());
        assert_eq!(
            second_after_scroll.left() - first_after_scroll.right(),
            px(10.)
        );
    }
}