fix: handle scrollbar widths correctly (#309)

* Update borders test case to handle scrollbar widths

* fix the test

* Apply scrollbar dimensions correctly

* Fix regression caught by the tests

* fix regression in test

Author: stipsan

src/compute.ts

@@ -290,6 +290,22 @@ export default (
       const borderTop = parseInt(frameStyle.borderTopWidth as string, 10)
       const borderRight = parseInt(frameStyle.borderRightWidth as string, 10)
       const borderBottom = parseInt(frameStyle.borderBottomWidth as string, 10)
+      // The property existance checks for offfset[Width|Height] is because only HTMLElement objects have them, but any Element might pass by here
+      // @TODO find out if the "as HTMLElement" overrides can be dropped
+      const scrollbarWidth =
+        'offsetWidth' in frame
+          ? (frame as HTMLElement).offsetWidth -
+            (frame as HTMLElement).clientWidth -
+            borderLeft -
+            borderRight
+          : 0
+      const scrollbarHeight =
+        'offsetHeight' in frame
+          ? (frame as HTMLElement).offsetHeight -
+            (frame as HTMLElement).clientHeight -
+            borderTop -
+            borderBottom
+          : 0
 
       let blockScroll = 0
       let inlineScroll = 0
@@ -341,7 +357,8 @@ export default (
           const offset =
             0 - Math.min(frameRect.bottom - targetBlock, frame.scrollTop)
 
-          blockScroll = frame.scrollTop + offset + borderBottom
+          blockScroll =
+            frame.scrollTop + offset + borderBottom + scrollbarHeight
         }
       }
 
@@ -369,7 +386,7 @@ export default (
             frameRect.bottom,
             frameRect.height,
             borderTop,
-            borderBottom,
+            borderBottom + scrollbarHeight,
             targetBlock,
             targetBlock + targetRect.height,
             targetRect.height
@@ -424,7 +441,8 @@ export default (
           const offset =
             0 - Math.min(frameRect.right - targetInline, frame.scrollLeft)
 
-          inlineScroll = frame.scrollLeft + offset + borderRight
+          inlineScroll =
+            frame.scrollLeft + offset + borderRight + scrollbarWidth
         }
       }
 
@@ -452,7 +470,7 @@ export default (
             frameRect.right,
             frameRect.width,
             borderLeft,
-            borderRight,
+            borderRight + scrollbarWidth,
             targetInline,
             targetInline + targetRect.width,
             targetRect.width

tests/web-platform/custom/borders.html

@@ -154,25 +154,34 @@
 var tiles = document.querySelectorAll(".scroll-tile");
 var outerContainer = document.querySelector(".outer-scroll-container");
 var innerContainer = document.querySelector(".inner-scroll-container");
+// offsetWidth - borderWidth - clientWidth = scrollbar width!
+var borderWidth = 6;
+var outerOffsetX = outerContainer.offsetWidth - outerContainer.clientWidth - borderWidth;
+var outerOffsetY = outerContainer.offsetHeight - outerContainer.clientHeight - borderWidth;
+var innerOffsetX = innerContainer.offsetWidth - innerContainer.clientWidth - borderWidth;
+var innerOffsetY = innerContainer.offsetHeight - innerContainer.clientHeight - borderWidth;
 
 [
   [0, "start", "start", [{ x: 300, y: 300 }, { x: 55, y: 55 }]],
   [1, "start", "center", [{ x: 200, y: 300 }, { x: 100, y: 55 }]],
-  [2, "start", "end", [{ x: 100, y: 300 }, { x: 145, y: 55 }]],
+  [2, "start", "end", [{ x: 100, y: 300 }, { x: 145 + innerOffsetX, y: 55 }]],
   [3, "center", "start", [{ x: 300, y: 200 }, { x: 55, y: 100 }]],
   [4, "center", "center", [{ x: 200, y: 200 }, { x: 100, y: 100 }]],
-  [5, "center", "end", [{ x: 100, y: 200 }, { x: 145, y: 100 }]],
-  [6, "end", "start", [{ x: 300, y: 100 }, { x: 55, y: 145 }]],
-  [7, "end", "center", [{ x: 200, y: 100 }, { x: 100, y: 145 }]],
-  [8, "end", "end", [{ x: 100, y: 100 }, { x: 145, y: 145 }]],
-  [0, "nearest", "nearest", [{ x: 23, y: 23 }, { x: 0, y: 0 }]],
-  [8, "nearest", undefined, [{ x: 100, y: 100 }, { x: 145, y: 145 }]]
+  [5, "center", "end", [{ x: 100, y: 200 }, { x: 145 + innerOffsetX, y: 100 }]],
+  [6, "end", "start", [{ x: 300, y: 100 }, { x: 55, y: 145 + innerOffsetY }]],
+  [7, "end", "center", [{ x: 200, y: 100 }, { x: 100, y: 145 + innerOffsetY }]],
+  [8, "end", "end", [{ x: 100, y: 100 }, { x: 145 + innerOffsetX, y: 145 + innerOffsetY }]],
+  [0, "nearest", "nearest", [{ x: 23 + outerOffsetX, y: 23 + outerOffsetY }, { x: 0, y: 0 }]],
+  [8, "nearest", undefined, [{ x: 100, y: 100 }, { x: 145 + innerOffsetX, y: 145 + innerOffsetY }]]
+  
 ].forEach(function(suite) {
   var target = suite[0];
   var block = suite[1];
   var inline = suite[2];
+
   var outer = suite[3][0];
   var inner = suite[3][1];
+
   test(function() {
     window.scrollTo(0, 0);
     outerContainer.scrollTop = 0