Implement overflow:clip (#35103)

* Implement overflow clip

Signed-off-by: longvatrong111 <longvatrong111@gmail.com>

* Modify test ini for overflow clip

Signed-off-by: longvatrong111 <longvatrong111@gmail.com>

* Update overflow_clip_rect calculation

Signed-off-by: batu_hoang <longvatrong111@gmail.com>

* Update overflow-clip-margin border-radius according to shadow box

Signed-off-by: longvatrong111 <longvatrong111@gmail.com>

---------

Signed-off-by: longvatrong111 <longvatrong111@gmail.com>
Signed-off-by: batu_hoang <longvatrong111@gmail.com>
Signed-off-by: batu_hoang <55729155+longvatrong111@users.noreply.github.com>

Cargo.lock

@@ -1689,7 +1689,7 @@ dependencies = [
 [[package]]
 name = "dom"
 version = "0.0.1"
-source = "git+https://github.com/servo/stylo?branch=2025-02-03#8af5d515a03bfca5d19fcaa541783327673a951e"
+source = "git+https://github.com/servo/stylo?branch=2025-02-03#1977193ab231d89cf0f87ccc23c05e4ff67ee3fd"
 dependencies = [
  "bitflags 2.8.0",
  "malloc_size_of",
@@ -4471,7 +4471,7 @@ dependencies = [
 [[package]]
 name = "malloc_size_of"
 version = "0.0.1"
-source = "git+https://github.com/servo/stylo?branch=2025-02-03#8af5d515a03bfca5d19fcaa541783327673a951e"
+source = "git+https://github.com/servo/stylo?branch=2025-02-03#1977193ab231d89cf0f87ccc23c05e4ff67ee3fd"
 dependencies = [
  "app_units",
  "cssparser",
@@ -6477,7 +6477,7 @@ dependencies = [
 [[package]]
 name = "selectors"
 version = "0.26.0"
-source = "git+https://github.com/servo/stylo?branch=2025-02-03#8af5d515a03bfca5d19fcaa541783327673a951e"
+source = "git+https://github.com/servo/stylo?branch=2025-02-03#1977193ab231d89cf0f87ccc23c05e4ff67ee3fd"
 dependencies = [
  "bitflags 2.8.0",
  "cssparser",
@@ -6762,7 +6762,7 @@ dependencies = [
 [[package]]
 name = "servo_arc"
 version = "0.4.0"
-source = "git+https://github.com/servo/stylo?branch=2025-02-03#8af5d515a03bfca5d19fcaa541783327673a951e"
+source = "git+https://github.com/servo/stylo?branch=2025-02-03#1977193ab231d89cf0f87ccc23c05e4ff67ee3fd"
 dependencies = [
  "serde",
  "stable_deref_trait",
@@ -6771,7 +6771,7 @@ dependencies = [
 [[package]]
 name = "servo_atoms"
 version = "0.0.1"
-source = "git+https://github.com/servo/stylo?branch=2025-02-03#8af5d515a03bfca5d19fcaa541783327673a951e"
+source = "git+https://github.com/servo/stylo?branch=2025-02-03#1977193ab231d89cf0f87ccc23c05e4ff67ee3fd"
 dependencies = [
  "string_cache",
  "string_cache_codegen",
@@ -7139,7 +7139,7 @@ checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
 [[package]]
 name = "static_prefs"
 version = "0.1.0"
-source = "git+https://github.com/servo/stylo?branch=2025-02-03#8af5d515a03bfca5d19fcaa541783327673a951e"
+source = "git+https://github.com/servo/stylo?branch=2025-02-03#1977193ab231d89cf0f87ccc23c05e4ff67ee3fd"
 
 [[package]]
 name = "strck"
@@ -7219,7 +7219,7 @@ dependencies = [
 [[package]]
 name = "style"
 version = "0.0.1"
-source = "git+https://github.com/servo/stylo?branch=2025-02-03#8af5d515a03bfca5d19fcaa541783327673a951e"
+source = "git+https://github.com/servo/stylo?branch=2025-02-03#1977193ab231d89cf0f87ccc23c05e4ff67ee3fd"
 dependencies = [
  "app_units",
  "arrayvec",
@@ -7277,7 +7277,7 @@ dependencies = [
 [[package]]
 name = "style_config"
 version = "0.0.1"
-source = "git+https://github.com/servo/stylo?branch=2025-02-03#8af5d515a03bfca5d19fcaa541783327673a951e"
+source = "git+https://github.com/servo/stylo?branch=2025-02-03#1977193ab231d89cf0f87ccc23c05e4ff67ee3fd"
 dependencies = [
  "lazy_static",
 ]
@@ -7285,7 +7285,7 @@ dependencies = [
 [[package]]
 name = "style_derive"
 version = "0.0.1"
-source = "git+https://github.com/servo/stylo?branch=2025-02-03#8af5d515a03bfca5d19fcaa541783327673a951e"
+source = "git+https://github.com/servo/stylo?branch=2025-02-03#1977193ab231d89cf0f87ccc23c05e4ff67ee3fd"
 dependencies = [
  "darling",
  "proc-macro2",
@@ -7315,7 +7315,7 @@ dependencies = [
 [[package]]
 name = "style_traits"
 version = "0.0.1"
-source = "git+https://github.com/servo/stylo?branch=2025-02-03#8af5d515a03bfca5d19fcaa541783327673a951e"
+source = "git+https://github.com/servo/stylo?branch=2025-02-03#1977193ab231d89cf0f87ccc23c05e4ff67ee3fd"
 dependencies = [
  "app_units",
  "bitflags 2.8.0",
@@ -7710,7 +7710,7 @@ dependencies = [
 [[package]]
 name = "to_shmem"
 version = "0.1.0"
-source = "git+https://github.com/servo/stylo?branch=2025-02-03#8af5d515a03bfca5d19fcaa541783327673a951e"
+source = "git+https://github.com/servo/stylo?branch=2025-02-03#1977193ab231d89cf0f87ccc23c05e4ff67ee3fd"
 dependencies = [
  "cssparser",
  "servo_arc",
@@ -7723,7 +7723,7 @@ dependencies = [
 [[package]]
 name = "to_shmem_derive"
 version = "0.1.0"
-source = "git+https://github.com/servo/stylo?branch=2025-02-03#8af5d515a03bfca5d19fcaa541783327673a951e"
+source = "git+https://github.com/servo/stylo?branch=2025-02-03#1977193ab231d89cf0f87ccc23c05e4ff67ee3fd"
 dependencies = [
  "darling",
  "proc-macro2",

components/layout_2020/display_list/stacking_context.rs

@@ -2,6 +2,7 @@
  * 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 core::f32;
 use std::cell::RefCell;
 use std::mem;
 
@@ -23,8 +24,8 @@ use style::values::generics::box_::Perspective;
 use style::values::generics::transform;
 use style::values::specified::box_::DisplayOutside;
 use style::Zero;
-use webrender_api as wr;
 use webrender_api::units::{LayoutPoint, LayoutRect, LayoutTransform, LayoutVector2D};
+use webrender_api::{self as wr, BorderRadius};
 use webrender_traits::display_list::{ScrollSensitivity, ScrollTreeNodeId, ScrollableNodeInfo};
 use wr::units::{LayoutPixel, LayoutSize};
 use wr::{ClipChainId, SpatialTreeItemKey, StickyOffsetBounds};
@@ -32,12 +33,12 @@ use wr::{ClipChainId, SpatialTreeItemKey, StickyOffsetBounds};
 use super::clip_path::build_clip_path_clip_chain_if_necessary;
 use super::DisplayList;
 use crate::display_list::conversions::{FilterToWebRender, ToWebRender};
-use crate::display_list::{BuilderForBoxFragment, DisplayListBuilder};
+use crate::display_list::{offset_radii, BuilderForBoxFragment, DisplayListBuilder};
 use crate::fragment_tree::{
     BoxFragment, ContainingBlockManager, Fragment, FragmentFlags, FragmentTree,
     PositioningFragment, SpecificLayoutInfo,
 };
-use crate::geom::{AuOrAuto, PhysicalRect, PhysicalSides};
+use crate::geom::{AuOrAuto, PhysicalRect, PhysicalSides, PhysicalVec};
 use crate::style_ext::ComputedValuesExt;
 
 #[derive(Clone)]
@@ -181,15 +182,13 @@ impl DisplayList {
         self.wr.pop_reference_frame();
     }
 
-    fn clip_scroll_frame(
+    fn clip_overflow_frame(
         &mut self,
         parent_scroll_node_id: &ScrollTreeNodeId,
         parent_clip_id: &ClipChainId,
         clip_rect: LayoutRect,
-        fragment_builder: BuilderForBoxFragment,
+        radii: wr::BorderRadius,
     ) -> ClipChainId {
-        let radii = fragment_builder.border_radius;
-
         let new_clip_id = if radii.is_zero() {
             self.wr
                 .define_clip_rect(parent_scroll_node_id.spatial_id, clip_rect)
@@ -959,10 +958,14 @@ struct ReferenceFrameData {
 }
 struct ScrollFrameData {
     scroll_tree_node_id: ScrollTreeNodeId,
-    clip_chain_id: wr::ClipChainId,
     scroll_frame_rect: LayoutRect,
 }
 
+struct OverflowFrameData {
+    clip_chain_id: wr::ClipChainId,
+    scroll_frame_data: Option<ScrollFrameData>,
+}
+
 impl BoxFragment {
     fn get_stacking_context_type(&self) -> Option<StackingContextType> {
         if self.style.establishes_stacking_context(self.base.flags) {
@@ -1245,21 +1248,23 @@ impl BoxFragment {
 
         // We want to build the scroll frame after the background and border, because
         // they shouldn't scroll with the rest of the box content.
-        if let Some(scroll_frame_data) = self.build_scroll_frame_if_necessary(
+        if let Some(overflow_frame_data) = self.build_overflow_frame_if_necessary(
             display_list,
             &new_scroll_node_id,
             &new_clip_chain_id,
             &containing_block.rect,
         ) {
+            new_clip_chain_id = overflow_frame_data.clip_chain_id;
+            if let Some(scroll_frame_data) = overflow_frame_data.scroll_frame_data {
                 new_scroll_node_id = scroll_frame_data.scroll_tree_node_id;
-            new_clip_chain_id = scroll_frame_data.clip_chain_id;
                 new_scroll_frame_size = Some(scroll_frame_data.scroll_frame_rect.size());
 
                 stacking_context
                     .contents
                     .push(StackingContextContent::Fragment {
                         scroll_node_id: new_scroll_node_id,
-                    reference_frame_scroll_node_id: reference_frame_scroll_node_id_for_fragments,
+                        reference_frame_scroll_node_id:
+                            reference_frame_scroll_node_id_for_fragments,
                         clip_chain_id: new_clip_chain_id,
                         section,
                         containing_block: containing_block.rect,
@@ -1268,6 +1273,7 @@ impl BoxFragment {
                         is_collapsed_table_borders: false,
                     });
             }
+        }
 
         let padding_rect = self
             .padding_rect()
@@ -1366,17 +1372,65 @@ impl BoxFragment {
         Some(display_list.define_clip_chain(*parent_clip_chain_id, [clip_id]))
     }
 
-    fn build_scroll_frame_if_necessary(
+    // TODO: merge this function with style.effective_overflow()
+    fn used_overflow(&self) -> PhysicalVec<ComputedOverflow> {
+        let mut overflow = self.style.effective_overflow();
+        let is_replaced_element = self.base.flags.contains(FragmentFlags::IS_REPLACED);
+
+        if is_replaced_element {
+            if overflow.x != ComputedOverflow::Visible {
+                overflow.x = ComputedOverflow::Clip;
+            }
+            if overflow.y != ComputedOverflow::Visible {
+                overflow.y = ComputedOverflow::Clip;
+            }
+        }
+
+        overflow
+    }
+
+    fn build_overflow_frame_if_necessary(
         &self,
         display_list: &mut DisplayList,
         parent_scroll_node_id: &ScrollTreeNodeId,
-        parent_clip_id: &wr::ClipChainId,
+        parent_clip_chain_id: &wr::ClipChainId,
         containing_block_rect: &PhysicalRect<Au>,
-    ) -> Option<ScrollFrameData> {
+    ) -> Option<OverflowFrameData> {
-        if !self.style.establishes_scroll_container() {
+        let overflow = self.used_overflow();
+
+        if overflow.x == ComputedOverflow::Visible && overflow.y == ComputedOverflow::Visible {
             return None;
         }
 
+        // Non-scrollable overflow path
+        if overflow.x == ComputedOverflow::Clip || overflow.y == ComputedOverflow::Clip {
+            let clip_margin = self.style.get_margin().overflow_clip_margin.px();
+            let overflow_clip_rect =
+                self.overflow_clip_rect(containing_block_rect, overflow, clip_margin);
+
+            let mut radii = BorderRadius::zero();
+            if overflow.x == ComputedOverflow::Clip && overflow.y == ComputedOverflow::Clip {
+                radii = offset_radii(
+                    BuilderForBoxFragment::new(self, containing_block_rect, false, false)
+                        .border_radius,
+                    clip_margin,
+                );
+            }
+
+            let clip_chain_id = display_list.clip_overflow_frame(
+                parent_scroll_node_id,
+                parent_clip_chain_id,
+                overflow_clip_rect,
+                radii,
+            );
+
+            return Some(OverflowFrameData {
+                clip_chain_id,
+                scroll_frame_data: None,
+            });
+        }
+
+        // scrollable overflow path
         // From https://drafts.csswg.org/css-overflow/#propdef-overflow:
         // > UAs must apply the overflow-* values set on the root element to the viewport when the
         // > root element’s display value is not none. However, when the root element is an [HTML]
@@ -1395,13 +1449,24 @@ impl BoxFragment {
             return None;
         }
 
+        let scroll_frame_rect = self
+            .padding_rect()
+            .translate(containing_block_rect.origin.to_vector())
+            .to_webrender();
+
+        let clip_chain_id = display_list.clip_overflow_frame(
+            parent_scroll_node_id,
+            parent_clip_chain_id,
+            scroll_frame_rect,
+            BuilderForBoxFragment::new(self, containing_block_rect, false, false).border_radius,
+        );
+
         let tag = self.base.tag?;
         let external_id = wr::ExternalScrollId(
             tag.to_display_list_fragment_id(),
             display_list.wr.pipeline_id,
         );
 
-        let overflow = self.style.effective_overflow();
         let sensitivity =
             if ComputedOverflow::Hidden == overflow.x && ComputedOverflow::Hidden == overflow.y {
                 ScrollSensitivity::Script
@@ -1409,19 +1474,8 @@ impl BoxFragment {
                 ScrollSensitivity::ScriptAndInputEvents
             };
 
-        let scroll_frame_rect = self
-            .padding_rect()
-            .translate(containing_block_rect.origin.to_vector())
-            .to_webrender();
         let content_rect = self.scrollable_overflow().to_webrender();
 
-        let clip_chain_id = display_list.clip_scroll_frame(
-            parent_scroll_node_id,
-            parent_clip_id,
-            scroll_frame_rect,
-            BuilderForBoxFragment::new(self, containing_block_rect, false, false),
-        );
-
         let scroll_tree_node_id = display_list.define_scroll_frame(
             parent_scroll_node_id,
             external_id,
@@ -1430,13 +1484,43 @@ impl BoxFragment {
             sensitivity,
         );
 
-        Some(ScrollFrameData {
+        Some(OverflowFrameData {
-            scroll_tree_node_id,
             clip_chain_id,
+            scroll_frame_data: Some(ScrollFrameData {
+                scroll_tree_node_id,
                 scroll_frame_rect,
+            }),
         })
     }
 
+    fn overflow_clip_rect(
+        &self,
+        containing_block_rect: &PhysicalRect<Au>,
+        overflow: PhysicalVec<ComputedOverflow>,
+        clip_margin: f32,
+    ) -> LayoutRect {
+        // TODO: update this to the proper box after the parser is ready
+        let mut clip_rect = self
+            .padding_rect()
+            .translate(containing_block_rect.origin.to_vector())
+            .to_webrender();
+
+        // Adjust by the overflow clip margin.
+        // https://drafts.csswg.org/css-overflow/#overflow-clip-margin
+        clip_rect = clip_rect.inflate(clip_margin, clip_margin);
+
+        if overflow.x != ComputedOverflow::Clip {
+            clip_rect.min.x = f32::MIN;
+            clip_rect.max.x = f32::MAX;
+        }
+        if overflow.y != ComputedOverflow::Clip {
+            clip_rect.min.y = f32::MIN;
+            clip_rect.max.y = f32::MAX;
+        }
+
+        clip_rect
+    }
+
     fn build_sticky_frame_if_necessary(
         &self,
         display_list: &mut DisplayList,

components/layout_2020/taffy/stylo_taffy/convert.rs

@@ -147,6 +147,7 @@ pub fn overflow(input: stylo::Overflow) -> taffy::Overflow {
         stylo::Overflow::Visible => taffy::Overflow::Visible,
         stylo::Overflow::Hidden => taffy::Overflow::Hidden,
         stylo::Overflow::Scroll => taffy::Overflow::Scroll,
+        stylo::Overflow::Clip => taffy::Overflow::Clip,
         // TODO: Support Overflow::Auto in Taffy
         stylo::Overflow::Auto => taffy::Overflow::Scroll,
     }

resources/servo.css

@@ -115,10 +115,15 @@ center { text-align: -moz-center; }
 
 label { cursor: default; }
 
+img {
+  overflow: clip !important;
+  overflow-clip-margin: 0 !important;
+}
+
 input:not([type=radio i]):not([type=checkbox i]):not([type=reset i]):not([type=button i]):not([type=submit i]),
 textarea {
   cursor: text;
-  overflow: hidden;
+  overflow: hidden !important;
   -servo-overflow-clip-box: content-box;
 }
 

tests/wpt/meta/css/css-backgrounds/background-origin/origin-border-box_with_radius.html.ini

@@ -1,2 +0,0 @@
-[origin-border-box_with_radius.html]
-  expected: FAIL

tests/wpt/meta/css/css-content/inheritance.html.ini

@@ -10,4 +10,3 @@
 
   [Property bookmark-level does not inherit]
     expected: FAIL
-

tests/wpt/meta/css/css-overflow/clip-001.html.ini

@@ -1,2 +0,0 @@
-[clip-001.html]
-  expected: FAIL

tests/wpt/meta/css/css-overflow/clip-002.html.ini

@@ -1,2 +0,0 @@
-[clip-002.html]
-  expected: FAIL

tests/wpt/meta/css/css-overflow/clip-003.html.ini

@@ -1,2 +0,0 @@
-[clip-003.html]
-  expected: FAIL

tests/wpt/meta/css/css-overflow/clip-004.html.ini

@@ -1,2 +0,0 @@
-[clip-004.html]
-  expected: FAIL

tests/wpt/meta/css/css-overflow/clip-005.html.ini

@@ -1,2 +0,0 @@
-[clip-005.html]
-  expected: FAIL

tests/wpt/meta/css/css-overflow/dynamic-visible-to-clip-001.html.ini

@@ -1,2 +0,0 @@
-[dynamic-visible-to-clip-001.html]
-  expected: FAIL

tests/wpt/meta/css/css-overflow/margin-block-end-scroll-area-001.html.ini

@@ -0,0 +1,2 @@
+[margin-block-end-scroll-area-001.html]
+    expected: FAIL

tests/wpt/meta/css/css-overflow/overflow-body-propagation-010.html.ini

@@ -1,2 +0,0 @@
-[overflow-body-propagation-010.html]
-  expected: FAIL

tests/wpt/meta/css/css-overflow/overflow-clip-cant-scroll.html.ini

@@ -1,2 +0,0 @@
-[overflow-clip-cant-scroll.html]
-  expected: FAIL

tests/wpt/meta/css/css-overflow/overflow-clip-content-visual-overflow.html.ini

@@ -1,2 +0,0 @@
-[overflow-clip-content-visual-overflow.html]
-  expected: FAIL

tests/wpt/meta/css/css-overflow/overflow-clip-margin-001.html.ini

@@ -1,2 +0,0 @@
-[overflow-clip-margin-001.html]
-  expected: FAIL

tests/wpt/meta/css/css-overflow/overflow-clip-margin-hit-testing.html.ini

@@ -1,3 +0,0 @@
-[overflow-clip-margin-hit-testing.html]
-  [Ensure elements in overflow-clip-margin are returned from elementFromPoint]
-    expected: FAIL

tests/wpt/meta/css/css-overflow/overflow-clip-margin-invalidation.html.ini

@@ -1,2 +0,0 @@
-[overflow-clip-margin-invalidation.html]
-  expected: FAIL

tests/wpt/meta/css/css-overflow/overflow-clip-margin-mul-column-border-box.html.ini

@@ -0,0 +1,2 @@
+[overflow-clip-margin-mul-column-border-box.html]
+    expected: FAIL

tests/wpt/meta/css/css-overflow/overflow-clip-margin-mul-column-content-box.html.ini

@@ -0,0 +1,2 @@
+[overflow-clip-margin-mul-column-content-box.html]
+    expected: FAIL

tests/wpt/meta/css/css-overflow/overflow-clip-rounded-table.html.ini

@@ -1,2 +0,0 @@
-[overflow-clip-rounded-table.html]
-  expected: FAIL

tests/wpt/meta/css/css-overflow/overflow-no-interpolation.html.ini

@@ -2,9 +2,6 @@
   [CSS Transitions with transition-behavior:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (-0.3) should be [initial\]]
     expected: FAIL
 
-  [CSS Transitions with transition-behavior:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (0) should be [initial\]]
-    expected: FAIL
-
   [CSS Transitions with transition-behavior:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (0.3) should be [initial\]]
     expected: FAIL
 
@@ -14,18 +11,12 @@
   [CSS Transitions with transition-behavior:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (0.6) should be [123px\]]
     expected: FAIL
 
-  [CSS Transitions with transition-behavior:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (1) should be [123px\]]
-    expected: FAIL
-
   [CSS Transitions with transition-behavior:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (1.5) should be [123px\]]
     expected: FAIL
 
   [CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (-0.3) should be [initial\]]
     expected: FAIL
 
-  [CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (0) should be [initial\]]
-    expected: FAIL
-
   [CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (0.3) should be [initial\]]
     expected: FAIL
 
@@ -35,9 +26,6 @@
   [CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (0.6) should be [123px\]]
     expected: FAIL
 
-  [CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (1) should be [123px\]]
-    expected: FAIL
-
   [CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (1.5) should be [123px\]]
     expected: FAIL
 
@@ -56,9 +44,6 @@
   [CSS Transitions: property <overflow-clip-margin> from [initial\] to [123px\] at (0.6) should be [123px\]]
     expected: FAIL
 
-  [CSS Transitions: property <overflow-clip-margin> from [initial\] to [123px\] at (1) should be [123px\]]
-    expected: FAIL
-
   [CSS Transitions: property <overflow-clip-margin> from [initial\] to [123px\] at (1.5) should be [123px\]]
     expected: FAIL
 
@@ -77,18 +62,12 @@
   [CSS Transitions with transition: all: property <overflow-clip-margin> from [initial\] to [123px\] at (0.6) should be [123px\]]
     expected: FAIL
 
-  [CSS Transitions with transition: all: property <overflow-clip-margin> from [initial\] to [123px\] at (1) should be [123px\]]
-    expected: FAIL
-
   [CSS Transitions with transition: all: property <overflow-clip-margin> from [initial\] to [123px\] at (1.5) should be [123px\]]
     expected: FAIL
 
   [CSS Animations: property <overflow-clip-margin> from [initial\] to [123px\] at (-0.3) should be [initial\]]
     expected: FAIL
 
-  [CSS Animations: property <overflow-clip-margin> from [initial\] to [123px\] at (0) should be [initial\]]
-    expected: FAIL
-
   [CSS Animations: property <overflow-clip-margin> from [initial\] to [123px\] at (0.3) should be [initial\]]
     expected: FAIL
 
@@ -98,9 +77,6 @@
   [CSS Animations: property <overflow-clip-margin> from [initial\] to [123px\] at (0.6) should be [123px\]]
     expected: FAIL
 
-  [CSS Animations: property <overflow-clip-margin> from [initial\] to [123px\] at (1) should be [123px\]]
-    expected: FAIL
-
   [CSS Animations: property <overflow-clip-margin> from [initial\] to [123px\] at (1.5) should be [123px\]]
     expected: FAIL
 

tests/wpt/meta/css/css-overflow/overflow-shorthand-002.html.ini

@@ -1,6 +1,3 @@
 [overflow-shorthand-002.html]
-  [overflow - horizontal writing mode]
-    expected: FAIL
-
   [overflow - vertical writing mode]
     expected: FAIL

tests/wpt/meta/css/css-overflow/parsing/overflow-clip-margin-computed.html.ini

@@ -1,10 +1,4 @@
 [overflow-clip-margin-computed.html]
-  [Property overflow-clip-margin value '0px']
-    expected: FAIL
-
-  [Property overflow-clip-margin value '10px']
-    expected: FAIL
-
   [Property overflow-clip-margin value 'content-box']
     expected: FAIL
 

tests/wpt/meta/css/css-overflow/parsing/overflow-clip-margin.html.ini

@@ -1,7 +1,4 @@
 [overflow-clip-margin.html]
-  [e.style['overflow-clip-margin'\] = "10px" should set the property value]
-    expected: FAIL
-
   [e.style['overflow-clip-margin'\] = "content-box" should set the property value]
     expected: FAIL
 

tests/wpt/meta/css/css-overflow/parsing/overflow-computed.html.ini

@@ -1,36 +0,0 @@
-[overflow-computed.html]
-  [Property overflow value 'clip']
-    expected: FAIL
-
-  [Property overflow value 'auto clip']
-    expected: FAIL
-
-  [Property overflow value 'clip auto']
-    expected: FAIL
-
-  [Property overflow value 'clip clip']
-    expected: FAIL
-
-  [Property overflow value 'clip hidden']
-    expected: FAIL
-
-  [Property overflow value 'clip scroll']
-    expected: FAIL
-
-  [Property overflow value 'clip visible']
-    expected: FAIL
-
-  [Property overflow value 'hidden clip']
-    expected: FAIL
-
-  [Property overflow value 'scroll clip']
-    expected: FAIL
-
-  [Property overflow value 'visible clip']
-    expected: FAIL
-
-  [Property overflow-y value 'clip']
-    expected: FAIL
-
-  [Property overflow-block value 'clip']
-    expected: FAIL

tests/wpt/meta/css/css-overflow/parsing/overflow-valid.html.ini

@@ -1,12 +0,0 @@
-[overflow-valid.html]
-  [e.style['overflow'\] = "clip" should set the property value]
-    expected: FAIL
-
-  [e.style['overflow'\] = "clip clip" should set the property value]
-    expected: FAIL
-
-  [e.style['overflow-y'\] = "clip" should set the property value]
-    expected: FAIL
-
-  [e.style['overflow-block'\] = "clip" should set the property value]
-    expected: FAIL

tests/wpt/meta/css/css-transforms/transform-clip-001.html.ini

@@ -1,2 +0,0 @@
-[transform-clip-001.html]
-  expected: FAIL

tests/wpt/meta/css/cssom-view/scrollWidthHeight-negative-margin-001.html.ini

@@ -8,5 +8,5 @@
   [scrollWidth/Height with negative margins: overflow: auto;]
     expected: FAIL
 
-  [scrollWidth/Height with negative margins: ]
+  [scrollWidth/Height with negative margins: overflow: clip;]
     expected: FAIL

tests/wpt/meta/css/cssom-view/scrollWidthHeight-negative-margin-002.html.ini

@@ -551,3 +551,111 @@
 
   [scrollHeight with negative margins: display: flow-root; overflow: scroll; direction: rtl; flex-direction: row;]
     expected: FAIL
+
+  [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
+
+  [scrollWidth with negative margins: display: flow-root; overflow: clip; direction: rtl; flex-direction: row;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flow-root; overflow: clip; direction: rtl; flex-direction: row;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: wrap-reverse;]
+    expected: FAIL
+
+  [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
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row-reverse;]
+    expected: FAIL
+
+  [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
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: row-reverse wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: row-reverse wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: row-reverse wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: row-reverse wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column;]
+    expected: FAIL
+
+  [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
+
+  [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
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column-reverse;]
+    expected: FAIL
+
+  [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
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: column-reverse wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: column-reverse wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: column-reverse wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: column-reverse wrap-reverse;]
+    expected: FAIL

tests/wpt/meta/html/rendering/widgets/baseline-alignment-and-overflow.tentative.html.ini

@@ -316,21 +316,3 @@
 
   [<input type="button" value="x" style="overflow: scroll; appearance: none;">]
     expected: FAIL
-
-  [<input type="range" style="overflow: visible; appearance: auto;">]
-    expected: FAIL
-
-  [<input type="range" style="overflow: visible; appearance: none;">]
-    expected: FAIL
-
-  [<input type="color" value="#000000" style="overflow: visible; appearance: auto;">]
-    expected: FAIL
-
-  [<input type="color" value="#000000" style="overflow: visible; appearance: none;">]
-    expected: FAIL
-
-  [<input type="image" src="data:(png)" alt="x" style="overflow: visible; appearance: auto;">]
-    expected: FAIL
-
-  [<input type="image" src="data:(png)" alt="x" style="overflow: visible; appearance: none;">]
-    expected: FAIL

tests/wpt/meta/html/rendering/widgets/button-layout/computed-style.html.ini

@@ -140,15 +140,6 @@
   [computed display of <input type=image> with display: inline-grid]
     expected: FAIL
 
-  [<input type=reset> overflow/overflow-clip-margin]
-    expected: FAIL
-
-  [<input type=button> overflow/overflow-clip-margin]
-    expected: FAIL
-
-  [<input type=submit> overflow/overflow-clip-margin]
-    expected: FAIL
-
   [<input type=color> overflow/overflow-clip-margin]
     expected: FAIL