diff --git a/components/layout/display_list/mod.rs b/components/layout/display_list/mod.rs
index 912c69366bd..3908da69ce1 100644
--- a/components/layout/display_list/mod.rs
+++ b/components/layout/display_list/mod.rs
@@ -39,7 +39,7 @@ use webrender_api::{
 use wr::units::LayoutVector2D;
 
 use crate::context::{LayoutContext, ResolvedImage};
-use crate::display_list::conversions::ToWebRender;
+pub use crate::display_list::conversions::ToWebRender;
 use crate::display_list::stacking_context::StackingContextSection;
 use crate::fragment_tree::{
     BackgroundMode, BoxFragment, Fragment, FragmentFlags, FragmentTree, SpecificLayoutInfo, Tag,
@@ -711,7 +711,12 @@ impl<'a> BuilderForBoxFragment<'a> {
 
     fn build(&mut self, builder: &mut DisplayListBuilder, section: StackingContextSection) {
         if self.is_hit_test_for_scrollable_overflow {
-            self.build_hit_test(builder, self.fragment.scrollable_overflow().to_webrender());
+            self.build_hit_test(
+                builder,
+                self.fragment
+                    .reachable_scrollable_overflow_region()
+                    .to_webrender(),
+            );
             return;
         }
 
diff --git a/components/layout/display_list/stacking_context.rs b/components/layout/display_list/stacking_context.rs
index 9809e428d6e..b044b713260 100644
--- a/components/layout/display_list/stacking_context.rs
+++ b/components/layout/display_list/stacking_context.rs
@@ -1477,7 +1477,7 @@ impl BoxFragment {
             y: overflow.y.into(),
         };
 
-        let content_rect = self.scrollable_overflow().to_webrender();
+        let content_rect = self.reachable_scrollable_overflow_region().to_webrender();
 
         let scroll_tree_node_id = display_list.define_scroll_frame(
             parent_scroll_node_id,
diff --git a/components/layout/flow/root.rs b/components/layout/flow/root.rs
index 187726595f8..c6498eeed63 100644
--- a/components/layout/flow/root.rs
+++ b/components/layout/flow/root.rs
@@ -411,7 +411,7 @@ impl BoxTree {
         let scrollable_overflow = root_fragments
             .iter()
             .fold(PhysicalRect::zero(), |acc, child| {
-                let child_overflow = child.scrollable_overflow();
+                let child_overflow = child.scrollable_overflow_for_parent();
 
                 // https://drafts.csswg.org/css-overflow/#scrolling-direction
                 // We want to clip scrollable overflow on box-start and inline-start
diff --git a/components/layout/fragment_tree/box_fragment.rs b/components/layout/fragment_tree/box_fragment.rs
index e87826ec3ca..65ad1c4aa93 100644
--- a/components/layout/fragment_tree/box_fragment.rs
+++ b/components/layout/fragment_tree/box_fragment.rs
@@ -2,11 +2,12 @@
  * 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 app_units::Au;
+use app_units::{Au, MAX_AU, MIN_AU};
 use atomic_refcell::AtomicRefCell;
 use base::print_tree::PrintTree;
 use malloc_size_of_derive::MallocSizeOf;
 use servo_arc::Arc as ServoArc;
+use servo_geometry::f32_rect_to_au_rect;
 use style::Zero;
 use style::computed_values::border_collapse::T as BorderCollapse;
 use style::computed_values::overflow_x::T as ComputedOverflow;
@@ -16,6 +17,7 @@ use style::properties::ComputedValues;
 use style::values::specified::box_::DisplayOutside;
 
 use super::{BaseFragment, BaseFragmentInfo, CollapsedBlockMargins, Fragment};
+use crate::display_list::ToWebRender;
 use crate::formatting_contexts::Baselines;
 use crate::geom::{
     AuOrAuto, LengthPercentageOrAuto, PhysicalPoint, PhysicalRect, PhysicalSides, ToLogical,
@@ -116,7 +118,7 @@ impl BoxFragment {
     ) -> BoxFragment {
         let scrollable_overflow_from_children =
             children.iter().fold(PhysicalRect::zero(), |acc, child| {
-                acc.union(&child.scrollable_overflow())
+                acc.union(&child.scrollable_overflow_for_parent())
             });
 
         BoxFragment {
@@ -267,32 +269,98 @@ impl BoxFragment {
 
     pub fn scrollable_overflow_for_parent(&self) -> PhysicalRect<Au> {
         let mut overflow = self.border_rect();
-        if self.style.establishes_scroll_container(self.base.flags) {
-            return overflow;
+        if !self.style.establishes_scroll_container(self.base.flags) {
+            // https://www.w3.org/TR/css-overflow-3/#scrollable
+            // Only include the scrollable overflow of a child box if it has overflow: visible.
+            let scrollable_overflow = self.scrollable_overflow();
+            let bottom_right = PhysicalPoint::new(
+                overflow.max_x().max(scrollable_overflow.max_x()),
+                overflow.max_y().max(scrollable_overflow.max_y()),
+            );
+
+            let overflow_style = self.style.effective_overflow(self.base.flags);
+            if overflow_style.y == ComputedOverflow::Visible {
+                overflow.origin.y = overflow.origin.y.min(scrollable_overflow.origin.y);
+                overflow.size.height = bottom_right.y - overflow.origin.y;
+            }
+
+            if overflow_style.x == ComputedOverflow::Visible {
+                overflow.origin.x = overflow.origin.x.min(scrollable_overflow.origin.x);
+                overflow.size.width = bottom_right.x - overflow.origin.x;
+            }
         }
 
-        // https://www.w3.org/TR/css-overflow-3/#scrollable
-        // Only include the scrollable overflow of a child box if it has overflow: visible.
-        let scrollable_overflow = self.scrollable_overflow();
-        let bottom_right = PhysicalPoint::new(
-            overflow.max_x().max(scrollable_overflow.max_x()),
-            overflow.max_y().max(scrollable_overflow.max_y()),
-        );
-
-        let overflow_style = self.style.effective_overflow(self.base.flags);
-        if overflow_style.y == ComputedOverflow::Visible {
-            overflow.origin.y = overflow.origin.y.min(scrollable_overflow.origin.y);
-            overflow.size.height = bottom_right.y - overflow.origin.y;
-        }
-
-        if overflow_style.x == ComputedOverflow::Visible {
-            overflow.origin.x = overflow.origin.x.min(scrollable_overflow.origin.x);
-            overflow.size.width = bottom_right.x - overflow.origin.x;
+        // <https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region>
+        // > ...accounting for transforms by projecting each box onto the plane of
+        // > the element that establishes its 3D rendering context. [CSS3-TRANSFORMS]
+        // Both boxes and its scrollable overflow (if it is included) should be transformed accordingly.
+        //
+        // TODO(stevennovaryo): We are supposed to handle perspective transform and 3d context, but it is yet to happen.
+        if self
+            .style
+            .has_effective_transform_or_perspective(self.base.flags)
+        {
+            if let Some(transform) =
+                self.calculate_transform_matrix(&self.border_rect().to_untyped())
+            {
+                if let Some(transformed_overflow_box) =
+                    transform.outer_transformed_rect(&overflow.to_webrender().to_rect())
+                {
+                    overflow =
+                        f32_rect_to_au_rect(transformed_overflow_box.to_untyped()).cast_unit();
+                }
+            }
         }
 
         overflow
     }
 
+    /// <https://drafts.csswg.org/css-overflow/#unreachable-scrollable-overflow-region>
+    /// > area beyond the scroll origin in either axis is considered the unreachable scrollable overflow region
+    ///
+    /// Return the clipped the scrollable overflow based on its scroll origin, determined by overflow direction.
+    /// For an element, the clip rect is the padding rect and for viewport, it is the initial containing block.
+    pub fn clip_unreachable_scrollable_overflow_region(
+        &self,
+        scrollable_overflow: PhysicalRect<Au>,
+        clipping_rect: PhysicalRect<Au>,
+    ) -> PhysicalRect<Au> {
+        let scrolling_direction = self.style.overflow_direction();
+        let mut scrollable_overflow_box = scrollable_overflow.to_box2d();
+        let mut clipping_box = clipping_rect.to_box2d();
+
+        if scrolling_direction.rightward {
+            clipping_box.max.x = MAX_AU;
+        } else {
+            clipping_box.min.x = MIN_AU;
+        }
+
+        if scrolling_direction.downward {
+            clipping_box.max.y = MAX_AU;
+        } else {
+            clipping_box.min.y = MIN_AU;
+        }
+
+        scrollable_overflow_box = scrollable_overflow_box.intersection_unchecked(&clipping_box);
+
+        match scrollable_overflow_box.is_negative() {
+            true => PhysicalRect::zero(),
+            false => scrollable_overflow_box.to_rect(),
+        }
+    }
+
+    /// <https://drafts.csswg.org/css-overflow/#unreachable-scrollable-overflow-region>
+    /// > area beyond the scroll origin in either axis is considered the unreachable scrollable overflow region
+    ///
+    /// Return the clipped the scrollable overflow based on its scroll origin, determined by overflow direction.
+    /// This will coincides with the scrollport if the fragment is a scroll container.
+    pub fn reachable_scrollable_overflow_region(&self) -> PhysicalRect<Au> {
+        self.clip_unreachable_scrollable_overflow_region(
+            self.scrollable_overflow(),
+            self.padding_rect(),
+        )
+    }
+
     pub(crate) fn calculate_resolved_insets_if_positioned(&self) -> PhysicalSides<AuOrAuto> {
         let position = self.style.get_box().position;
         debug_assert_ne!(
diff --git a/components/layout/fragment_tree/fragment.rs b/components/layout/fragment_tree/fragment.rs
index 7708b0893ee..1c5324fa1c4 100644
--- a/components/layout/fragment_tree/fragment.rs
+++ b/components/layout/fragment_tree/fragment.rs
@@ -170,17 +170,28 @@ impl Fragment {
         }
     }
 
-    pub fn scrolling_area(&self) -> PhysicalRect<Au> {
+    pub fn unclipped_scrolling_area(&self) -> PhysicalRect<Au> {
         match self {
             Fragment::Box(fragment) | Fragment::Float(fragment) => {
                 let fragment = fragment.borrow();
                 fragment.offset_by_containing_block(&fragment.scrollable_overflow())
             },
-            _ => self.scrollable_overflow(),
+            _ => self.scrollable_overflow_for_parent(),
         }
     }
 
-    pub fn scrollable_overflow(&self) -> PhysicalRect<Au> {
+    pub fn scrolling_area(&self) -> PhysicalRect<Au> {
+        match self {
+            Fragment::Box(fragment) | Fragment::Float(fragment) => {
+                let fragment = fragment.borrow();
+                fragment
+                    .offset_by_containing_block(&fragment.reachable_scrollable_overflow_region())
+            },
+            _ => self.scrollable_overflow_for_parent(),
+        }
+    }
+
+    pub fn scrollable_overflow_for_parent(&self) -> PhysicalRect<Au> {
         match self {
             Fragment::Box(fragment) | Fragment::Float(fragment) => {
                 fragment.borrow().scrollable_overflow_for_parent()
diff --git a/components/layout/fragment_tree/fragment_tree.rs b/components/layout/fragment_tree/fragment_tree.rs
index 3a082c99389..1499a50dacf 100644
--- a/components/layout/fragment_tree/fragment_tree.rs
+++ b/components/layout/fragment_tree/fragment_tree.rs
@@ -138,11 +138,26 @@ impl FragmentTree {
             .find_map(|child| child.find(&info, 0, &mut process_func))
     }
 
+    /// <https://drafts.csswg.org/cssom-view/#scrolling-area>
+    ///
+    /// Scrolling area for a viewport that is clipped according to overflow direction of root element.
     pub fn get_scrolling_area_for_viewport(&self) -> PhysicalRect<Au> {
         let mut scroll_area = self.initial_containing_block;
-        for fragment in self.root_fragments.iter() {
-            scroll_area = fragment.scrolling_area().union(&scroll_area);
+        if let Some(root_fragment) = self.root_fragments.first() {
+            for fragment in self.root_fragments.iter() {
+                scroll_area = fragment.unclipped_scrolling_area().union(&scroll_area);
+            }
+            match root_fragment {
+                Fragment::Box(fragment) | Fragment::Float(fragment) => fragment
+                    .borrow()
+                    .clip_unreachable_scrollable_overflow_region(
+                        scroll_area,
+                        self.initial_containing_block,
+                    ),
+                _ => scroll_area,
+            }
+        } else {
+            scroll_area
         }
-        scroll_area
     }
 }
diff --git a/components/layout/fragment_tree/positioning_fragment.rs b/components/layout/fragment_tree/positioning_fragment.rs
index 1fe968eb484..0cf525a3479 100644
--- a/components/layout/fragment_tree/positioning_fragment.rs
+++ b/components/layout/fragment_tree/positioning_fragment.rs
@@ -56,7 +56,7 @@ impl PositioningFragment {
         let scrollable_overflow = children.iter().fold(PhysicalRect::zero(), |acc, child| {
             acc.union(
                 &child
-                    .scrollable_overflow()
+                    .scrollable_overflow_for_parent()
                     .translate(content_origin.to_vector()),
             )
         });
diff --git a/components/layout/style_ext.rs b/components/layout/style_ext.rs
index b157be914e0..33a22cdf438 100644
--- a/components/layout/style_ext.rs
+++ b/components/layout/style_ext.rs
@@ -12,7 +12,7 @@ use style::computed_values::mix_blend_mode::T as ComputedMixBlendMode;
 use style::computed_values::position::T as ComputedPosition;
 use style::computed_values::transform_style::T as ComputedTransformStyle;
 use style::computed_values::unicode_bidi::T as UnicodeBidi;
-use style::logical_geometry::{Direction as AxisDirection, WritingMode};
+use style::logical_geometry::{Direction as AxisDirection, PhysicalSide, WritingMode};
 use style::properties::ComputedValues;
 use style::properties::longhands::backface_visibility::computed_value::T as BackfaceVisiblity;
 use style::properties::longhands::box_sizing::computed_value::T as BoxSizing;
@@ -280,6 +280,16 @@ impl Default for BorderStyleColor {
     }
 }
 
+/// <https://drafts.csswg.org/cssom-view/#overflow-directions>
+/// > A scrolling box of a viewport or element has two overflow directions,
+/// > which are the block-end and inline-end directions for that viewport or element.
+pub(crate) struct OverflowDirection {
+    /// Whether block-end or inline-end direction is [PhysicalSide::Right].
+    pub rightward: bool,
+    /// Whether block-end or inline-end direction is [PhysicalSide::Bottom].
+    pub downward: bool,
+}
+
 pub(crate) trait ComputedValuesExt {
     fn physical_box_offsets(&self) -> PhysicalSides<LengthPercentageOrAuto<'_>>;
     fn box_offsets(&self, writing_mode: WritingMode) -> LogicalSides<LengthPercentageOrAuto<'_>>;
@@ -354,6 +364,7 @@ pub(crate) trait ComputedValuesExt {
         writing_mode: WritingMode,
     ) -> bool;
     fn is_inline_box(&self, fragment_flags: FragmentFlags) -> bool;
+    fn overflow_direction(&self) -> OverflowDirection;
 }
 
 impl ComputedValuesExt for ComputedValues {
@@ -980,6 +991,23 @@ impl ComputedValuesExt for ComputedValues {
         };
         has_percentage(box_offsets.block_start) || has_percentage(box_offsets.block_end)
     }
+
+    // <https://drafts.csswg.org/cssom-view/#overflow-directions>
+    fn overflow_direction(&self) -> OverflowDirection {
+        let inline_end_direction = self.writing_mode.inline_end_physical_side();
+        let block_end_direction = self.writing_mode.block_end_physical_side();
+
+        let rightward = inline_end_direction == PhysicalSide::Right ||
+            block_end_direction == PhysicalSide::Right;
+        let downward = inline_end_direction == PhysicalSide::Bottom ||
+            block_end_direction == PhysicalSide::Bottom;
+
+        // TODO(stevennovaryo): We should consider the flex-container's CSS (e.g. flow-direction: column-reverse).
+        OverflowDirection {
+            rightward,
+            downward,
+        }
+    }
 }
 
 pub(crate) enum LayoutStyle<'a> {
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index b61673238d5..8ba5d8b0ff6 100644
--- a/tests/wpt/meta/MANIFEST.json
+++ b/tests/wpt/meta/MANIFEST.json
@@ -595710,6 +595710,55 @@
        {}
       ]
      ],
+     "scrollable-overflow-transform-004.html": [
+      "b398167fa309885658f044ccdd1df75bca880701",
+      [
+       null,
+       {}
+      ]
+     ],
+     "scrollable-overflow-transform-005.tentative.html": [
+      "837b95ba96db71e7d696edfe4bb6c7c489e7a411",
+      [
+       null,
+       {}
+      ]
+     ],
+     "scrollable-overflow-transform-006.html": [
+      "2eea759da6a1adad341b2145a8b29725e84c2db6",
+      [
+       null,
+       {}
+      ]
+     ],
+     "scrollable-overflow-transform-007.html": [
+      "8aa6e5f17d8633e759d5b52b5096057c367d7b58",
+      [
+       null,
+       {}
+      ]
+     ],
+     "scrollable-overflow-transform-008.html": [
+      "df1daeb842405ba6107be563e1652651ec232d58",
+      [
+       null,
+       {}
+      ]
+     ],
+     "scrollable-overflow-transform-009.html": [
+      "aca1b28418adf361a38f59bb10e6ba3cdabd3097",
+      [
+       null,
+       {}
+      ]
+     ],
+     "scrollable-overflow-transform-010.tentative.html": [
+      "e2c62cb4474ecbd486360fdd4aeb1c306a433f2d",
+      [
+       null,
+       {}
+      ]
+     ],
      "scrollable-overflow-transform-dynamic-001.html": [
       "a233376bdb222e5eeb45e3b5f646a84a665e6594",
       [
@@ -595752,6 +595801,13 @@
        {}
       ]
      ],
+     "scrollable-overflow-transform-unreachable-region.html": [
+      "91e987bf82654415f47500f9d6d7d568e4eefcbc",
+      [
+       null,
+       {}
+      ]
+     ],
      "scrollable-overflow-vertical-rl-dynamic.html": [
       "07f322901748c9709c3037d0223a546549cc9cff",
       [
diff --git a/tests/wpt/meta/css/css-flexbox/negative-overflow.html.ini b/tests/wpt/meta/css/css-flexbox/negative-overflow.html.ini
index 38100976826..e483189946d 100644
--- a/tests/wpt/meta/css/css-flexbox/negative-overflow.html.ini
+++ b/tests/wpt/meta/css/css-flexbox/negative-overflow.html.ini
@@ -5,21 +5,9 @@
   [.flexbox 11]
     expected: FAIL
 
-  [.flexbox 6]
-    expected: FAIL
-
-  [.flexbox 7]
-    expected: FAIL
-
-  [.flexbox 1]
-    expected: FAIL
-
   [.flexbox 2]
     expected: FAIL
 
-  [.flexbox 3]
-    expected: FAIL
-
   [.flexbox 8]
     expected: FAIL
 
diff --git a/tests/wpt/meta/css/css-grid/alignment/grid-content-alignment-overflow-002.html.ini b/tests/wpt/meta/css/css-grid/alignment/grid-content-alignment-overflow-002.html.ini
index bad0d70b3b5..794226f82ac 100644
--- a/tests/wpt/meta/css/css-grid/alignment/grid-content-alignment-overflow-002.html.ini
+++ b/tests/wpt/meta/css/css-grid/alignment/grid-content-alignment-overflow-002.html.ini
@@ -11,20 +11,11 @@
   [.grid 4]
     expected: FAIL
 
-  [.grid 5]
-    expected: FAIL
-
-  [.grid 6]
-    expected: FAIL
-
   [.grid 7]
     expected: FAIL
 
   [.grid 8]
     expected: FAIL
 
-  [.grid 11]
-    expected: FAIL
-
   [.grid 12]
     expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/overflow-inline-transform-relative.html.ini b/tests/wpt/meta/css/css-overflow/overflow-inline-transform-relative.html.ini
deleted file mode 100644
index 0ba0b29e0f2..00000000000
--- a/tests/wpt/meta/css/css-overflow/overflow-inline-transform-relative.html.ini
+++ /dev/null
@@ -1,3 +0,0 @@
-[overflow-inline-transform-relative.html]
-  [#target used transform when computing scroll overflow]
-    expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scroll-overflow-padding-block-001.html.ini b/tests/wpt/meta/css/css-overflow/scroll-overflow-padding-block-001.html.ini
index b4b8f3830d9..1738329f50c 100644
--- a/tests/wpt/meta/css/css-overflow/scroll-overflow-padding-block-001.html.ini
+++ b/tests/wpt/meta/css/css-overflow/scroll-overflow-padding-block-001.html.ini
@@ -1,7 +1,4 @@
 [scroll-overflow-padding-block-001.html]
   expected: ERROR
-  [undefined block-end]
-    expected: FAIL
-
   [undefined block-start]
     expected: [PASS, FAIL]
diff --git a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-001.html.ini b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-001.html.ini
deleted file mode 100644
index e19232bb0b8..00000000000
--- a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-001.html.ini
+++ /dev/null
@@ -1,9 +0,0 @@
-[scrollable-overflow-transform-001.html]
-  [.container 1]
-    expected: FAIL
-
-  [.container 2]
-    expected: FAIL
-
-  [.container 3]
-    expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-002.html.ini b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-002.html.ini
deleted file mode 100644
index eae09f05def..00000000000
--- a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-002.html.ini
+++ /dev/null
@@ -1,9 +0,0 @@
-[scrollable-overflow-transform-002.html]
-  [.container 1]
-    expected: FAIL
-
-  [.container 2]
-    expected: FAIL
-
-  [.container 3]
-    expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-003.html.ini b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-003.html.ini
deleted file mode 100644
index 10ac7e63897..00000000000
--- a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-003.html.ini
+++ /dev/null
@@ -1,9 +0,0 @@
-[scrollable-overflow-transform-003.html]
-  [.container 1]
-    expected: FAIL
-
-  [.container 2]
-    expected: FAIL
-
-  [.container 3]
-    expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-005.tentative.html.ini b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-005.tentative.html.ini
new file mode 100644
index 00000000000..901184b8ed2
--- /dev/null
+++ b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-005.tentative.html.ini
@@ -0,0 +1,3 @@
+[scrollable-overflow-transform-005.tentative.html]
+  [.container 6]
+    expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-009.html.ini b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-009.html.ini
new file mode 100644
index 00000000000..cd8e986f634
--- /dev/null
+++ b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-009.html.ini
@@ -0,0 +1,6 @@
+[scrollable-overflow-transform-009.html]
+  [.container 2]
+    expected: FAIL
+
+  [.container 3]
+    expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-010.tentative.html.ini b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-010.tentative.html.ini
new file mode 100644
index 00000000000..94ff7fba3fb
--- /dev/null
+++ b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-010.tentative.html.ini
@@ -0,0 +1,6 @@
+[scrollable-overflow-transform-010.tentative.html]
+  [.container 1]
+    expected: FAIL
+
+  [.container 2]
+    expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-001.html.ini b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-001.html.ini
deleted file mode 100644
index c4639b846ba..00000000000
--- a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-001.html.ini
+++ /dev/null
@@ -1,9 +0,0 @@
-[scrollable-overflow-transform-dynamic-001.html]
-  [Check scrollWidth before and after transform chage]
-    expected: FAIL
-
-  [Check scrollHeight before and after transform chage]
-    expected: FAIL
-
-  [Check scrollWidth and scrollHeight before and after transform chage]
-    expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-002.html.ini b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-002.html.ini
deleted file mode 100644
index ff8be1e2e49..00000000000
--- a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-002.html.ini
+++ /dev/null
@@ -1,9 +0,0 @@
-[scrollable-overflow-transform-dynamic-002.html]
-  [Check scrollWidth before and after transform chage]
-    expected: FAIL
-
-  [Check scrollHeight before and after transform chage]
-    expected: FAIL
-
-  [Check scrollWidth and scrollHeight before and after transform chage]
-    expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-003.html.ini b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-003.html.ini
deleted file mode 100644
index 227a2451b5e..00000000000
--- a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-003.html.ini
+++ /dev/null
@@ -1,9 +0,0 @@
-[scrollable-overflow-transform-dynamic-003.html]
-  [Check scrollWidth before and after transform chage]
-    expected: FAIL
-
-  [Check scrollHeight before and after transform chage]
-    expected: FAIL
-
-  [Check scrollWidth and scrollHeight before and after transform chage]
-    expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-004.html.ini b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-004.html.ini
deleted file mode 100644
index d346a0658c9..00000000000
--- a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-004.html.ini
+++ /dev/null
@@ -1,9 +0,0 @@
-[scrollable-overflow-transform-dynamic-004.html]
-  [Check scrollWidth before and after position and transform chage]
-    expected: FAIL
-
-  [Check scrollHeight before and after position and transform chage]
-    expected: FAIL
-
-  [Check scrollWidth and scrollHeight after position and transform chage]
-    expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-005.html.ini b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-005.html.ini
deleted file mode 100644
index 3561e692dab..00000000000
--- a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-005.html.ini
+++ /dev/null
@@ -1,9 +0,0 @@
-[scrollable-overflow-transform-dynamic-005.html]
-  [Check scrollWidth before and after appendChild() and transform chage]
-    expected: FAIL
-
-  [Check scrollHeight before and after appendChild() and transform chage]
-    expected: FAIL
-
-  [Check scrollWidth and scrollHeight before and after appendChild() and transform chage]
-    expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-006.html.ini b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-006.html.ini
deleted file mode 100644
index f8a8cae0ae5..00000000000
--- a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-dynamic-006.html.ini
+++ /dev/null
@@ -1,9 +0,0 @@
-[scrollable-overflow-transform-dynamic-006.html]
-  [Check scrollWidth before and after removeChild() and transform chage]
-    expected: FAIL
-
-  [Check scrollHeight before and after removeChild() and transform chage]
-    expected: FAIL
-
-  [Check scrollWidth and scrollHeight before and after removeChild() and transform chage]
-    expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-unreachable-region.html.ini b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-unreachable-region.html.ini
new file mode 100644
index 00000000000..0a46e380a0b
--- /dev/null
+++ b/tests/wpt/meta/css/css-overflow/scrollable-overflow-transform-unreachable-region.html.ini
@@ -0,0 +1,168 @@
+[scrollable-overflow-transform-unreachable-region.html]
+  [scrollWidth of display: flow-root; direction: ltr; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollWidth of display: flow-root; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollHeight of display: flow-root; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollHeight of display: flow-root; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth of display: grid; direction: ltr; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollWidth of display: grid; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollHeight of display: grid; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;]
+    expected: FAIL
+
+  [scrollHeight of display: grid; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;]
+    expected: FAIL
diff --git a/tests/wpt/meta/css/cssom-view/scrollWidthHeight-negative-margin-001.html.ini b/tests/wpt/meta/css/cssom-view/scrollWidthHeight-negative-margin-001.html.ini
deleted file mode 100644
index 01bd97ce10d..00000000000
--- a/tests/wpt/meta/css/cssom-view/scrollWidthHeight-negative-margin-001.html.ini
+++ /dev/null
@@ -1,12 +0,0 @@
-[scrollWidthHeight-negative-margin-001.html]
-  [scrollWidth/Height with negative margins: overflow: visible;]
-    expected: FAIL
-
-  [scrollWidth/Height with negative margins: overflow: hidden;]
-    expected: FAIL
-
-  [scrollWidth/Height with negative margins: overflow: auto;]
-    expected: FAIL
-
-  [scrollWidth/Height with negative margins: overflow: clip;]
-    expected: FAIL
diff --git a/tests/wpt/meta/css/cssom-view/scrollWidthHeight-negative-margin-002.html.ini b/tests/wpt/meta/css/cssom-view/scrollWidthHeight-negative-margin-002.html.ini
index e92445207b7..531b67bb161 100644
--- a/tests/wpt/meta/css/cssom-view/scrollWidthHeight-negative-margin-002.html.ini
+++ b/tests/wpt/meta/css/cssom-view/scrollWidthHeight-negative-margin-002.html.ini
@@ -121,97 +121,97 @@
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: wrap-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-flow: wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-flow: wrap-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-flow: wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-flow: wrap-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-flow: wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-flow: wrap-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-flow: wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-flow: wrap-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-flow: wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-flow: wrap-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-flow: wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-flow: wrap-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-flow: wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-flow: wrap-reverse;]
     expected: FAIL
@@ -220,49 +220,49 @@
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: row-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: row-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: row-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: row-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: row-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: row-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: row-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: row-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: row-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: row-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: row-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: row-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: row-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: row-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: row-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: row-reverse wrap-reverse;]
     expected: FAIL
@@ -313,145 +313,145 @@
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: column wrap-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: column wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-flow: column wrap-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-flow: column wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-flow: column wrap-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-flow: column wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-flow: column wrap-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-flow: column wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-flow: column wrap-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-flow: column wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-flow: column wrap-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-flow: column wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-flow: column wrap-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-flow: column wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-flow: column wrap-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-flow: column wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: column-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: column-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: column-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: column-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: column-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: column-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: column-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: column-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: column-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: column-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: column-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: column-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: column-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: column-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: column-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: column-reverse;]
     expected: FAIL
@@ -505,85 +505,70 @@
     expected: FAIL
 
   [scrollWidth with negative margins: display: flow-root; overflow: visible; direction: ltr; flex-direction: row;]
-    expected: FAIL
-
-  [scrollHeight with negative margins: display: flow-root; overflow: visible; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flow-root; overflow: hidden; direction: ltr; flex-direction: row;]
-    expected: FAIL
-
-  [scrollHeight with negative margins: display: flow-root; overflow: hidden; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flow-root; overflow: auto; direction: ltr; flex-direction: row;]
-    expected: FAIL
-
-  [scrollHeight with negative margins: display: flow-root; overflow: auto; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flow-root; overflow: scroll; direction: ltr; flex-direction: row;]
-    expected: FAIL
-
-  [scrollHeight with negative margins: display: flow-root; overflow: scroll; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flow-root; overflow: visible; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flow-root; overflow: visible; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flow-root; overflow: hidden; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flow-root; overflow: hidden; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flow-root; overflow: auto; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flow-root; overflow: auto; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flow-root; overflow: scroll; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flow-root; overflow: scroll; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flow-root; overflow: clip; direction: ltr; flex-direction: row;]
-    expected: FAIL
-
-  [scrollHeight with negative margins: display: flow-root; overflow: clip; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flow-root; overflow: clip; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flow-root; overflow: clip; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: wrap-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: wrap-reverse;]
     expected: FAIL
@@ -592,13 +577,13 @@
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: row-reverse wrap-reverse;]
     expected: FAIL
@@ -613,37 +598,37 @@
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: column wrap-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: column wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: column wrap-reverse;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: column wrap-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column-reverse;]
     expected: FAIL
 
   [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column-reverse;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column-reverse;]
     expected: FAIL
@@ -661,61 +646,46 @@
     expected: FAIL
 
   [scrollWidth with negative margins: display: grid; overflow: visible; direction: ltr; flex-direction: row;]
-    expected: FAIL
-
-  [scrollHeight with negative margins: display: grid; overflow: visible; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: grid; overflow: hidden; direction: ltr; flex-direction: row;]
-    expected: FAIL
-
-  [scrollHeight with negative margins: display: grid; overflow: hidden; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: grid; overflow: auto; direction: ltr; flex-direction: row;]
-    expected: FAIL
-
-  [scrollHeight with negative margins: display: grid; overflow: auto; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: grid; overflow: clip; direction: ltr; flex-direction: row;]
-    expected: FAIL
-
-  [scrollHeight with negative margins: display: grid; overflow: clip; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: grid; overflow: scroll; direction: ltr; flex-direction: row;]
-    expected: FAIL
-
-  [scrollHeight with negative margins: display: grid; overflow: scroll; direction: ltr; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: grid; overflow: visible; direction: rtl; flex-direction: row;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: grid; overflow: visible; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: grid; overflow: hidden; direction: rtl; flex-direction: row;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: grid; overflow: hidden; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: grid; overflow: auto; direction: rtl; flex-direction: row;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: grid; overflow: auto; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: grid; overflow: clip; direction: rtl; flex-direction: row;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: grid; overflow: clip; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
 
   [scrollWidth with negative margins: display: grid; overflow: scroll; direction: rtl; flex-direction: row;]
     expected: FAIL
 
   [scrollHeight with negative margins: display: grid; overflow: scroll; direction: rtl; flex-direction: row;]
-    expected: FAIL
+    expected: [FAIL, PASS]
diff --git a/tests/wpt/meta/css/cssom-view/table-scroll-props.html.ini b/tests/wpt/meta/css/cssom-view/table-scroll-props.html.ini
new file mode 100644
index 00000000000..745c51cd4c7
--- /dev/null
+++ b/tests/wpt/meta/css/cssom-view/table-scroll-props.html.ini
@@ -0,0 +1,6 @@
+[table-scroll-props.html]
+  [Table with separated border]
+    expected: FAIL
+
+  [Table with collapsed border]
+    expected: FAIL
diff --git a/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-004.html b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-004.html
new file mode 100644
index 00000000000..b398167fa30
--- /dev/null
+++ b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-004.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Scroll Container</title>
+<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that the box of scroll container with transform contribute to the scrollable overflow.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+  .container {
+    width: 100px;
+    height: 100px;
+    overflow: auto;
+    background: silver;
+    border: solid thick;
+    scrollbar-width: none;
+  }
+
+  .element {
+    width: 50px;
+    height: 50px;
+    overflow: scroll;
+    background: lime;
+  }
+
+  .element-content {
+    width: 500px;
+    height: 500px;
+    background: aqua;
+  }
+</style>
+<body onload="checkLayout('.container')">
+
+  <div class="container" data-expected-scroll-width="250">
+    <div style="transform: translateX(200px);" class="element">
+      <div class="element-content"></div>
+    </div>
+  </div>
+
+  <div class="container" data-expected-scroll-height="350">
+    <div style="transform: translateY(300px);" class="element">
+      <div class="element-content"></div>
+    </div>
+  </div>
+
+  <div class="container" data-expected-scroll-width="250" data-expected-scroll-height="350">
+    <div style="transform: translate(200px, 300px);" class="element">
+      <div class="element-content"></div>
+    </div>
+  </div>
+
+</body>
diff --git a/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-005.tentative.html b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-005.tentative.html
new file mode 100644
index 00000000000..837b95ba96d
--- /dev/null
+++ b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-005.tentative.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Exclusion of Untransformed Child Box</title>
+<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"/>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12113"/>
+<meta name="assert" content="Checks that the untransformed child box is not included in scrollable overflow.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+  .container {
+    width: 100px;
+    height: 100px;
+    overflow: scroll;
+    background: silver;
+    border: solid thick;
+    scrollbar-width: none;
+  }
+
+  .element {
+    width: 200px;
+    height: 200px;
+    background: lime;
+  }
+
+  .element-2 {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<body onload="checkLayout('.container')">
+
+  <div class="container" data-expected-scroll-width="100" data-expected-scroll-height="100">
+    <div style="transform: translate(-200px, -200px);" class="element">
+    </div>
+  </div>
+
+  <div class="container" data-expected-scroll-width="150" data-expected-scroll-height="150">
+    <div style="transform: translate(-25%, -25%);" class="element">
+    </div>
+  </div>
+
+  <div class="container" data-expected-scroll-height="100" data-expected-scroll-height="100">
+    <div style="width: 100px; height: 100px;">
+      <div style="transform: translate(-200px, -200px);" class="element">
+      </div>
+    </div>
+  </div>
+
+  <div class="container" data-expected-scroll-width="150" data-expected-scroll-height="150">
+    <div style="width: 100px; height: 100px;">
+      <div style="transform: translate(-25%, -25%);" class="element">
+      </div>
+    </div>
+  </div>
+
+  <div class="container" style="position: relative;" data-expected-scroll-width="100" data-expected-scroll-height="100">
+    <div style="transform: translate(-200px, -200px); position: absolute;" class="element">
+    </div>
+  </div>
+
+  <div class="container" style="position: relative;" data-expected-scroll-width="150" data-expected-scroll-height="150">
+    <div style="transform: translate(-25%, -25%); position: absolute;" class="element">
+    </div>
+  </div>
+
+</body>
diff --git a/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-006.html b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-006.html
new file mode 100644
index 00000000000..2eea759da6a
--- /dev/null
+++ b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-006.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Rotate</title>
+<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that the bounding rectangle of rotated element is included correctly in scrollable overflow.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+  .container {
+    width: 100px;
+    height: 100px;
+    overflow: scroll;
+    background: silver;
+    border: solid thick;
+    scrollbar-width: none;
+  }
+
+  .element {
+    width: 200px;
+    height: 200px;
+    background: lime;
+  }
+
+  .element-2 {
+    width: 200px;
+    height: 200px;
+    background: aqua;
+  }
+</style>
+<body onload="checkLayout('.container')">
+
+  <div class="container" data-expected-scroll-width="241" data-expected-scroll-height="241">
+    <div style="transform: rotate(45deg);" class="element">
+    </div>
+  </div>
+
+  <div class="container" data-expected-scroll-width="241" data-expected-scroll-height="241">
+    <div style="transform: rotate(-45deg);" class="element">
+    </div>
+  </div>
+
+</body>
diff --git a/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-007.html b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-007.html
new file mode 100644
index 00000000000..8aa6e5f17d8
--- /dev/null
+++ b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-007.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Scale</title>
+<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that the bounding rectangle of scaled element is included correctly in scrollable overflow.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+  .container {
+    width: 100px;
+    height: 100px;
+    overflow: scroll;
+    background: silver;
+    border: solid thick;
+    scrollbar-width: none;
+  }
+
+  .element {
+    width: 200px;
+    height: 200px;
+    background: lime;
+  }
+
+  .element-2 {
+    width: 200px;
+    height: 200px;
+    background: aqua;
+  }
+</style>
+<body onload="checkLayout('.container')">
+
+  <div class="container" data-expected-scroll-width="300" data-expected-scroll-height="300">
+    <div style="transform: scale(2);" class="element">
+    </div>
+  </div>
+
+  <div class="container" data-expected-scroll-height="250" data-expected-scroll-height="250">
+    <div style="transform: scale(0.5);" class="element">
+      <div style="transform: scale(3);" class="element-2">
+      </div>
+    </div>
+  </div>
+
+</body>
diff --git a/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-008.html b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-008.html
new file mode 100644
index 00000000000..df1daeb8424
--- /dev/null
+++ b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-008.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Skew</title>
+<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that the bounding rectangle of skewed element is included correctly in scrollable overflow.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+  .container {
+    width: 100px;
+    height: 100px;
+    overflow: scroll;
+    background: silver;
+    border: solid thick;
+    scrollbar-width: none;
+  }
+
+  .element {
+    width: 200px;
+    height: 200px;
+    background: lime;
+  }
+
+  .element-2 {
+    width: 200px;
+    height: 200px;
+    background: aqua;
+  }
+</style>
+<body onload="checkLayout('.container')">
+
+  <div class="container" data-expected-scroll-width="227" data-expected-scroll-height="227">
+    <div style="transform: skew(-15deg, -15deg);" class="element">
+    </div>
+  </div>
+
+  <div class="container" data-expected-scroll-width="227" data-expected-scroll-height="227">
+    <div style="transform: skew(15deg, 15deg);" class="element">
+    </div>
+  </div>
+
+</body>
diff --git a/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-009.html b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-009.html
new file mode 100644
index 00000000000..aca1b28418a
--- /dev/null
+++ b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-009.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Unreachable Scrollable Overflow</title>
+<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that the box in unreachable scrollable overflow region with transform is not included in the calculation.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+  .container {
+    width: 100px;
+    height: 100px;
+    overflow: scroll;
+    background: silver;
+    border: solid thick;
+    scrollbar-width: none;
+  }
+
+  .relative {
+    position: relative;
+  }
+
+  .absolute {
+    position: absolute;
+  }
+
+  .element {
+    width: 100px;
+    height: 100px;
+    background: lime;
+  }
+</style>
+<body onload="checkLayout('.container')">
+  <div class="container" data-expected-scroll-width="100" data-expected-scroll-height="100">
+    <div style="transform: translate(-300px, -300px);" class="element">
+    </div>
+  </div>
+
+  <div class="container" data-expected-scroll-width="100" data-expected-scroll-height="100">
+    <div style="transform: translate(300px, -300px);" class="element">
+    </div>
+  </div>
+
+  <div class="container" data-expected-scroll-width="100" data-expected-scroll-height="100">
+    <div style="transform: translate(-300px, 300px);" class="element">
+    </div>
+  </div>
+
+  <div class="container relative" data-expected-scroll-width="100" data-expected-scroll-height="100">
+    <div style="transform: translate(-300px, -300px);" class="element absolute">
+    </div>
+  </div>
+
+  <div class="container relative" data-expected-scroll-width="100" data-expected-scroll-height="100">
+    <div style="transform: translate(300px, -300px);" class="element absolute">
+    </div>
+  </div>
+
+  <div class="container relative" data-expected-scroll-width="100" data-expected-scroll-height="100">
+    <div style="transform: translate(-300px, 300px);" class="element absolute">
+    </div>
+  </div>
+
+</body>
diff --git a/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-010.tentative.html b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-010.tentative.html
new file mode 100644
index 00000000000..e2c62cb4474
--- /dev/null
+++ b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-010.tentative.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Rotate Nested Element</title>
+<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"/>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12112"/>
+<meta name="assert" content="Checks that the bounding rectangle of nested rotated element is included correctly in scrollable overflow.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+  .container {
+    width: 100px;
+    height: 100px;
+    overflow: scroll;
+    background: silver;
+    border: solid thick;
+    scrollbar-width: none;
+  }
+
+  .element {
+    width: 200px;
+    height: 200px;
+    background: lime;
+  }
+
+  .element-2 {
+    width: 200px;
+    height: 200px;
+    background: aqua;
+  }
+</style>
+<body onload="checkLayout('.container')">
+
+  <div class="container" data-expected-scroll-height="241" data-expected-scroll-height="241">
+    <div style="transform: rotate(-45deg);" class="element">
+      <div style="transform: rotate(45deg);" class="element-2">
+      </div>
+    </div>
+  </div>
+
+  <div class="container" data-expected-scroll-height="222" data-expected-scroll-height="222">
+    <div style="transform: rotate(30deg) rotate(-15deg);" class="element">
+      <div style="transform: rotate(-30deg) rotate(105deg);" class="element-2">
+      </div>
+    </div>
+  </div>
+
+</body>
diff --git a/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-unreachable-region.html b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-unreachable-region.html
new file mode 100644
index 00000000000..91e987bf826
--- /dev/null
+++ b/tests/wpt/tests/css/css-overflow/scrollable-overflow-transform-unreachable-region.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Scrollable Overflow of a Scroll Container with Transformed Child in Unreachable Scrollable Overflow Region.</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#unreachable-scrollable-overflow-region">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable">
+<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+body { margin: 0 }
+.wrapper {
+  width: 100px;
+  height: 200px;
+  overflow: scroll;
+}
+.inner {
+  width: 100px;
+  height: 200px;
+  background-color: lime;
+  transform: translate(-3px, -6px) scale(1.10);
+}
+</style>
+<div class="wrapper">
+  <div class="inner"></div>
+</div>
+<script>
+const wrapper = document.querySelector(".wrapper");
+const contentBox = {
+  width: 100,
+  height: 200,
+};
+
+function getCurrentTestName(display, direction, writingMode, flexDirection, flexWrap) {
+  return `display: ${display}; ` +
+         `direction: ${direction}; ` +
+         `writing-mode: ${writingMode}; ` +
+         `flex-direction: ${flexDirection}; ` +
+         `flex-wrap: ${flexWrap};`;
+}
+
+for (let display of ["flow-root", "flex", "grid"]) {
+  for (let flexDirection of ["row", "row-reverse", "column", "column-reverse"]) {
+    if (flexDirection != "row" && display != "flex") {
+      // Don't bother retesting with all flexDirection values unless we're actually a flex container
+      continue;
+    }
+    for (let flexWrap of ["nowrap", "wrap-reverse"]) {
+      if (flexWrap != "nowrap" && display != "flex") {
+        // Don't bother retesting with all flexWrap values unless we're actually a flex container
+        continue;
+      }
+      for (let direction of ["ltr", "rtl"]) {
+        for (let writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl"]) {
+          wrapper.style.display = display;
+          wrapper.style.direction = direction;
+          wrapper.style.writingMode = writingMode;
+          wrapper.style.flexDirection = flexDirection;
+          wrapper.style.flexWrap = flexWrap;
+          // Suppress scrollbars because they get added to the padding are
+          // and would need to account for them in flexbox.
+          wrapper.style.scrollbarWidth = display == "flex" ? "none" : "";
+          let vertical = writingMode.startsWith("vertical");
+          let scrollToTop = vertical && direction == "rtl";
+          let scrollToLeft = (!vertical && direction == "rtl") || writingMode == "vertical-rl";
+          let flexMainAxisIsVertical = flexDirection.startsWith("row") == vertical;
+          if (display == "flex") {
+            if (flexDirection.endsWith("-reverse")) {
+              if (flexMainAxisIsVertical) {
+                scrollToTop = !scrollToTop;
+              } else {
+                scrollToLeft = !scrollToLeft;
+              }
+            }
+            if (flexWrap == "wrap-reverse") {
+              if (flexMainAxisIsVertical) {
+                scrollToLeft = !scrollToLeft;
+              } else {
+                scrollToTop = !scrollToTop;
+              }
+            }
+          }
+          currentTestName = getCurrentTestName(display, direction, writingMode, flexDirection, flexWrap);
+          test(function() {
+            assert_equals(wrapper.scrollWidth, (scrollToLeft ? 108 : 102), "scrollWidth");
+          }, "scrollWidth of " + currentTestName);
+          test(function() {
+            assert_equals(wrapper.scrollHeight, (scrollToTop ? 216 : 204), "scrollHeight");
+          }, "scrollHeight of " + currentTestName);
+        }
+      }
+    }
+  }
+}
+</script>