Merge pull request #308 from inokawa/contain-content

Add `contain: content` to container element
inokawa · Jan 1, 2024 · 735e8bf · 735e8bf
2 parents a8be7b3 + 61ddcb4
commit 735e8bf
Show file tree

Hide file tree

Showing 14 changed files with 91 additions and 87 deletions.
diff --git a/src/react/Viewport.tsx b/src/react/Viewport.tsx
@@ -45,6 +45,7 @@ export const Viewport = forwardRef<any, CustomViewportComponentProps>(
         <div
           style={useMemo((): CSSProperties => {
             return {
+              contain: "content",
               position: "relative",
               visibility: "hidden",
               width: width ?? "100%",

diff --git a/src/react/__snapshots__/VGrid.rtl.spec.tsx.snap b/src/react/__snapshots__/VGrid.rtl.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`rtl should work 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; right: 0px; visibility: visible; min-height: 50px; min-width: 100px;"

diff --git a/src/react/__snapshots__/VGrid.spec.tsx.snap b/src/react/__snapshots__/VGrid.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`grid should render 1 children 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100px; height: 50px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100px; height: 50px; pointer-events: auto;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -26,7 +26,7 @@ exports[`grid should render 4x4 children 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 400px; height: 200px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 400px; height: 200px; pointer-events: auto;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -151,7 +151,7 @@ exports[`grid should render 100x100 children 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -276,7 +276,7 @@ exports[`grid should render 1000x1000 children 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100000px; height: 40040px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100000px; height: 40040px; pointer-events: auto;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -401,7 +401,7 @@ exports[`grid should render 10000x10000 children 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 1000000px; height: 400040px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 1000000px; height: 400040px; pointer-events: auto;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -526,7 +526,7 @@ exports[`grid should render component 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -651,7 +651,7 @@ exports[`grid should render fragments 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100px; height: 100px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100px; height: 100px; pointer-events: auto;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -684,7 +684,7 @@ exports[`grid should render non elements 1`] = `
     style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100px; height: 280px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100px; height: 280px; pointer-events: auto;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -711,7 +711,7 @@ exports[`grid should render with given width / height 1`] = `
     style="overflow: auto; contain: strict; width: 100px; height: 100px;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 400px; height: 200px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 400px; height: 200px; pointer-events: auto;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"
@@ -841,7 +841,7 @@ exports[`should pass attributes to element 1`] = `
     tabindex="0"
   >
     <div
-      style="position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
     >
       <div
         style="display: grid; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: visible; min-height: 50px; min-width: 100px;"

diff --git a/src/react/__snapshots__/VGrid.ssr.spec.tsx.snap b/src/react/__snapshots__/VGrid.ssr.spec.tsx.snap
diff --git a/src/react/__snapshots__/VList.rtl.spec.tsx.snap b/src/react/__snapshots__/VList.rtl.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`rtl should not work in vertical 1`] = `
     style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100%; height: 5000px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100%; height: 5000px; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: visible;"
@@ -61,7 +61,7 @@ exports[`rtl should work in horizontal 1`] = `
     style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 10000px; height: 100%; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 10000px; height: 100%; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; right: 0px; visibility: visible; display: flex;"

diff --git a/src/react/__snapshots__/VList.spec.tsx.snap b/src/react/__snapshots__/VList.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`horizontal should render 1 children 1`] = `
     style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100px; height: 100%; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100px; height: 100%; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: visible; display: flex;"
@@ -26,7 +26,7 @@ exports[`horizontal should render 5 children 1`] = `
     style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 500px; height: 100%; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 500px; height: 100%; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: visible; display: flex;"
@@ -74,7 +74,7 @@ exports[`horizontal should render 100 children 1`] = `
     style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 10000px; height: 100%; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 10000px; height: 100%; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: visible; display: flex;"
@@ -129,7 +129,7 @@ exports[`horizontal should render 1000 children 1`] = `
     style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100000px; height: 100%; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100000px; height: 100%; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: visible; display: flex;"
@@ -184,7 +184,7 @@ exports[`horizontal should render 10000 children 1`] = `
     style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 1000000px; height: 100%; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 1000000px; height: 100%; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: visible; display: flex;"
@@ -239,7 +239,7 @@ exports[`horizontal should render component 1`] = `
     style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 300px; height: 100%; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 300px; height: 100%; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: visible; display: flex;"
@@ -273,7 +273,7 @@ exports[`horizontal should render fragments 1`] = `
     style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 200px; height: 100%; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 200px; height: 100%; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: visible; display: flex;"
@@ -306,7 +306,7 @@ exports[`horizontal should render non elements 1`] = `
     style="display: inline-block; overflow-x: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 200px; height: 100%; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 200px; height: 100%; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: visible; display: flex;"
@@ -329,7 +329,7 @@ exports[`horizontal should render with given width / height 1`] = `
     style="display: inline-block; overflow-x: auto; contain: strict; width: 100px; height: 800px;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 500px; height: 100%; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 500px; height: 100%; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; height: 100%; top: 0px; left: 0px; visibility: visible; display: flex;"
@@ -377,7 +377,7 @@ exports[`reverse should render many items 1`] = `
     style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100%; height: 5000px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100%; height: 5000px; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: visible;"
@@ -485,7 +485,7 @@ exports[`should pass attributes to element 1`] = `
     tabindex="0"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100%; height: 50px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100%; height: 50px; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: visible;"
@@ -505,7 +505,7 @@ exports[`should pass index to items 1`] = `
     style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100%; height: 250px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100%; height: 250px; pointer-events: auto;"
     >
       <div
         data-index="0"
@@ -558,7 +558,7 @@ exports[`should render with render prop 1`] = `
     style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100%; height: 50000px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100%; height: 50000px; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: visible;"
@@ -613,7 +613,7 @@ exports[`vertical should render 0 children 1`] = `
     style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100%; height: 50px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100%; height: 50px; pointer-events: auto;"
     />
   </div>
 </DocumentFragment>
@@ -625,7 +625,7 @@ exports[`vertical should render 1 children 1`] = `
     style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100%; height: 50px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100%; height: 50px; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: visible;"
@@ -645,7 +645,7 @@ exports[`vertical should render 5 children 1`] = `
     style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100%; height: 250px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100%; height: 250px; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: visible;"
@@ -693,7 +693,7 @@ exports[`vertical should render 100 children 1`] = `
     style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100%; height: 5000px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100%; height: 5000px; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: visible;"
@@ -748,7 +748,7 @@ exports[`vertical should render 1000 children 1`] = `
     style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100%; height: 50000px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100%; height: 50000px; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: visible;"
@@ -803,7 +803,7 @@ exports[`vertical should render 10000 children 1`] = `
     style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100%; height: 500000px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100%; height: 500000px; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: visible;"
@@ -858,7 +858,7 @@ exports[`vertical should render component 1`] = `
     style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100%; height: 150px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100%; height: 150px; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: visible;"
@@ -892,7 +892,7 @@ exports[`vertical should render fragments 1`] = `
     style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100%; height: 100px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100%; height: 100px; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: visible;"
@@ -925,7 +925,7 @@ exports[`vertical should render non elements 1`] = `
     style="display: block; overflow-y: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100%; height: 100px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100%; height: 100px; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: visible;"
@@ -948,7 +948,7 @@ exports[`vertical should render with given width / height 1`] = `
     style="display: block; overflow-y: auto; contain: strict; width: 100px; height: 800px;"
   >
     <div
-      style="position: relative; visibility: hidden; width: 100%; height: 250px; pointer-events: auto;"
+      style="contain: content; position: relative; visibility: hidden; width: 100%; height: 250px; pointer-events: auto;"
     >
       <div
         style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0px; visibility: visible;"