fix(nearest): target that matches the scrolling frame height should scroll (#141)

stipsan · web-flow · commit fe9a0517afa3 · 2018-10-07T14:17:55.000+02:00
Relates to scroll-into-view/scroll-into-view-if-needed#432
diff --git a/integration/__snapshots__/target_same_height.test.js.snap b/integration/__snapshots__/target_same_height.test.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`the "nearest" option works with target and frame having equal dimensions block: "nearest" 1`] = `
+Array [
+  Object {
+    "el": "div.container",
+    "left": 0,
+    "top": 100,
+  },
+  Object {
+    "el": "html",
+    "left": 0,
+    "top": 0,
+  },
+]
+`;
diff --git a/integration/target_same_height.html b/integration/target_same_height.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<script src="../umd/compute-scroll-into-view.js"></script>
+<script src="./utils.js"></script>
+<style>
+  html, body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    width: 100vw;
+  }
+  .container {
+    background: whitesmoke;
+    height: 100px;
+    width: 100px;
+    overflow: auto;
+  }
+  .pane {
+    height: 100px;
+    width: 100px;
+  }
+  .target {
+    background: crimson;
+  }
+</style>
+<div class="container">
+    <div class="pane"></div>
+    <div class="pane target"></div>
+    <div class="pane"></div>
+</div>
diff --git a/integration/target_same_height.test.js b/integration/target_same_height.test.js
@@ -0,0 +1,19 @@
+beforeAll(async () => {
+  await page.goto('http://localhost:3000/integration/target_same_height')
+})
+
+describe('the "nearest" option works with target and frame having equal dimensions', () => {
+  test('block: "nearest"', async () => {
+    expect.assertions(3)
+    const actual = await page.evaluate(() => {
+      return window
+        .computeScrollIntoView(document.querySelector('.target'), {
+          block: 'nearest',
+        })
+        .map(window.mapActions)
+    })
+    expect(actual).toHaveLength(2)
+    expect(actual[0]).toMatchObject({ el: 'div.container', left: 0, top: 100 })
+    expect(actual).toMatchSnapshot()
+  })
+})
diff --git a/src/index.ts b/src/index.ts
@@ -161,8 +161,8 @@ function alignNearest(
    *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛
    */
   if (
-    (elementEdgeStart < scrollingEdgeStart && elementSize < scrollingSize) ||
-    (elementEdgeEnd > scrollingEdgeEnd && elementSize > scrollingSize)
+    (elementEdgeStart <= scrollingEdgeStart && elementSize <= scrollingSize) ||
+    (elementEdgeEnd >= scrollingEdgeEnd && elementSize >= scrollingSize)
   ) {
     return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart
   }
diff --git a/yarn.lock b/yarn.lock
