Support flex-direction: column-reverse and writing-mode

e2e/VList.spec.ts

@@ -110,26 +110,26 @@ test.describe("smoke", () => {
     ).toBeVisible();
   });
 
-  // test("horizontally scrollable (writing-mode: vertical-rl)", async ({ page }) => {
-  //   await page.goto(storyUrl("basics-vlist--rtl"));
-
-  //   const component = page.locator(
-  //     '*[style*="writing-mode"]'
-  //   ) as ScrollableLocator;
-
-  //   // check if start is displayed
-  //   const first = component.getByText("列 ０", { exact: true });
-  //   await expect(first).toBeVisible();
-  //   expect(await relativeRight(component, first)).toEqual(0);
-
-  //   // scroll to the end
-  //   await scrollToLeft(component);
-
-  //   // check if the end is displayed
-  //   await expect(
-  //     component.getByText("列 ９９９", { exact: true })
-  //   ).toBeVisible();
-  // });
+  test("horizontally scrollable (writing-mode: vertical-rl)", async ({ page }) => {
+    await page.goto(storyUrl("basics-vlist--rtl"));
+
+    const component = page.locator(
+      '*[style*="writing-mode"]'
+    ) as ScrollableLocator;
+
+    // check if start is displayed
+    const first = component.getByText("列 ０", { exact: true });
+    await expect(first).toBeVisible();
+    expect(await relativeRight(component, first)).toEqual(0);
+
+    // scroll to the end
+    await scrollToLeft(component);
+
+    // check if the end is displayed
+    await expect(
+      component.getByText("列 ９９９", { exact: true })
+    ).toBeVisible();
+  });
 
   test("display: none", async ({ page }) => {
     await page.goto(storyUrl("basics-vlist--default"));

e2e/Virtualizer.spec.ts

@@ -139,22 +139,22 @@ test("overflow", async ({ page }) => {
   }
 });
 
-// test("reverse with flex-direction: column-reverse", async ({ page }) => {
-//   await page.goto(storyUrl("basics-virtualizer--inverted"));
+test("reverse with flex-direction: column-reverse", async ({ page }) => {
+  await page.goto(storyUrl("basics-virtualizer--inverted"));
 
-//   const component = await getScrollable(page);
+  const component = await getScrollable(page);
 
-//   // check if start is displayed
-//   const first = component.getByText("0", { exact: true });
-//   await expect(first).toBeVisible();
-//   expect(await relativeBottom(component, first)).toEqual(0);
+  // check if start is displayed
+  const first = component.getByText("0", { exact: true });
+  await expect(first).toBeVisible();
+  expect(await relativeBottom(component, first)).toEqual(0);
 
-//   // scroll to the end
-//   await scrollToTop(component);
+  // scroll to the end
+  await scrollToTop(component);
 
-//   // check if the end is displayed
-//   await expect(component.getByText("999", { exact: true })).toBeVisible();
-// });
+  // check if the end is displayed
+  await expect(component.getByText("999", { exact: true })).toBeVisible();
+});
 
 test.describe("aligned to bottom", () => {
   test("reverse", async ({ page }) => {

playwright.config.ts

@@ -38,7 +38,7 @@ export default defineConfig({
   projects: [
     {
       name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
+      use: { ...devices["Desktop Chrome"], deviceScaleFactor: 1.5 },
       grepInvert: new RegExp(String.raw`${IOS_SPECS}`),
     },
     {

src/core/scroller.ts

@@ -324,9 +324,31 @@ export const createScroller = (
     $observe(viewport) {
       viewportElement = viewport;
 
-      if (isHorizontal) {
-        isNegative = getComputedStyle(viewport).direction === "rtl";
-      }
+      const clean = store.$subscribe(UPDATE_SIZE_EVENT, () => {
+        // Detect overflowed direction after the initial viewport measurement
+        const viewportSize = store.$getViewportSize();
+        if (viewportSize) {
+          const prev = viewport[scrollOffsetKey];
+
+          const dummy = getCurrentDocument(viewport).createElement("div");
+          // Append element larger than the viewportSize to force overflow.
+          dummy.style.cssText = `visibility:hidden;min-${
+            isHorizontal ? "width" : "height"
+          }:${viewportSize + 9}px`;
+          viewport.appendChild(dummy);
+
+          // Set positive value to scrollTop/scrollLeft to check if the range is negative or positive.
+          // However the value can be positive value even if it is negative range (e.g. 0.6666px in Windows Chrome), so we use `< 1` here.
+          // For similar reason, the appended element's size must be larger than viewportSize + 1px, to take subpixels into account.
+          viewport[scrollOffsetKey] = 1;
+          isNegative = viewport[scrollOffsetKey] < 1;
+          viewport.removeChild(dummy);
+
+          viewport[scrollOffsetKey] = prev;
+
+          clean();
+        }
+      });
 
       scrollObserver = createScrollObserver(
         store,

stories/react/basics/VList.stories.tsx

@@ -98,7 +98,7 @@ export const Rtl: StoryObj = {
             );
           })}
         </VList>
-        {/* <VList
+        <VList
           style={{ width: "100%", height: 200, writingMode: "vertical-rl" }}
           horizontal
         >
@@ -124,7 +124,7 @@ export const Rtl: StoryObj = {
               </div>
             );
           })}
-        </VList> */}
+        </VList>
       </div>
     );
   },

stories/react/basics/Virtualizer.stories.tsx

@@ -234,25 +234,25 @@ export const Reverse: StoryObj = {
   },
 };
 
-// export const Inverted: StoryObj = {
-//   render: () => {
-//     return (
-//       <div
-//         style={{
-//           height: "100vh",
-//           overflowY: "auto",
-//           // opt out browser's scroll anchoring on header/footer because it will conflict to scroll anchoring of virtualizer
-//           overflowAnchor: "none",
-//           // apply column-reverse to reverse scroll direction
-//           display: "flex",
-//           flexDirection: "column-reverse",
-//         }}
-//       >
-//         <Virtualizer>{createRows(1000)}</Virtualizer>
-//       </div>
-//     );
-//   },
-// };
+export const Inverted: StoryObj = {
+  render: () => {
+    return (
+      <div
+        style={{
+          height: "100vh",
+          overflowY: "auto",
+          // opt out browser's scroll anchoring on header/footer because it will conflict to scroll anchoring of virtualizer
+          overflowAnchor: "none",
+          // apply column-reverse to reverse scroll direction
+          display: "flex",
+          flexDirection: "column-reverse",
+        }}
+      >
+        <Virtualizer>{createRows(1000)}</Virtualizer>
+      </div>
+    );
+  },
+};
 
 export const AlignBottom: StoryObj = {
   render: () => {