From ac8895c3ae092f94c2414ec7ae7374b8debab0a9 Mon Sep 17 00:00:00 2001
From: shuppy <dazabani@igalia.com>
Date: Wed, 24 Sep 2025 04:35:08 +0800
Subject: [PATCH] script: Move keyboard scrolling to script (#39371)

Instead of having every single embedder implement keyboard scrolling,
handle it in script in the default key event handler. This allows
properly targeting the scroll events to their scroll containers as well
as appropriately sizing "page up" and "page down" scroll deltas.

This change means that when you use the keyboard to scroll, the focused
or most recently clicked `<iframe>` or overflow scroll container is
scrolled, rather than the main frame.

In addition, when a particular scroll frame is larger than its content
in the axis of the scroll, the scrolling operation is chained to
the parent (as in other browsers). One exception is for `<iframe>`s,
which will be implemented in a followup change.

Testing: automated tests runnable locally with `mach test-wpt --product
servodriver`

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
---
 components/layout/flow/root.rs                |   4 +-
 components/layout/layout_impl.rs              |   6 +-
 components/layout/query.rs                    |  23 ++-
 components/layout/style_ext.rs                |  25 +--
 components/script/dom/document.rs             |   5 +
 .../script/dom/document_event_handler.rs      |  78 ++++++-
 components/script/dom/element.rs              | 111 +++-------
 components/script/dom/html/htmlelement.rs     |   6 +-
 components/script/dom/mod.rs                  |   1 +
 components/script/dom/node.rs                 |   9 +
 components/script/dom/scrolling_box.rs        | 147 +++++++++++++
 components/script/dom/window.rs               |   6 +-
 components/shared/layout/lib.rs               |  43 +++-
 ports/servoshell/desktop/app_state.rs         |  43 +---
 ports/servoshell/desktop/headed_window.rs     |   6 -
 ports/servoshell/desktop/headless_window.rs   |   6 -
 ports/servoshell/desktop/window_trait.rs      |   2 +-
 tests/wpt/mozilla/meta/MANIFEST.json          |   9 +
 .../mozilla/tests/css/keyboard-scrolling.html | 195 ++++++++++++++++++
 19 files changed, 540 insertions(+), 185 deletions(-)
 create mode 100644 components/script/dom/scrolling_box.rs
 create mode 100644 tests/wpt/mozilla/tests/css/keyboard-scrolling.html

diff --git a/components/layout/flow/root.rs b/components/layout/flow/root.rs
index 3921270a031..50e07a1f565 100644
--- a/components/layout/flow/root.rs
+++ b/components/layout/flow/root.rs
@@ -8,7 +8,7 @@ use compositing_traits::display_list::AxesScrollSensitivity;
 use euclid::Rect;
 use euclid::default::Size2D as UntypedSize2D;
 use layout_api::wrapper_traits::{LayoutNode, ThreadSafeLayoutElement, ThreadSafeLayoutNode};
-use layout_api::{LayoutElementType, LayoutNodeType};
+use layout_api::{AxesOverflow, LayoutElementType, LayoutNodeType};
 use malloc_size_of_derive::MallocSizeOf;
 use script::layout_dom::{ServoLayoutNode, ServoThreadSafeLayoutNode};
 use servo_arc::Arc;
@@ -31,7 +31,7 @@ use crate::fragment_tree::{FragmentFlags, FragmentTree};
 use crate::geom::{LogicalVec2, PhysicalSize};
 use crate::positioned::{AbsolutelyPositionedBox, PositioningContext};
 use crate::replaced::ReplacedContents;
-use crate::style_ext::{AxesOverflow, Display, DisplayGeneratingBox, DisplayInside};
+use crate::style_ext::{Display, DisplayGeneratingBox, DisplayInside};
 use crate::taffy::{TaffyItemBox, TaffyItemBoxInner};
 use crate::{DefiniteContainingBlock, PropagatedBoxTreeData};
 
diff --git a/components/layout/layout_impl.rs b/components/layout/layout_impl.rs
index 6c7c2bac3ec..f83470c4155 100644
--- a/components/layout/layout_impl.rs
+++ b/components/layout/layout_impl.rs
@@ -29,7 +29,7 @@ use layout_api::{
     BoxAreaType, IFrameSizes, Layout, LayoutConfig, LayoutDamage, LayoutFactory,
     OffsetParentResponse, PropertyRegistration, QueryMsg, ReflowGoal, ReflowPhasesRun,
     ReflowRequest, ReflowRequestRestyle, ReflowResult, RegisterPropertyError,
-    ScrollContainerQueryType, ScrollContainerResponse, TrustedNodeAddress,
+    ScrollContainerQueryFlags, ScrollContainerResponse, TrustedNodeAddress,
 };
 use log::{debug, error, warn};
 use malloc_size_of::{MallocConditionalSizeOf, MallocSizeOf, MallocSizeOfOps};
@@ -334,10 +334,10 @@ impl Layout for LayoutThread {
     fn query_scroll_container(
         &self,
         node: TrustedNodeAddress,
-        query_type: ScrollContainerQueryType,
+        flags: ScrollContainerQueryFlags,
     ) -> Option<ScrollContainerResponse> {
         let node = unsafe { ServoLayoutNode::new(&node) };
-        process_scroll_container_query(node, query_type)
+        process_scroll_container_query(node, flags)
     }
 
     #[servo_tracing::instrument(skip_all)]
diff --git a/components/layout/query.rs b/components/layout/query.rs
index 4776e5f0fbe..e73344a7ad8 100644
--- a/components/layout/query.rs
+++ b/components/layout/query.rs
@@ -12,8 +12,8 @@ use euclid::{SideOffsets2D, Size2D};
 use itertools::Itertools;
 use layout_api::wrapper_traits::{LayoutNode, ThreadSafeLayoutElement, ThreadSafeLayoutNode};
 use layout_api::{
-    BoxAreaType, LayoutElementType, LayoutNodeType, OffsetParentResponse, ScrollContainerQueryType,
-    ScrollContainerResponse,
+    BoxAreaType, LayoutElementType, LayoutNodeType, OffsetParentResponse,
+    ScrollContainerQueryFlags, ScrollContainerResponse,
 };
 use script::layout_dom::{ServoLayoutNode, ServoThreadSafeLayoutNode};
 use servo_arc::Arc as ServoArc;
@@ -677,7 +677,7 @@ pub fn process_offset_parent_query(
 #[inline]
 pub(crate) fn process_scroll_container_query(
     node: ServoLayoutNode<'_>,
-    query_type: ScrollContainerQueryType,
+    query_flags: ScrollContainerQueryFlags,
 ) -> Option<ScrollContainerResponse> {
     let layout_data = node.to_threadsafe().inner_layout_data()?;
 
@@ -686,15 +686,15 @@ pub(crate) fn process_scroll_container_query(
     let layout_box = layout_data.self_box.borrow();
     let layout_box = layout_box.as_ref()?;
 
-    let (mut current_position_value, flags) = layout_box
-        .with_first_base(|base| (base.style.clone_position(), base.base_fragment_info.flags))?;
+    let (style, flags) =
+        layout_box.with_first_base(|base| (base.style.clone(), base.base_fragment_info.flags))?;
 
     // - The element is the root element.
     // - The element is the body element.
     //
     // Note: We only do this for `scrollParent`, which needs to be null. But `scrollIntoView` on the
     // `<body>` or root element should still bring it into view by scrolling the viewport.
-    if query_type == ScrollContainerQueryType::ForScrollParent &&
+    if query_flags.contains(ScrollContainerQueryFlags::ForScrollParent) &&
         flags.intersects(
             FragmentFlags::IS_ROOT_ELEMENT | FragmentFlags::IS_BODY_ELEMENT_OF_HTML_ELEMENT_ROOT,
         )
@@ -702,6 +702,15 @@ pub(crate) fn process_scroll_container_query(
         return None;
     }
 
+    if query_flags.contains(ScrollContainerQueryFlags::Inclusive) &&
+        style.establishes_scroll_container(flags)
+    {
+        return Some(ScrollContainerResponse::Element(
+            node.opaque().into(),
+            style.effective_overflow(flags),
+        ));
+    }
+
     // - The element’s computed value of the position property is fixed and no ancestor
     //   establishes a fixed position containing block.
     //
@@ -721,6 +730,7 @@ pub(crate) fn process_scroll_container_query(
     // Notes: We don't follow the specification exactly below, but we follow the spirit.
     //
     // TODO: Handle the situation where the ancestor is "closed-shadow-hidden" from the element.
+    let mut current_position_value = style.clone_position();
     let mut current_ancestor = node.as_element()?;
     while let Some(ancestor) = current_ancestor.traversal_parent() {
         current_ancestor = ancestor;
@@ -757,6 +767,7 @@ pub(crate) fn process_scroll_container_query(
         if ancestor_style.establishes_scroll_container(ancestor_flags) {
             return Some(ScrollContainerResponse::Element(
                 ancestor.as_node().opaque().into(),
+                ancestor_style.effective_overflow(ancestor_flags),
             ));
         }
 
diff --git a/components/layout/style_ext.rs b/components/layout/style_ext.rs
index 5c2ea84000c..53ca0b87405 100644
--- a/components/layout/style_ext.rs
+++ b/components/layout/style_ext.rs
@@ -3,6 +3,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 use app_units::Au;
+use layout_api::AxesOverflow;
 use malloc_size_of_derive::MallocSizeOf;
 use style::Zero;
 use style::color::AbsoluteColor;
@@ -58,30 +59,6 @@ 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 Default for AxesOverflow {
-    fn default() -> Self {
-        Self {
-            x: Overflow::Visible,
-            y: Overflow::Visible,
-        }
-    }
-}
-
-impl From<&ComputedValues> for AxesOverflow {
-    fn from(style: &ComputedValues) -> Self {
-        Self {
-            x: style.clone_overflow_x(),
-            y: style.clone_overflow_y(),
-        }
-    }
-}
-
 impl DisplayGeneratingBox {
     pub(crate) fn display_inside(&self) -> DisplayInside {
         match *self {
diff --git a/components/script/dom/document.rs b/components/script/dom/document.rs
index a9c7f946ced..b97e3b3e052 100644
--- a/components/script/dom/document.rs
+++ b/components/script/dom/document.rs
@@ -174,6 +174,7 @@ use crate::dom::processinginstruction::ProcessingInstruction;
 use crate::dom::promise::Promise;
 use crate::dom::range::Range;
 use crate::dom::resizeobserver::{ResizeObservationDepth, ResizeObserver};
+use crate::dom::scrolling_box::{ScrollingBox, ScrollingBoxSource};
 use crate::dom::selection::Selection;
 use crate::dom::servoparser::ServoParser;
 use crate::dom::shadowroot::ShadowRoot;
@@ -4447,6 +4448,10 @@ impl Document {
     pub(crate) fn set_active_sandboxing_flag_set(&self, flags: SandboxingFlagSet) {
         self.active_sandboxing_flag_set.set(flags)
     }
+
+    pub(crate) fn viewport_scrolling_box(&self) -> ScrollingBox {
+        ScrollingBox::new(ScrollingBoxSource::Viewport(DomRoot::from_ref(self)))
+    }
 }
 
 #[allow(non_snake_case)]
diff --git a/components/script/dom/document_event_handler.rs b/components/script/dom/document_event_handler.rs
index 734a081a1fd..f87b58f78bb 100644
--- a/components/script/dom/document_event_handler.rs
+++ b/components/script/dom/document_event_handler.rs
@@ -18,17 +18,17 @@ use embedder_traits::{
     MouseLeftViewportEvent, ScrollEvent, TouchEvent as EmbedderTouchEvent, TouchEventType, TouchId,
     UntrustedNodeAddress, WheelEvent as EmbedderWheelEvent,
 };
-use euclid::Point2D;
+use euclid::{Point2D, Vector2D};
 use ipc_channel::ipc;
 use keyboard_types::{Code, Key, KeyState, Modifiers, NamedKey};
-use layout_api::node_id_from_scroll_id;
+use layout_api::{ScrollContainerQueryFlags, node_id_from_scroll_id};
 use script_bindings::codegen::GenericBindings::DocumentBinding::DocumentMethods;
 use script_bindings::codegen::GenericBindings::EventBinding::EventMethods;
 use script_bindings::codegen::GenericBindings::NavigatorBinding::NavigatorMethods;
 use script_bindings::codegen::GenericBindings::NodeBinding::NodeMethods;
 use script_bindings::codegen::GenericBindings::PerformanceBinding::PerformanceMethods;
 use script_bindings::codegen::GenericBindings::TouchBinding::TouchMethods;
-use script_bindings::codegen::GenericBindings::WindowBinding::WindowMethods;
+use script_bindings::codegen::GenericBindings::WindowBinding::{ScrollBehavior, WindowMethods};
 use script_bindings::inheritance::Castable;
 use script_bindings::num::Finite;
 use script_bindings::root::{Dom, DomRoot, DomSlice};
@@ -50,6 +50,7 @@ use crate::dom::gamepad::gamepadevent::GamepadEventType;
 use crate::dom::inputevent::HitTestResult;
 use crate::dom::node::{self, Node, ShadowIncluding};
 use crate::dom::pointerevent::PointerId;
+use crate::dom::scrolling_box::ScrollingBoxAxis;
 use crate::dom::types::{
     ClipboardEvent, CompositionEvent, DataTransfer, Element, Event, EventTarget, GlobalScope,
     HTMLAnchorElement, KeyboardEvent, MouseEvent, PointerEvent, Touch, TouchEvent, TouchList,
@@ -78,6 +79,8 @@ pub(crate) struct DocumentEventHandler {
     last_click_info: DomRefCell<Option<(Instant, Point2D<f32, CSSPixel>)>>,
     /// The element that is currently hovered by the cursor.
     current_hover_target: MutNullableDom<Element>,
+    /// The element that was most recently clicked.
+    most_recently_clicked_element: MutNullableDom<Element>,
     /// The most recent mouse movement point, used for processing `mouseleave` events.
     #[no_trace]
     most_recent_mousemove_point: Cell<Option<Point2D<f32, CSSPixel>>>,
@@ -100,6 +103,7 @@ impl DocumentEventHandler {
             mouse_move_event_index: Default::default(),
             last_click_info: Default::default(),
             current_hover_target: Default::default(),
+            most_recently_clicked_element: Default::default(),
             most_recent_mousemove_point: Default::default(),
             current_cursor: Default::default(),
             active_touch_points: Default::default(),
@@ -581,6 +585,8 @@ impl DocumentEventHandler {
         match event.action {
             // https://w3c.github.io/uievents/#handle-native-mouse-click
             MouseButtonAction::Click => {
+                self.most_recently_clicked_element.set(Some(&el));
+
                 el.set_click_in_progress(true);
                 dom_event.dispatch(node.upcast(), false, can_gc);
                 el.set_click_in_progress(false);
@@ -1472,4 +1478,70 @@ impl DocumentEventHandler {
             document.handle_element_scroll_event(&element);
         }
     }
+
+    pub(crate) fn run_default_keyboard_event_handler(&self, event: &KeyboardEvent) {
+        if event.upcast::<Event>().type_() != atom!("keydown") {
+            return;
+        }
+        if !event.modifiers().is_empty() {
+            return;
+        }
+
+        let scroll_axis = match event.key() {
+            Key::Named(
+                NamedKey::Home |
+                NamedKey::End |
+                NamedKey::PageDown |
+                NamedKey::PageUp |
+                NamedKey::ArrowUp |
+                NamedKey::ArrowDown,
+            ) => ScrollingBoxAxis::Y,
+            Key::Named(NamedKey::ArrowLeft | NamedKey::ArrowRight) => ScrollingBoxAxis::X,
+            _ => return,
+        };
+
+        let document = self.window.Document();
+        let mut scrolling_box = document
+            .get_focused_element()
+            .or(self.most_recently_clicked_element.get())
+            .and_then(|element| element.scrolling_box(ScrollContainerQueryFlags::Inclusive))
+            .unwrap_or_else(|| document.viewport_scrolling_box());
+
+        while !scrolling_box.can_keyboard_scroll_in_axis(scroll_axis) {
+            // Always fall back to trying to scroll the entire document.
+            if scrolling_box.is_viewport() {
+                break;
+            }
+            let parent = scrolling_box
+                .parent()
+                .unwrap_or_else(|| document.viewport_scrolling_box());
+            scrolling_box = parent;
+        }
+
+        const LINE_HEIGHT: f32 = 76.0;
+        const LINE_WIDTH: f32 = 76.0;
+
+        let current_scroll_offset = scrolling_box.scroll_position();
+        let delta = match event.key() {
+            Key::Named(NamedKey::Home) => Vector2D::new(0.0, -current_scroll_offset.y),
+            Key::Named(NamedKey::End) => Vector2D::new(
+                0.0,
+                -current_scroll_offset.y + scrolling_box.content_size().height -
+                    scrolling_box.size().height,
+            ),
+            Key::Named(NamedKey::PageDown) => {
+                Vector2D::new(0.0, scrolling_box.size().height - 2.0 * LINE_HEIGHT)
+            },
+            Key::Named(NamedKey::PageUp) => {
+                Vector2D::new(0.0, 2.0 * LINE_HEIGHT - scrolling_box.size().height)
+            },
+            Key::Named(NamedKey::ArrowUp) => Vector2D::new(0.0, -LINE_HEIGHT),
+            Key::Named(NamedKey::ArrowDown) => Vector2D::new(0.0, LINE_HEIGHT),
+            Key::Named(NamedKey::ArrowLeft) => Vector2D::new(-LINE_WIDTH, 0.0),
+            Key::Named(NamedKey::ArrowRight) => Vector2D::new(LINE_WIDTH, 0.0),
+            _ => return,
+        };
+
+        scrolling_box.scroll_to(delta + current_scroll_offset, ScrollBehavior::Auto);
+    }
 }
diff --git a/components/script/dom/element.rs b/components/script/dom/element.rs
index 57dfa35e501..07a46384e8e 100644
--- a/components/script/dom/element.rs
+++ b/components/script/dom/element.rs
@@ -25,7 +25,7 @@ use html5ever::{LocalName, Namespace, Prefix, QualName, local_name, namespace_pr
 use js::jsapi::Heap;
 use js::jsval::JSVal;
 use js::rust::HandleObject;
-use layout_api::{LayoutDamage, ScrollContainerQueryType, ScrollContainerResponse};
+use layout_api::{LayoutDamage, ScrollContainerQueryFlags, ScrollContainerResponse};
 use net_traits::ReferrerPolicy;
 use net_traits::request::CorsSettings;
 use selectors::Element as SelectorsElement;
@@ -61,7 +61,7 @@ use style::values::{AtomIdent, AtomString, CSSFloat, computed, specified};
 use style::{ArcSlice, CaseSensitivityExt, dom_apis, thread_state};
 use stylo_atoms::Atom;
 use stylo_dom::ElementState;
-use webrender_api::units::{LayoutSize, LayoutVector2D};
+use webrender_api::units::LayoutVector2D;
 use xml5ever::serialize::TraversalScope::{
     ChildrenOnly as XmlChildrenOnly, IncludeNode as XmlIncludeNode,
 };
@@ -166,6 +166,7 @@ use crate::dom::node::{
 use crate::dom::nodelist::NodeList;
 use crate::dom::promise::Promise;
 use crate::dom::raredata::ElementRareData;
+use crate::dom::scrolling_box::{ScrollingBox, ScrollingBoxSource};
 use crate::dom::servoparser::ServoParser;
 use crate::dom::shadowroot::{IsUserAgentWidget, ShadowRoot};
 use crate::dom::text::Text;
@@ -274,60 +275,6 @@ impl FromStr for AdjacentPosition {
     }
 }
 
-/// Represents a scrolling box that can be either an element or the viewport
-/// <https://drafts.csswg.org/cssom-view/#scrolling-box>
-enum ScrollingBox {
-    Element(DomRoot<Element>),
-    Viewport(DomRoot<Document>),
-}
-
-impl ScrollingBox {
-    fn scroll_position(&self) -> LayoutVector2D {
-        match self {
-            ScrollingBox::Element(element) => element
-                .owner_window()
-                .scroll_offset_query(element.upcast::<Node>()),
-            ScrollingBox::Viewport(document) => document.window().scroll_offset(),
-        }
-    }
-
-    fn size(&self) -> LayoutSize {
-        match self {
-            ScrollingBox::Element(element) => element.client_rect().size.to_f32().cast_unit(),
-            ScrollingBox::Viewport(document) => {
-                document.window().viewport_details().size.cast_unit()
-            },
-        }
-    }
-
-    fn parent(&self) -> Option<ScrollingBox> {
-        match self {
-            ScrollingBox::Element(element) => element.scrolling_box(),
-            ScrollingBox::Viewport(_) => None,
-        }
-    }
-
-    fn node(&self) -> &Node {
-        match self {
-            ScrollingBox::Element(element) => element.upcast(),
-            ScrollingBox::Viewport(document) => document.upcast(),
-        }
-    }
-
-    pub(crate) fn scroll_to(&self, position: LayoutVector2D, behavior: ScrollBehavior) {
-        match self {
-            ScrollingBox::Element(element) => {
-                element
-                    .owner_window()
-                    .scroll_an_element(element, position.x, position.y, behavior);
-            },
-            ScrollingBox::Viewport(document) => {
-                document.window().scroll(position.x, position.y, behavior);
-            },
-        }
-    }
-}
-
 //
 // Element methods
 //
@@ -889,16 +836,19 @@ impl Element {
     }
 
     #[allow(unsafe_code)]
-    fn scrolling_box(&self) -> Option<ScrollingBox> {
+    pub(crate) fn scrolling_box(&self, flags: ScrollContainerQueryFlags) -> Option<ScrollingBox> {
         self.owner_window()
-            .scroll_container_query(self.upcast(), ScrollContainerQueryType::ForScrollIntoView)
+            .scroll_container_query(self.upcast(), flags)
             .and_then(|response| match response {
-                ScrollContainerResponse::Viewport => {
-                    Some(ScrollingBox::Viewport(self.owner_document()))
-                },
-                ScrollContainerResponse::Element(parent_node_address) => {
+                ScrollContainerResponse::Viewport => Some(ScrollingBox::new(
+                    ScrollingBoxSource::Viewport(self.owner_document()),
+                )),
+                ScrollContainerResponse::Element(parent_node_address, axes_overflow) => {
                     let node = unsafe { from_untrusted_node_address(parent_node_address) };
-                    Some(ScrollingBox::Element(DomRoot::downcast(node)?))
+                    Some(ScrollingBox::new(ScrollingBoxSource::Element(
+                        DomRoot::downcast(node)?,
+                        axes_overflow,
+                    )))
                 },
             })
     }
@@ -913,7 +863,7 @@ impl Element {
     ) {
         // Step 1: For each ancestor element or viewport that establishes a scrolling box `scrolling
         // box`, in order of innermost to outermost scrolling box, run these substeps:
-        let mut parent_scrolling_box = self.scrolling_box();
+        let mut parent_scrolling_box = self.scrolling_box(ScrollContainerQueryFlags::empty());
         while let Some(scrolling_box) = parent_scrolling_box {
             parent_scrolling_box = scrolling_box.parent();
 
@@ -987,21 +937,22 @@ impl Element {
         // to follow it using our own geometry types.
         //
         // TODO: This makes the code below wrong for the purposes of writing modes.
-        let (adjusted_element_top_left, adjusted_element_bottom_right) = match scrolling_box {
-            ScrollingBox::Viewport(_) => (target_top_left, target_bottom_right),
-            ScrollingBox::Element(scrolling_element) => {
-                let scrolling_padding_rect_top_left = scrolling_element
-                    .upcast::<Node>()
-                    .padding_box()
-                    .unwrap_or_default()
-                    .origin
-                    .map(to_pixel);
-                (
-                    target_top_left - scrolling_padding_rect_top_left.to_vector(),
-                    target_bottom_right - scrolling_padding_rect_top_left.to_vector(),
-                )
-            },
-        };
+        let (adjusted_element_top_left, adjusted_element_bottom_right) =
+            match scrolling_box.target() {
+                ScrollingBoxSource::Viewport(_) => (target_top_left, target_bottom_right),
+                ScrollingBoxSource::Element(scrolling_element, _) => {
+                    let scrolling_padding_rect_top_left = scrolling_element
+                        .upcast::<Node>()
+                        .padding_box()
+                        .unwrap_or_default()
+                        .origin
+                        .map(to_pixel);
+                    (
+                        target_top_left - scrolling_padding_rect_top_left.to_vector(),
+                        target_bottom_right - scrolling_padding_rect_top_left.to_vector(),
+                    )
+                },
+            };
 
         let scrolling_box_size = scrolling_box.size();
         let current_scroll_position = scrolling_box.scroll_position();
@@ -5062,7 +5013,7 @@ impl Element {
             .inspect(|states| states.for_each_state(callback));
     }
 
-    fn client_rect(&self) -> Rect<i32> {
+    pub(crate) fn client_rect(&self) -> Rect<i32> {
         let doc = self.node.owner_doc();
 
         if let Some(rect) = self
diff --git a/components/script/dom/html/htmlelement.rs b/components/script/dom/html/htmlelement.rs
index 90196897106..43eb5206633 100644
--- a/components/script/dom/html/htmlelement.rs
+++ b/components/script/dom/html/htmlelement.rs
@@ -9,7 +9,7 @@ use std::rc::Rc;
 use dom_struct::dom_struct;
 use html5ever::{LocalName, Prefix, QualName, local_name, ns};
 use js::rust::HandleObject;
-use layout_api::{QueryMsg, ScrollContainerQueryType, ScrollContainerResponse};
+use layout_api::{QueryMsg, ScrollContainerQueryFlags, ScrollContainerResponse};
 use script_bindings::codegen::GenericBindings::DocumentBinding::DocumentMethods;
 use style::attr::AttrValue;
 use stylo_dom::ElementState;
@@ -450,10 +450,10 @@ impl HTMLElementMethods<crate::DomTypeHolder> for HTMLElement {
     #[allow(unsafe_code)]
     fn GetScrollParent(&self) -> Option<DomRoot<Element>> {
         self.owner_window()
-            .scroll_container_query(self.upcast(), ScrollContainerQueryType::ForScrollParent)
+            .scroll_container_query(self.upcast(), ScrollContainerQueryFlags::ForScrollParent)
             .and_then(|response| match response {
                 ScrollContainerResponse::Viewport => self.owner_document().GetScrollingElement(),
-                ScrollContainerResponse::Element(parent_node_address) => {
+                ScrollContainerResponse::Element(parent_node_address, _) => {
                     let node = unsafe { from_untrusted_node_address(parent_node_address) };
                     DomRoot::downcast(node)
                 },
diff --git a/components/script/dom/mod.rs b/components/script/dom/mod.rs
index 796af3f30e1..f80d9be4eaf 100644
--- a/components/script/dom/mod.rs
+++ b/components/script/dom/mod.rs
@@ -428,6 +428,7 @@ pub(crate) mod resizeobserverentry;
 pub(crate) mod resizeobserversize;
 pub(crate) mod response;
 pub(crate) mod screen;
+mod scrolling_box;
 pub(crate) mod securitypolicyviolationevent;
 pub(crate) mod selection;
 #[allow(dead_code)]
diff --git a/components/script/dom/node.rs b/components/script/dom/node.rs
index 85e7ceee0b6..d0df630a85b 100644
--- a/components/script/dom/node.rs
+++ b/components/script/dom/node.rs
@@ -121,6 +121,7 @@ use crate::dom::shadowroot::{IsUserAgentWidget, LayoutShadowRootHelpers, ShadowR
 use crate::dom::stylesheetlist::StyleSheetListOwner;
 use crate::dom::svgsvgelement::{LayoutSVGSVGElementHelpers, SVGSVGElement};
 use crate::dom::text::Text;
+use crate::dom::types::KeyboardEvent;
 use crate::dom::virtualmethods::{VirtualMethods, vtable_for};
 use crate::dom::window::Window;
 use crate::script_runtime::CanGc;
@@ -4084,6 +4085,14 @@ impl VirtualMethods for Node {
             self.ranges().drain_to_parent(context, self);
         }
     }
+
+    fn handle_event(&self, event: &Event, _: CanGc) {
+        if let Some(event) = event.downcast::<KeyboardEvent>() {
+            self.owner_document()
+                .event_handler()
+                .run_default_keyboard_event_handler(event);
+        }
+    }
 }
 
 /// A summary of the changes that happened to a node.
diff --git a/components/script/dom/scrolling_box.rs b/components/script/dom/scrolling_box.rs
new file mode 100644
index 00000000000..cef1489ba77
--- /dev/null
+++ b/components/script/dom/scrolling_box.rs
@@ -0,0 +1,147 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+use std::cell::Cell;
+
+use layout_api::{AxesOverflow, ScrollContainerQueryFlags};
+use script_bindings::codegen::GenericBindings::WindowBinding::ScrollBehavior;
+use script_bindings::inheritance::Castable;
+use script_bindings::root::DomRoot;
+use style::values::computed::Overflow;
+use webrender_api::units::{LayoutSize, LayoutVector2D};
+
+use crate::dom::node::{Node, NodeTraits};
+use crate::dom::types::{Document, Element};
+
+pub(crate) struct ScrollingBox {
+    target: ScrollingBoxSource,
+    cached_content_size: Cell<Option<LayoutSize>>,
+    cached_size: Cell<Option<LayoutSize>>,
+}
+
+/// Represents a scrolling box that can be either an element or the viewport
+/// <https://drafts.csswg.org/cssom-view/#scrolling-box>
+pub(crate) enum ScrollingBoxSource {
+    Element(DomRoot<Element>, AxesOverflow),
+    Viewport(DomRoot<Document>),
+}
+
+#[derive(Copy, Clone)]
+pub(crate) enum ScrollingBoxAxis {
+    X,
+    Y,
+}
+
+impl ScrollingBox {
+    pub(crate) fn new(target: ScrollingBoxSource) -> Self {
+        Self {
+            target,
+            cached_content_size: Default::default(),
+            cached_size: Default::default(),
+        }
+    }
+
+    pub(crate) fn target(&self) -> &ScrollingBoxSource {
+        &self.target
+    }
+
+    pub(crate) fn is_viewport(&self) -> bool {
+        matches!(self.target, ScrollingBoxSource::Viewport(..))
+    }
+
+    pub(crate) fn scroll_position(&self) -> LayoutVector2D {
+        match &self.target {
+            ScrollingBoxSource::Element(element, _) => element
+                .owner_window()
+                .scroll_offset_query(element.upcast::<Node>()),
+            ScrollingBoxSource::Viewport(document) => document.window().scroll_offset(),
+        }
+    }
+
+    pub(crate) fn content_size(&self) -> LayoutSize {
+        if let Some(content_size) = self.cached_content_size.get() {
+            return content_size;
+        }
+
+        let (document, node_to_query) = match &self.target {
+            ScrollingBoxSource::Element(element, _) => {
+                (element.owner_document(), Some(element.upcast()))
+            },
+            ScrollingBoxSource::Viewport(document) => (document.clone(), None),
+        };
+
+        let content_size = document
+            .window()
+            .scrolling_area_query(node_to_query)
+            .size
+            .to_f32()
+            .cast_unit();
+        self.cached_content_size.set(Some(content_size));
+        content_size
+    }
+
+    pub(crate) fn size(&self) -> LayoutSize {
+        if let Some(size) = self.cached_size.get() {
+            return size;
+        }
+
+        let size = match &self.target {
+            ScrollingBoxSource::Element(element, _) => {
+                element.client_rect().size.to_f32().cast_unit()
+            },
+            ScrollingBoxSource::Viewport(document) => {
+                document.window().viewport_details().size.cast_unit()
+            },
+        };
+        self.cached_size.set(Some(size));
+        size
+    }
+
+    pub(crate) fn parent(&self) -> Option<ScrollingBox> {
+        match &self.target {
+            ScrollingBoxSource::Element(element, _) => {
+                element.scrolling_box(ScrollContainerQueryFlags::empty())
+            },
+            ScrollingBoxSource::Viewport(_) => None,
+        }
+    }
+
+    pub(crate) fn node(&self) -> &Node {
+        match &self.target {
+            ScrollingBoxSource::Element(element, _) => element.upcast(),
+            ScrollingBoxSource::Viewport(document) => document.upcast(),
+        }
+    }
+
+    pub(crate) fn scroll_to(&self, position: LayoutVector2D, behavior: ScrollBehavior) {
+        match &self.target {
+            ScrollingBoxSource::Element(element, _) => {
+                element
+                    .owner_window()
+                    .scroll_an_element(element, position.x, position.y, behavior);
+            },
+            ScrollingBoxSource::Viewport(document) => {
+                document.window().scroll(position.x, position.y, behavior);
+            },
+        }
+    }
+
+    pub(crate) fn can_keyboard_scroll_in_axis(&self, axis: ScrollingBoxAxis) -> bool {
+        let axes_overflow = match &self.target {
+            ScrollingBoxSource::Element(_, axes_overflow) => axes_overflow,
+            ScrollingBoxSource::Viewport(_) => return true,
+        };
+        let overflow = match axis {
+            ScrollingBoxAxis::X => axes_overflow.x,
+            ScrollingBoxAxis::Y => axes_overflow.x,
+        };
+        if !overflow.is_scrollable() || overflow == Overflow::Hidden {
+            return false;
+        }
+        match axis {
+            ScrollingBoxAxis::X => self.content_size().width > self.size().width,
+            ScrollingBoxAxis::Y => self.content_size().height > self.size().height,
+        }
+    }
+}
diff --git a/components/script/dom/window.rs b/components/script/dom/window.rs
index 6c8f803ef52..5de2681365c 100644
--- a/components/script/dom/window.rs
+++ b/components/script/dom/window.rs
@@ -57,7 +57,7 @@ use layout_api::{
     BoxAreaType, ElementsFromPointFlags, ElementsFromPointResult, FragmentType, Layout,
     LayoutImageDestination, PendingImage, PendingImageState, PendingRasterizationImage, QueryMsg,
     ReflowGoal, ReflowPhasesRun, ReflowRequest, ReflowRequestRestyle, RestyleReason,
-    ScrollContainerQueryType, ScrollContainerResponse, TrustedNodeAddress,
+    ScrollContainerQueryFlags, ScrollContainerResponse, TrustedNodeAddress,
     combine_id_with_fragment_type,
 };
 use malloc_size_of::MallocSizeOf;
@@ -2629,12 +2629,12 @@ impl Window {
     pub(crate) fn scroll_container_query(
         &self,
         node: &Node,
-        query_type: ScrollContainerQueryType,
+        flags: ScrollContainerQueryFlags,
     ) -> Option<ScrollContainerResponse> {
         self.layout_reflow(QueryMsg::ScrollParentQuery);
         self.layout
             .borrow()
-            .query_scroll_container(node.to_trusted_node_address(), query_type)
+            .query_scroll_container(node.to_trusted_node_address(), flags)
     }
 
     pub(crate) fn text_index_query(
diff --git a/components/shared/layout/lib.rs b/components/shared/layout/lib.rs
index dc54ae3587a..5aa76e5ed11 100644
--- a/components/shared/layout/lib.rs
+++ b/components/shared/layout/lib.rs
@@ -50,10 +50,11 @@ use style::data::ElementData;
 use style::dom::OpaqueNode;
 use style::invalidation::element::restyle_hints::RestyleHint;
 use style::media_queries::Device;
-use style::properties::PropertyId;
 use style::properties::style_structs::Font;
+use style::properties::{ComputedValues, PropertyId};
 use style::selector_parser::{PseudoElement, RestyleDamage, Snapshot};
 use style::stylesheets::{Stylesheet, UrlExtraData};
+use style::values::computed::Overflow;
 use style_traits::CSSPixel;
 use webrender_api::units::{DeviceIntSize, LayoutPoint, LayoutVector2D};
 use webrender_api::{ExternalScrollId, ImageKey};
@@ -308,7 +309,7 @@ pub trait Layout {
     fn query_scroll_container(
         &self,
         node: TrustedNodeAddress,
-        query_type: ScrollContainerQueryType,
+        flags: ScrollContainerQueryFlags,
     ) -> Option<ScrollContainerResponse>;
     fn query_resolved_style(
         &self,
@@ -366,16 +367,44 @@ pub struct OffsetParentResponse {
     pub rect: Rect<Au>,
 }
 
-#[derive(PartialEq)]
-pub enum ScrollContainerQueryType {
-    ForScrollParent,
-    ForScrollIntoView,
+bitflags! {
+    #[derive(PartialEq)]
+    pub struct ScrollContainerQueryFlags: u8 {
+        /// Whether or not this query is for the purposes of a `scrollParent` layout query.
+        const ForScrollParent = 1 << 0;
+        /// Whether or not to consider the original element's scroll box for the return value.
+        const Inclusive = 1 << 1;
+    }
+}
+
+#[derive(Clone, Copy, Debug)]
+pub struct AxesOverflow {
+    pub x: Overflow,
+    pub y: Overflow,
+}
+
+impl Default for AxesOverflow {
+    fn default() -> Self {
+        Self {
+            x: Overflow::Visible,
+            y: Overflow::Visible,
+        }
+    }
+}
+
+impl From<&ComputedValues> for AxesOverflow {
+    fn from(style: &ComputedValues) -> Self {
+        Self {
+            x: style.clone_overflow_x(),
+            y: style.clone_overflow_y(),
+        }
+    }
 }
 
 #[derive(Clone)]
 pub enum ScrollContainerResponse {
     Viewport,
-    Element(UntrustedNodeAddress),
+    Element(UntrustedNodeAddress, AxesOverflow),
 }
 
 #[derive(Debug, PartialEq)]
diff --git a/ports/servoshell/desktop/app_state.rs b/ports/servoshell/desktop/app_state.rs
index 84174159bfc..c8eefe94c33 100644
--- a/ports/servoshell/desktop/app_state.rs
+++ b/ports/servoshell/desktop/app_state.rs
@@ -11,14 +11,12 @@ use std::rc::Rc;
 
 use crossbeam_channel::Receiver;
 use embedder_traits::webdriver::WebDriverSenders;
-use euclid::Vector2D;
-use keyboard_types::{Key, Modifiers, NamedKey, ShortcutMatcher};
+use keyboard_types::ShortcutMatcher;
 use log::{error, info};
 use servo::base::generic_channel::GenericSender;
 use servo::base::id::WebViewId;
 use servo::config::pref;
 use servo::ipc_channel::ipc::IpcSender;
-use servo::webrender_api::ScrollLocation;
 use servo::webrender_api::units::{DeviceIntPoint, DeviceIntSize};
 use servo::{
     AllowOrDenyRequest, AuthenticationRequest, FilterPattern, FormControl, GamepadHapticEffectType,
@@ -32,7 +30,7 @@ use super::app::PumpResult;
 use super::dialog::Dialog;
 use super::gamepad::GamepadSupport;
 use super::keyutils::CMD_OR_CONTROL;
-use super::window_trait::{LINE_HEIGHT, LINE_WIDTH, WindowPortsMethods};
+use super::window_trait::WindowPortsMethods;
 use crate::output_image::save_output_image_if_necessary;
 use crate::prefs::ServoShellPreferences;
 
@@ -414,7 +412,6 @@ impl RunningAppState {
 
     /// Handle servoshell key bindings that may have been prevented by the page in the focused webview.
     fn handle_overridable_key_bindings(&self, webview: ::servo::WebView, event: KeyboardEvent) {
-        let origin = webview.rect().min.ceil().to_i32();
         ShortcutMatcher::from_event(event.event)
             .shortcut(CMD_OR_CONTROL, '=', || {
                 webview.set_zoom(1.1);
@@ -427,42 +424,6 @@ impl RunningAppState {
             })
             .shortcut(CMD_OR_CONTROL, '0', || {
                 webview.reset_zoom();
-            })
-            .shortcut(Modifiers::empty(), Key::Named(NamedKey::PageDown), || {
-                let scroll_location = ScrollLocation::Delta(Vector2D::new(
-                    0.0,
-                    self.inner().window.page_height() - 2.0 * LINE_HEIGHT,
-                ));
-                webview.notify_scroll_event(scroll_location, origin);
-            })
-            .shortcut(Modifiers::empty(), Key::Named(NamedKey::PageUp), || {
-                let scroll_location = ScrollLocation::Delta(Vector2D::new(
-                    0.0,
-                    -self.inner().window.page_height() + 2.0 * LINE_HEIGHT,
-                ));
-                webview.notify_scroll_event(scroll_location, origin);
-            })
-            .shortcut(Modifiers::empty(), Key::Named(NamedKey::Home), || {
-                webview.notify_scroll_event(ScrollLocation::Start, origin);
-            })
-            .shortcut(Modifiers::empty(), Key::Named(NamedKey::End), || {
-                webview.notify_scroll_event(ScrollLocation::End, origin);
-            })
-            .shortcut(Modifiers::empty(), Key::Named(NamedKey::ArrowUp), || {
-                let location = ScrollLocation::Delta(Vector2D::new(0.0, -LINE_HEIGHT));
-                webview.notify_scroll_event(location, origin);
-            })
-            .shortcut(Modifiers::empty(), Key::Named(NamedKey::ArrowDown), || {
-                let location = ScrollLocation::Delta(Vector2D::new(0.0, LINE_HEIGHT));
-                webview.notify_scroll_event(location, origin);
-            })
-            .shortcut(Modifiers::empty(), Key::Named(NamedKey::ArrowLeft), || {
-                let location = ScrollLocation::Delta(Vector2D::new(-LINE_WIDTH, 0.0));
-                webview.notify_scroll_event(location, origin);
-            })
-            .shortcut(Modifiers::empty(), Key::Named(NamedKey::ArrowRight), || {
-                let location = ScrollLocation::Delta(Vector2D::new(LINE_WIDTH, 0.0));
-                webview.notify_scroll_event(location, origin);
             });
     }
 
diff --git a/ports/servoshell/desktop/headed_window.rs b/ports/servoshell/desktop/headed_window.rs
index 32ae5b5a9e7..b0f3105a8b9 100644
--- a/ports/servoshell/desktop/headed_window.rs
+++ b/ports/servoshell/desktop/headed_window.rs
@@ -532,12 +532,6 @@ impl WindowPortsMethods for Window {
             .unwrap_or_else(|| self.device_hidpi_scale_factor())
     }
 
-    fn page_height(&self) -> f32 {
-        let dpr = self.hidpi_scale_factor();
-        let size = self.winit_window.inner_size();
-        size.height as f32 * dpr.get()
-    }
-
     fn set_title(&self, title: &str) {
         self.winit_window.set_title(title);
     }
diff --git a/ports/servoshell/desktop/headless_window.rs b/ports/servoshell/desktop/headless_window.rs
index 92b661a88b6..9910ed941d4 100644
--- a/ports/servoshell/desktop/headless_window.rs
+++ b/ports/servoshell/desktop/headless_window.rs
@@ -118,12 +118,6 @@ impl WindowPortsMethods for Window {
             .unwrap_or_else(|| self.device_hidpi_scale_factor())
     }
 
-    fn page_height(&self) -> f32 {
-        let height = self.inner_size.get().height;
-        let dpr = self.hidpi_scale_factor();
-        height as f32 * dpr.get()
-    }
-
     fn set_fullscreen(&self, state: bool) {
         self.fullscreen.set(state);
     }
diff --git a/ports/servoshell/desktop/window_trait.rs b/ports/servoshell/desktop/window_trait.rs
index d3c7997fe69..7915456b9dc 100644
--- a/ports/servoshell/desktop/window_trait.rs
+++ b/ports/servoshell/desktop/window_trait.rs
@@ -17,6 +17,7 @@ use super::app_state::RunningAppState;
 // This should vary by zoom level and maybe actual text size (focused or under cursor)
 pub(crate) const LINE_HEIGHT: f32 = 76.0;
 pub(crate) const LINE_WIDTH: f32 = 76.0;
+
 // MouseScrollDelta::PixelDelta is default for MacOS, which is high precision and very slow
 // in winit. Therefore we use a factor of 4.0 to make it more usable.
 // See https://github.com/servo/servo/pull/34063#discussion_r2197729507
@@ -31,7 +32,6 @@ pub trait WindowPortsMethods {
     fn screen_geometry(&self) -> ScreenGeometry;
     fn device_hidpi_scale_factor(&self) -> Scale<f32, DeviceIndependentPixel, DevicePixel>;
     fn hidpi_scale_factor(&self) -> Scale<f32, DeviceIndependentPixel, DevicePixel>;
-    fn page_height(&self) -> f32;
     fn get_fullscreen(&self) -> bool;
     fn handle_winit_event(&self, state: Rc<RunningAppState>, event: winit::event::WindowEvent);
     fn set_title(&self, _title: &str) {}
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
index c0472bade2f..8ffa3208e93 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -12748,6 +12748,15 @@
       {}
      ]
     ],
+    "keyboard-scrolling.html": [
+     "2d9a0c40272d8af49f26de8dc49283df68b2d7b0",
+     [
+      null,
+      {
+       "testdriver": true
+      }
+     ]
+    ],
     "matchMedia.html": [
      "45a7ea268b1ebdba69e947b79d675cc9221428d4",
      [
diff --git a/tests/wpt/mozilla/tests/css/keyboard-scrolling.html b/tests/wpt/mozilla/tests/css/keyboard-scrolling.html
new file mode 100644
index 00000000000..2d9a0c40272
--- /dev/null
+++ b/tests/wpt/mozilla/tests/css/keyboard-scrolling.html
@@ -0,0 +1,195 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS test: Calc expressions with numbers should still serialize as calc()</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<style>
+    body {
+        margin: 0;
+    }
+    .scroller, #iframe {
+        position: fixed;
+        width: 200px;
+        height: 200px;
+        outline: solid;
+    }
+    .scroller {
+        overflow: scroll;
+    }
+</style>
+
+<!-- This is a DIV with `overflow: scroll` that is not focusable -->
+<div id="box" class="scroller" style="left: 100px; top: 100px;">
+    <div style="width: 600px; height: 600px; background: blue;">Lorem ipsum dolor sit amet,</div>
+</div>
+
+<!-- This is a DIV with `overflow: scroll` that is is focusable due to tabindex. -->
+<div id="focusableBox" class="scroller" tabindex="1" style="left: 300px; top: 100px;">
+    <div style="width: 600px; height: 600px; background: blue;">Lorem ipsum dolor sit amet,</div>
+</div>
+
+<!-- This is a DIV with `overflow: scroll` that should not be keyboard scrollable as its content is smaller than the DIV. -->
+<div id="boxWithSmallContent" class="scroller" tabindex="1" style="left: 100px; top: 300px;">
+    <div style="width: 100px; height: 100px; background: blue;">Lorem ipsum dolor sit amet,</div>
+</div>
+
+<!-- This is an IFRAME that should be scrollable via keyboard. -->
+<iframe id="iframe" style="left: 300px; top: 300px;" srcdoc='
+    <!doctype html><meta charset="utf-8">
+    <body style="margin: 0;">
+    <div style="width: 600px; height: 600px; background: blue;">Lorem ipsum dolor sit amet,</div>
+'></iframe>
+
+<!-- This is a DIV with `overflow: hidden` that should not be keyboard scrollable as its content is smaller than the DIV. -->
+<div id="boxWithOverflowHidden" class="scroller" style="overflow: hidden; left: 500px; top: 300px;">
+    <div style="width: 600px; height: 600px; background: blue;">Lorem ipsum dolor sit amet,</div>
+</div>
+
+<div style="width: 300vw; height: 300vh; background: green;">
+    Lorem ipsum dolor sit amet,
+</div>
+
+<script>
+const end = "\uE010";
+const home = "\uE011";
+const arrowDown = "\uE015";
+const arrowUp = "\uE013";
+const arrowRight = "\uE014";
+const arrowLeft = "\uE012";
+const pageDown = "\uE00F";
+const pageUp = "\uE00E";
+const lineSize = 76;
+const pageSize = scrollportHeight => scrollportHeight - 2 * lineSize;
+const pressKeyAndAssert = async (key, element, [expectedX, expectedY], description) => {
+    await test_driver.send_keys(document.body, key);
+    const actualX =
+        element == null ? scrollX
+        : element.nodeName == "IFRAME" ? element.contentWindow.scrollX
+        : element.scrollLeft;
+    const actualY =
+        element == null ? scrollY
+        : element.nodeName == "IFRAME" ? element.contentWindow.scrollY
+        : element.scrollTop;
+    assert_array_equals([actualX, actualY], [expectedX, expectedY], description);
+};
+
+promise_test(async () => {
+    await pressKeyAndAssert(end, null, [0, document.documentElement.scrollHeight - innerHeight], "End key scrolls viewport to bottom");
+    await pressKeyAndAssert(home, null, [0, 0], "Home key scrolls viewport to top");
+    await pressKeyAndAssert(arrowDown, null, [0, lineSize], "ArrowDown key scrolls viewport down by a line");
+    await pressKeyAndAssert(arrowDown, null, [0, lineSize * 2], "ArrowDown key scrolls viewport down by a line");
+    await pressKeyAndAssert(arrowUp, null, [0, lineSize], "ArrowUp key scrolls viewport up by a line");
+    await pressKeyAndAssert(arrowUp, null, [0, 0], "ArrowUp key scrolls viewport up by a line");
+    await pressKeyAndAssert(arrowRight, null, [lineSize, 0], "ArrowRight key scrolls viewport right by a line");
+    await pressKeyAndAssert(arrowRight, null, [lineSize * 2, 0], "ArrowRight key scrolls viewport right by a line");
+    await pressKeyAndAssert(arrowLeft, null, [lineSize, 0], "ArrowLeft key scrolls viewport left by a line");
+    await pressKeyAndAssert(arrowLeft, null, [0, 0], "ArrowLeft key scrolls viewport left by a line");
+    await pressKeyAndAssert(pageDown, null, [0, pageSize(innerHeight)], "PageDown key scrolls viewport down by almost a screenful");
+    await pressKeyAndAssert(pageDown, null, [0, pageSize(innerHeight) * 2], "PageDown key scrolls viewport down by almost a screenful");
+    await pressKeyAndAssert(pageUp, null, [0, pageSize(innerHeight)], "PageUp key scrolls viewport up by almost a screenful");
+    await pressKeyAndAssert(pageUp, null, [0, 0], "PageUp key scrolls viewport up by almost a screenful");
+}, "Keyboard scrolling works in the viewport");
+
+promise_test(async () => {
+    await test_driver.click(box);
+
+    await pressKeyAndAssert(end, box, [0, box.scrollHeight - box.clientHeight], "End key scrolls #box to bottom");
+    await pressKeyAndAssert(home, box, [0, 0], "Home key scrolls #box to top");
+    await pressKeyAndAssert(arrowDown, box, [0, lineSize], "ArrowDown key scrolls #box down by a line");
+    await pressKeyAndAssert(arrowDown, box, [0, lineSize * 2], "ArrowDown key scrolls #box down by a line");
+    await pressKeyAndAssert(arrowUp, box, [0, lineSize], "ArrowUp key scrolls #box up by a line");
+    await pressKeyAndAssert(arrowUp, box, [0, 0], "ArrowUp key scrolls #box up by a line");
+    await pressKeyAndAssert(arrowRight, box, [lineSize, 0], "ArrowRight key scrolls #box right by a line");
+    await pressKeyAndAssert(arrowRight, box, [lineSize * 2, 0], "ArrowRight key scrolls #box right by a line");
+    await pressKeyAndAssert(arrowLeft, box, [lineSize, 0], "ArrowLeft key scrolls #box left by a line");
+    await pressKeyAndAssert(arrowLeft, box, [0, 0], "ArrowLeft key scrolls #box left by a line");
+    await pressKeyAndAssert(pageDown, box, [0, pageSize(box.clientHeight)], "PageDown key scrolls #box down by almost a screenful");
+    await pressKeyAndAssert(pageDown, box, [0, pageSize(box.clientHeight) * 2], "PageDown key scrolls #box down by almost a screenful");
+    await pressKeyAndAssert(pageUp, box, [0, pageSize(box.clientHeight)], "PageUp key scrolls #box up by almost a screenful");
+    await pressKeyAndAssert(pageUp, box, [0, 0], "PageUp key scrolls #box up by almost a screenful");
+
+    // At the bottom of the DIV, we should not chain up to scrolling the document.
+    let bottom = box.scrollHeight - box.clientHeight;
+    await pressKeyAndAssert(end, box, [0, bottom], "End key scrolls #box to bottom");
+    await pressKeyAndAssert(arrowDown, box, [0, bottom], "ArrowDown should not move the box past the max Y position");
+    await pressKeyAndAssert(arrowDown, box, [0, bottom], "ArrowDown should not move the box past the max Y position");
+    await pressKeyAndAssert(arrowDown, box, [0, bottom], "ArrowDown should not move the box past the max Y position");
+    assert_array_equals([scrollX, scrollY], [0, 0], "Keyboard scroll on a div should not chain to body");
+    await pressKeyAndAssert(home, box, [0, 0], "Home key scrolls #box to top");
+}, "Keyboard scrolling works in #box");
+
+promise_test(async () => {
+    focusableBox.focus();
+    await pressKeyAndAssert(end, focusableBox, [0, box.scrollHeight - box.clientHeight], "End key scrolls #focusableBox to bottom");
+    await pressKeyAndAssert(home, focusableBox, [0, 0], "Home key scrolls #focusableBox to top");
+    await pressKeyAndAssert(arrowDown, focusableBox, [0, lineSize], "ArrowDown key scrolls #focusableBox down by a line");
+    await pressKeyAndAssert(arrowDown, focusableBox, [0, lineSize * 2], "ArrowDown key scrolls #focusableBox down by a line");
+    await pressKeyAndAssert(arrowUp, focusableBox, [0, lineSize], "ArrowUp key scrolls #focusableBox up by a line");
+    await pressKeyAndAssert(arrowUp, focusableBox, [0, 0], "ArrowUp key scrolls #focusableBox up by a line");
+    await pressKeyAndAssert(arrowRight, focusableBox, [lineSize, 0], "ArrowRight key scrolls #focusableBox right by a line");
+    await pressKeyAndAssert(arrowRight, focusableBox, [lineSize * 2, 0], "ArrowRight key scrolls #focusableBox right by a line");
+    await pressKeyAndAssert(arrowLeft, focusableBox, [lineSize, 0], "ArrowLeft key scrolls #focusableBox left by a line");
+    await pressKeyAndAssert(arrowLeft, focusableBox, [0, 0], "ArrowLeft key scrolls #focusableBox left by a line");
+    await pressKeyAndAssert(pageDown, focusableBox, [0, pageSize(box.clientHeight)], "PageDown key scrolls #focusableBox down by almost a screenful");
+    await pressKeyAndAssert(pageDown, focusableBox, [0, pageSize(box.clientHeight) * 2], "PageDown key scrolls #focusableBox down by almost a screenful");
+    await pressKeyAndAssert(pageUp, focusableBox, [0, pageSize(box.clientHeight)], "PageUp key scrolls #focusableBox up by almost a screenful");
+    await pressKeyAndAssert(pageUp, focusableBox, [0, 0], "PageUp key scrolls #focusableBox up by almost a screenful");
+    focusableBox.blur();
+}, "Keyboard scrolling works in #focusableBox");
+
+promise_test(async () => {
+    await test_driver.click(boxWithSmallContent);
+
+    await pressKeyAndAssert(arrowDown, boxWithSmallContent, [0, 0], "Arrow down key should not scroll #boxWithSmallContent");
+    assert_array_equals([scrollX, scrollY], [0, lineSize], "The body should scroll instead of boxWithSmallContent");
+    await pressKeyAndAssert(arrowDown, boxWithSmallContent, [0, 0], "Arrow down key should not scroll #boxWithSmallContent");
+    assert_array_equals([scrollX, scrollY], [0, lineSize * 2], "The body should scroll instead of boxWithSmallContent");
+
+    await pressKeyAndAssert(arrowUp, boxWithSmallContent, [0, 0], "Arrow up key should not scroll #boxWithSmallContent");
+    assert_array_equals([scrollX, scrollY], [0, lineSize], "The body should scroll instead of boxWithSmallContent");
+    await pressKeyAndAssert(arrowUp, boxWithSmallContent, [0, 0], "Arrow up key should not scroll #boxWithSmallContent");
+    assert_array_equals([scrollX, scrollY], [0, 0], "The body should scroll instead of boxWithSmallContent");
+
+    await pressKeyAndAssert(home, null, [0, 0], "Home key scrolls viewport to top");
+}, "Keyboard scrolling chains past inactive overflow:scroll DIVs");
+
+promise_test(async () => {
+    await test_driver.click(iframe);
+
+    await pressKeyAndAssert(end, iframe, [0, iframe.contentDocument.documentElement.scrollHeight - iframe.contentWindow.innerHeight], "End key scrolls #iframe to bottom");
+    await pressKeyAndAssert(home, iframe, [0, 0], "Home key scrolls #iframe to top");
+    await pressKeyAndAssert(arrowDown, iframe, [0, lineSize], "ArrowDown key scrolls #iframe down by a line");
+    await pressKeyAndAssert(arrowDown, iframe, [0, lineSize * 2], "ArrowDown key scrolls #iframe down by a line");
+    await pressKeyAndAssert(arrowUp, iframe, [0, lineSize], "ArrowUp key scrolls #iframe up by a line");
+    await pressKeyAndAssert(arrowUp, iframe, [0, 0], "ArrowUp key scrolls #iframe up by a line");
+    await pressKeyAndAssert(arrowRight, iframe, [lineSize, 0], "ArrowRight key scrolls #iframe right by a line");
+    await pressKeyAndAssert(arrowRight, iframe, [lineSize * 2, 0], "ArrowRight key scrolls #iframe right by a line");
+    await pressKeyAndAssert(arrowLeft, iframe, [lineSize, 0], "ArrowLeft key scrolls #iframe left by a line");
+    await pressKeyAndAssert(arrowLeft, iframe, [0, 0], "ArrowLeft key scrolls #iframe left by a line");
+    await pressKeyAndAssert(pageDown, iframe, [0, pageSize(iframe.contentWindow.innerHeight)], "PageDown key scrolls #iframe down by almost a screenful");
+    await pressKeyAndAssert(pageDown, iframe, [0, pageSize(iframe.contentWindow.innerHeight) * 2], "PageDown key scrolls #iframe down by almost a screenful");
+    await pressKeyAndAssert(pageUp, iframe, [0, pageSize(iframe.contentWindow.innerHeight)], "PageUp key scrolls #iframe up by almost a screenful");
+    await pressKeyAndAssert(pageUp, iframe, [0, 0], "PageUp key scrolls #iframe up by almost a screenful");
+
+    // TODO: test that scrolls chain up from iframe when they fail.
+}, "Keyboard scrolling works in #iframe");
+
+promise_test(async () => {
+    await test_driver.click(boxWithOverflowHidden);
+
+    await pressKeyAndAssert(arrowDown, boxWithOverflowHidden, [0, 0], "Arrow down key should not scroll #boxWithOverflowHidden");
+    assert_array_equals([scrollX, scrollY], [0, lineSize], "The body should scroll instead of boxWithOverflowHidden");
+    await pressKeyAndAssert(arrowDown, boxWithOverflowHidden, [0, 0], "Arrow down key should not scroll #boxWithOverflowHidden");
+    assert_array_equals([scrollX, scrollY], [0, lineSize * 2], "The body should scroll instead of boxWithOverflowHidden");
+
+    await pressKeyAndAssert(arrowUp, boxWithOverflowHidden, [0, 0], "Arrow up key should not scroll #boxWithOverflowHidden");
+    assert_array_equals([scrollX, scrollY], [0, lineSize], "The body should scroll instead of boxWithOverflowHidden");
+    await pressKeyAndAssert(arrowUp, boxWithOverflowHidden, [0, 0], "Arrow up key should not scroll #boxWithOverflowHidden");
+    assert_array_equals([scrollX, scrollY], [0, 0], "The body should scroll instead of boxWithOverflowHidden");
+
+    await pressKeyAndAssert(home, null, [0, 0], "Home key scrolls viewport to top");
+}, "Keyboard scrolling chains past overflow:hidden DIVs");
+</script>