@applitools/screenshoter 3.2.9 → 3.3.3

package/.bongo/dry-run/package-lock.json

@@ -9,13 +9,13 @@
       }
     },
     "node_modules/@applitools/screenshoter": {
-      "version": "3.2.8",
+      "version": "3.3.2",
       "resolved": "file:../dry-run.tgz",
-      "integrity": "sha512-GjN+h/vj5/lKFjJPm302jD0xSFIOoSG7gPU/ogEUcCS9l5FDcMW27PRMA/xGlolKrabmCgDHJqVbAXE1WCgjyQ==",
+      "integrity": "sha512-5epXLfRKO+64jIbxTYwUMUui0xGPQmwccz5aMlLg2V1gtgyrcZ689cn7n8jDBWPCt1Ds0MNEZCimcDjGiAXb4Q==",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
-        "@applitools/snippets": "2.1.7",
-        "@applitools/utils": "1.2.4",
+        "@applitools/snippets": "2.1.11",
+        "@applitools/utils": "1.2.5",
         "png-async": "0.9.4"
       },
       "engines": {
@@ -23,17 +23,17 @@
       }
     },
     "node_modules/@applitools/snippets": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/@applitools/snippets/-/snippets-2.1.7.tgz",
-      "integrity": "sha512-Tr4Gj7Qov/oPy+8WI4oVmmubxqpOzr8P3Wjzpl6rA57xKLg6/TiIg5oZNb4+jEmO2ShjNYLaEwRWHl7kPgb4fw==",
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/@applitools/snippets/-/snippets-2.1.11.tgz",
+      "integrity": "sha512-uNx2sqFACva5Lt23NvYjnxkbUoyAmoCN8dVtAFOhL2a0HyxzYKP5z0tCT/JK8QqM3gkSzeQ0rT0FdxQ9UAl7Og==",
       "engines": {
         "node": ">=8.9.0"
       }
     },
     "node_modules/@applitools/utils": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@applitools/utils/-/utils-1.2.4.tgz",
-      "integrity": "sha512-w7ma6FFGyqhdP6LEcuHFWOcH7EzBjnoAX3UfbFWcTHA3QXnXPX37Y2ENYRodfwkorP1cUKyUHwNXJB/BMIj/hg==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@applitools/utils/-/utils-1.2.5.tgz",
+      "integrity": "sha512-nETSgqGeCk5yqjFaQ7x1KURf+t5IxsY2RoeFB5w1+6lHprmHdEithMcN0tiJWeqi14QBJdUkXCzCJrMW5RcDFg==",
       "engines": {
         "node": ">= 8.9.0"
       }
@@ -47,22 +47,22 @@
   "dependencies": {
     "@applitools/screenshoter": {
       "version": "file:../dry-run.tgz",
-      "integrity": "sha512-GjN+h/vj5/lKFjJPm302jD0xSFIOoSG7gPU/ogEUcCS9l5FDcMW27PRMA/xGlolKrabmCgDHJqVbAXE1WCgjyQ==",
+      "integrity": "sha512-5epXLfRKO+64jIbxTYwUMUui0xGPQmwccz5aMlLg2V1gtgyrcZ689cn7n8jDBWPCt1Ds0MNEZCimcDjGiAXb4Q==",
       "requires": {
-        "@applitools/snippets": "2.1.7",
-        "@applitools/utils": "1.2.4",
+        "@applitools/snippets": "2.1.11",
+        "@applitools/utils": "1.2.5",
         "png-async": "0.9.4"
       }
     },
     "@applitools/snippets": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/@applitools/snippets/-/snippets-2.1.7.tgz",
-      "integrity": "sha512-Tr4Gj7Qov/oPy+8WI4oVmmubxqpOzr8P3Wjzpl6rA57xKLg6/TiIg5oZNb4+jEmO2ShjNYLaEwRWHl7kPgb4fw=="
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/@applitools/snippets/-/snippets-2.1.11.tgz",
+      "integrity": "sha512-uNx2sqFACva5Lt23NvYjnxkbUoyAmoCN8dVtAFOhL2a0HyxzYKP5z0tCT/JK8QqM3gkSzeQ0rT0FdxQ9UAl7Og=="
     },
     "@applitools/utils": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@applitools/utils/-/utils-1.2.4.tgz",
-      "integrity": "sha512-w7ma6FFGyqhdP6LEcuHFWOcH7EzBjnoAX3UfbFWcTHA3QXnXPX37Y2ENYRodfwkorP1cUKyUHwNXJB/BMIj/hg=="
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@applitools/utils/-/utils-1.2.5.tgz",
+      "integrity": "sha512-nETSgqGeCk5yqjFaQ7x1KURf+t5IxsY2RoeFB5w1+6lHprmHdEithMcN0tiJWeqi14QBJdUkXCzCJrMW5RcDFg=="
     },
     "png-async": {
       "version": "0.9.4",

package/CHANGELOG.md

@@ -4,6 +4,29 @@
 ## Unreleased
 
 
+## 3.3.3 - 2021/12/22
+
+- improve default rotation and scaling logic
+- improve scroll into viewport algorithm
+- fix lazy handling of image rotation
+- updated to @applitools/snippets@2.1.11 (from 2.1.10)
+- updated to @applitools/utils@1.2.5 (from 1.2.4)
+
+## 3.3.2 - 2021/12/20
+
+- add basic support of webview screenshots on ios
+- updated to @applitools/snippets@2.1.10 (from 2.1.8)
+
+## 3.3.1 - 2021/12/17
+
+- no changes
+
+## 3.3.0 - 2021/12/16
+
+- fix ios web screenshots on pages without viewport meta tag
+- improve native apps support
+- updated to @applitools/snippets@2.1.8 (from 2.1.7)
+
 ## 3.2.9 - 2021/11/14
 
 - add support of scrollable elements that change its size during scrolling

package/docker-compose.yaml

@@ -0,0 +1,29 @@
+{
+  "version": "3.4",
+  "services": {
+    "chrome": {
+      "image": "selenium/standalone-chrome",
+      "environment": [
+        "SE_NODE_OVERRIDE_MAX_SESSIONS=true",
+        "SE_NODE_MAX_SESSIONS=30"
+      ],
+      "volumes": [
+        "/dev/shm:/dev/shm"
+      ],
+      "network_mode": "host"
+    },
+    "firefox": {
+      "image": "selenium/standalone-firefox",
+      "environment": [
+        "SE_NODE_OVERRIDE_MAX_SESSIONS=true",
+        "SE_NODE_MAX_SESSIONS=30"
+      ],
+      "volumes": [
+        "/dev/shm:/dev/shm"
+      ],
+      "ports": [
+        "4445:4444"
+      ]
+    }
+  }
+}

package/index.js

@@ -1 +1,2 @@
-module.exports = require('./src/screenshoter')
+module.exports = require('./src/take-screenshot')
+exports.takeScreenshot = require('./src/take-screenshot')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/screenshoter",
-  "version": "3.2.9",
+  "version": "3.3.3",
   "description": "Applitools universal screenshoter for web and native applications",
   "keywords": [
     "applitools",
@@ -49,15 +49,15 @@
     }
   },
   "dependencies": {
-    "@applitools/snippets": "2.1.7",
-    "@applitools/utils": "1.2.4",
+    "@applitools/snippets": "2.1.11",
+    "@applitools/utils": "1.2.5",
     "png-async": "0.9.4"
   },
   "devDependencies": {
-    "@applitools/driver": "1.3.2",
+    "@applitools/driver": "1.4.6",
     "@applitools/sdk-release-kit": "0.13.4",
-    "@applitools/spec-driver-webdriverio": "1.2.0",
-    "@applitools/test-utils": "1.0.9",
+    "@applitools/spec-driver-webdriverio": "1.2.5",
+    "@applitools/test-utils": "1.0.10",
     "chromedriver": "^95.0.0",
     "eslint": "^7.9.0",
     "eslint-plugin-mocha-no-only": "^1.1.1",

package/src/find-image-pattern.js

@@ -1,60 +1,33 @@
 function findImagePattern(image, pattern) {
   for (let pixel = 0; pixel < image.width * image.height; ++pixel) {
     if (isPattern(image, pixel, pattern)) {
-      return {
-        x: (pixel % image.width) - pattern.offset,
-        y: Math.floor(pixel / image.width) - pattern.offset,
-      }
+      const patterOffset = pattern.offset * pattern.pixelRatio
+      return {x: (pixel % image.width) - patterOffset, y: Math.floor(pixel / image.width) - patterOffset}
     }
   }
   return null
 }
 
 function isPattern(image, index, pattern) {
-  const channels = 4
-  const roundNumber = pattern.size - Math.floor(pattern.size / 2)
-  for (const [chunkIndex, chunkColor] of pattern.mask.entries()) {
-    const pixelOffset = index + image.width * pattern.size * chunkIndex
-    for (let round = 0; round < roundNumber; ++round) {
-      const sideLength = pattern.size - round * 2
-      const stepsNumber = sideLength * channels - channels
-      const threshold = Math.min((roundNumber - round) * 10 + 10, 100)
-      for (let step = 0; step < stepsNumber; ++step) {
-        let pixelIndex = pixelOffset + round + round * image.width
-
-        if (step < sideLength) {
-          pixelIndex += step
-        } else if (step < sideLength * 2 - 1) {
-          pixelIndex += sideLength - 1 + ((step % sideLength) + 1) * image.width
-        } else if (step < sideLength * 3 - 2) {
-          pixelIndex += (sideLength - 1) * image.width + (sideLength - (step % sideLength) - 1)
-        } else {
-          pixelIndex += (step % sideLength) * image.width
-        }
-
-        const pixelColor = pixelColorAt(image, pixelIndex, threshold)
-        if (pixelColor !== chunkColor) {
-          return false
-        }
-      }
+  const itemLength = pattern.size * pattern.pixelRatio
+  for (const [itemIndex, itemColor] of pattern.mask.entries()) {
+    for (let partOffset = itemIndex * itemLength; partOffset < (itemIndex + 1) * itemLength; ++partOffset) {
+      const pixelColor = pixelColorAt(image, index + partOffset)
+      if (pixelColor !== itemColor) return false
     }
   }
   return true
 }
 
-function pixelColorAt(image, index, threshold = 0) {
+function pixelColorAt(image, index) {
   const channels = 4
   const r = image.data[index * channels]
   const g = image.data[index * channels + 1]
   const b = image.data[index * channels + 2]
-  const rgb = [r, g, b]
 
-  // WHITE
-  if (rgb.every(sub => sub >= 255 - threshold)) return 1
-  // BLACK
-  else if (rgb.every(sub => sub <= threshold)) return 0
-  // OTHER
-  else return -1
+  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b
+
+  return luminance < 128 ? /* black */ 1 : /* white */ 0
 }
 
 module.exports = findImagePattern

package/src/image.js

@@ -6,7 +6,7 @@ const utils = require('@applitools/utils')
 
 function makeImage(data) {
   let image, size
-  let transforms = {rotate: 0, scale: 1, crop: null}
+  let transforms = {rotate: 0, scale: 1, crop: null, modifiers: []}
 
   if (utils.types.isBase64(data)) {
     const buffer = Buffer.from(data, 'base64')
@@ -20,39 +20,45 @@ function makeImage(data) {
     image = fromBuffer(data)
     size = extractPngSize(data)
   } else if (data.isImage) {
-    image = data.toRaw()
-    size = data.size
     transforms = data.transforms
+    image = data.toRaw()
+    size = utils.geometry.scale(data.size, 1 / transforms.scale)
   } else if (utils.types.has(data, ['width', 'height'])) {
     image = fromSize(data)
     if (data.data) image.data = data.data
     size = {width: data.width, height: data.height}
+  } else if (data.auto) {
+    size = {width: -1, height: -1}
   } else {
     throw new Error('Unable to create an image abstraction from unknown data')
   }
 
-  if (!transforms.crop) {
-    transforms.crop = utils.geometry.region({x: 0, y: 0}, size)
-  }
-
   return {
     get isImage() {
       return true
     },
     get size() {
-      return utils.geometry.round(utils.geometry.scale(size, transforms.scale))
+      return utils.geometry.round(
+        utils.geometry.rotate(utils.geometry.scale(size, transforms.scale), transforms.rotate),
+      )
     },
     get transforms() {
       return {...transforms}
     },
     get width() {
-      return size.width
+      return this.size.width
     },
     get height() {
-      return size.height
+      return this.size.height
     },
     scale(ratio) {
       transforms.scale *= ratio
+      // size = utils.geometry.scale(size, ratio)
+      return this
+    },
+    rotate(degrees) {
+      transforms.rotate = (transforms.rotate + degrees) % 360
+      // size = utils.geometry.rotate(size, degrees)
       return this
     },
     crop(region) {
@@ -66,28 +72,50 @@ function makeImage(data) {
       } else {
         region = utils.geometry.scale(region, 1 / transforms.scale)
       }
-      region = utils.geometry.rotate(region, transforms.rotate)
-      transforms.crop = utils.geometry.intersect(transforms.crop, utils.geometry.offset(region, transforms.crop))
-
-      size = utils.geometry.round(utils.geometry.size(transforms.crop))
-
+      region = utils.geometry.rotate(region, -transforms.rotate, utils.geometry.rotate(size, transforms.rotate))
+      region = transforms.crop
+        ? utils.geometry.intersect(transforms.crop, utils.geometry.offset(region, transforms.crop))
+        : utils.geometry.intersect({x: 0, y: 0, ...size}, region)
+      transforms.crop = region
+      size = utils.geometry.size(transforms.crop)
       return this
     },
-    rotate(degree) {
-      transforms.rotate = (transforms.rotate + degree) % 360
+    copy(srcImage, offset) {
+      const scale = srcImage.transforms.scale
+      if (!image) {
+        size = {
+          width: Math.max(Math.floor((offset.x + srcImage.width) / scale), size.width),
+          height: Math.max(Math.floor((offset.y + srcImage.height) / scale), size.height),
+        }
+        transforms.scale = Math.min(scale, transforms.scale)
+      }
+      transforms.modifiers.push({
+        type: 'copy',
+        image: srcImage.scale(scale === transforms.scale ? 1 / scale : scale / transforms.scale).toObject(),
+        offset: utils.geometry.scale(offset, 1 / transforms.scale),
+      })
+
       return this
     },
-    async copy(srcImage, offset) {
-      const [dst, src] = await Promise.all([this.toObject(), srcImage.toObject()])
-      image = await copy(dst, src, offset)
+    frame(topImage, bottomImage, region) {
+      const scale = topImage.transforms.scale
+      const prevSize = size
+      region = utils.geometry.scale(region, 1 / scale)
+      size = {
+        width: Math.floor(topImage.width / scale + Math.max(size.width - region.width, 0)),
+        height: Math.floor(topImage.height / scale + Math.max(size.height - region.height, 0)),
+      }
+      transforms.modifiers.push({
+        type: 'frame',
+        top: topImage.scale(scale === transforms.scale ? 1 / scale : scale / transforms.scale).toObject(),
+        bottom: bottomImage.scale(scale === transforms.scale ? 1 / scale : scale / transforms.scale).toObject(),
+        region,
+      })
+      transforms.added = {width: size.width - prevSize.width, height: size.height - prevSize.height}
       return this
     },
-    async combine(firstImage, lastImage, region) {
-      const [first, last, src] = await Promise.all([firstImage.toObject(), lastImage.toObject(), this.toObject()])
-      image = await combine(first, last, src, region)
-      size = {width: image.width, height: image.height}
-      transforms.crop = utils.geometry.region({x: 0, y: 0}, size)
-      return this
+    async toRaw() {
+      return image
     },
     async toBuffer() {
       const image = await this.toObject()
@@ -99,19 +127,17 @@ function makeImage(data) {
     async toFile(path) {
       return toFile(await image, path)
     },
-    async toRaw() {
-      return image
-    },
     async toObject() {
-      image = await transform(await image, transforms)
-      transforms = {rotate: 0, scale: 1, crop: utils.geometry.region({x: 0, y: 0}, size)}
+      image = await transform(image ? await image : size, transforms)
+      transforms = {crop: null, scale: 1, rotate: 0, modifiers: []}
       return image
     },
     async debug(debug) {
       if (!debug || !debug.path) return
       const timestamp = new Date().toISOString().replace(/[-T:.]/g, '_')
       const filename = ['screenshot', timestamp, debug.name, debug.suffix].filter(part => part).join('_') + '.png'
-      return toFile(await transform(await image, transforms), path.join(debug.path, filename)).catch(() => null)
+      const transformedImage = await transform(image ? await image : size, transforms)
+      return toFile(transformedImage, path.join(debug.path, filename)).catch(() => null)
     },
   }
 }
@@ -164,10 +190,27 @@ async function toFile(image, path) {
 }
 
 async function transform(image, transforms) {
-  const croppedImage = transforms.crop ? await extract(image, transforms.crop) : image
-  const scaledImage = transforms.scale !== 1 ? await scale(croppedImage, transforms.scale) : croppedImage
-  const rotatedImage = transforms.rotate > 0 ? await rotate(scaledImage, transforms.rotate) : scaledImage
-  return rotatedImage
+  if (!image.data) {
+    const size = transforms.added
+      ? {width: image.width - transforms.added.width, height: image.height - transforms.added.height}
+      : image
+    image = new png.Image(size)
+  }
+
+  image = await transforms.modifiers.reduce(async (image, modifier) => {
+    if (modifier.type === 'copy') {
+      return copy(await image, await modifier.image, modifier.offset)
+    } else if (modifier.type === 'frame') {
+      return frame(await modifier.top, await modifier.bottom, await image, modifier.region)
+    } else {
+      return image
+    }
+  }, image)
+
+  image = transforms.crop ? await extract(image, transforms.crop) : image
+  image = transforms.scale !== 1 ? await scale(image, transforms.scale) : image
+  image = transforms.rotate !== 0 ? await rotate(image, transforms.rotate) : image
+  return image
 }
 
 async function scale(image, scaleRatio) {
@@ -256,7 +299,7 @@ async function rotate(image, degrees) {
     for (let srcY = 0, dstX = 0; srcY < image.height; ++srcY, ++dstX) {
       for (let srcX = 0, dstY = image.width - 1; srcX < image.width; ++srcX, --dstY) {
         const pixel = image.data.readUInt32BE((srcY * image.width + srcX) * 4)
-        dstImage.data.writeUInt32BE(pixel, (srcX * dstImage.width + dstY) * 4)
+        dstImage.data.writeUInt32BE(pixel, (dstY * dstImage.width + dstX) * 4)
       }
     }
   } else {
@@ -288,98 +331,98 @@ async function copy(dstImage, srcImage, offset) {
   return dstImage
 }
 
-async function combine(firstImage, lastImage, srcImage, region) {
+async function frame(topImage, bottomImage, srcImage, region) {
   region = utils.geometry.intersect(
-    {x: 0, y: 0, width: firstImage.width, height: firstImage.height},
+    {x: 0, y: 0, width: topImage.width, height: topImage.height},
     utils.geometry.round(region),
   )
 
-  if (region.x === 0 && region.y === 0 && region.width >= firstImage.width && region.height >= firstImage.height) {
+  if (region.x === 0 && region.y === 0 && region.width >= topImage.width && region.height >= topImage.height) {
     return srcImage
   }
 
-  if (region.width === srcImage.width && region.height === srcImage.height) {
-    await copy(firstImage, srcImage, {x: region.x, y: region.y})
-    return firstImage
+  if (region.width >= srcImage.width && region.height >= srcImage.height) {
+    await copy(topImage, srcImage, {x: region.x, y: region.y})
+    return topImage
   }
 
   const dstImage = new png.Image({
-    width: firstImage.width - region.width + srcImage.width,
-    height: firstImage.height - region.height + srcImage.height,
+    width: topImage.width + Math.max(srcImage.width - region.width, 0),
+    height: topImage.height + Math.max(srcImage.height - region.height, 0),
   })
 
   if (region.width === srcImage.width) {
-    const topImage = await extract(firstImage, {
+    const topExtImage = await extract(topImage, {
       x: 0,
       y: 0,
-      width: firstImage.width,
+      width: topImage.width,
       height: region.y + region.height,
     })
-    await copy(dstImage, topImage, {x: 0, y: 0})
+    await copy(dstImage, topExtImage, {x: 0, y: 0})
   } else if (region.height === srcImage.height) {
-    const leftImage = await extract(firstImage, {
+    const leftExtImage = await extract(topImage, {
       x: 0,
       y: 0,
       width: region.x + region.width,
-      height: firstImage.height,
+      height: topImage.height,
     })
-    await copy(dstImage, leftImage, {x: 0, y: 0})
+    await copy(dstImage, leftExtImage, {x: 0, y: 0})
   } else {
-    const topLeftImage = await extract(firstImage, {
+    const topLeftExtImage = await extract(topImage, {
       x: 0,
       y: 0,
       width: region.x + region.width,
       height: region.y + region.height,
     })
-    await copy(dstImage, topLeftImage, {x: 0, y: 0})
+    await copy(dstImage, topLeftExtImage, {x: 0, y: 0})
 
-    const rightExtImage = await extract(firstImage, {
+    const rightExtImage = await extract(topImage, {
       x: region.x + region.width,
       y: 0,
-      width: firstImage.width - (region.x + region.width),
+      width: topImage.width - (region.x + region.width),
       height: region.y,
     })
     await copy(dstImage, rightExtImage, {x: region.x + region.width, y: 0})
 
-    const bottomExtImage = await extract(firstImage, {
+    const bottomExtImage = await extract(topImage, {
       x: 0,
       y: region.y + region.height,
       width: region.x,
-      height: firstImage.height - (region.y + region.height),
+      height: topImage.height - (region.y + region.height),
     })
     await copy(dstImage, bottomExtImage, {x: 0, y: region.y + region.height})
   }
 
-  if (lastImage.height > region.y + region.height || lastImage.width > region.x + region.width) {
+  if (bottomImage.height > region.y + region.height || bottomImage.width > region.x + region.width) {
     // first image might be higher
-    const yDiff = firstImage.height - lastImage.height
+    const yDiff = topImage.height - bottomImage.height
     if (region.width === srcImage.width) {
-      const bottomImage = await extract(lastImage, {
+      const bottomExtImage = await extract(bottomImage, {
         x: 0,
         y: region.y - yDiff + region.height,
-        width: lastImage.width,
-        height: lastImage.height - (region.y - yDiff + region.height),
+        width: bottomImage.width,
+        height: bottomImage.height - (region.y - yDiff + region.height),
       })
-      await copy(dstImage, bottomImage, {x: 0, y: region.y + srcImage.height})
+      await copy(dstImage, bottomExtImage, {x: 0, y: region.y + Math.max(srcImage.height, region.height)})
     } else if (region.height === srcImage.height) {
-      const rightImage = await extract(lastImage, {
+      const rightExtImage = await extract(bottomImage, {
         x: region.x + region.width,
         y: 0,
-        width: lastImage.width - (region.x + region.width),
-        height: lastImage.height,
+        width: bottomImage.width - (region.x + region.width),
+        height: bottomImage.height,
       })
-      await copy(dstImage, rightImage, {x: region.x + srcImage.width, y: 0})
+      await copy(dstImage, rightExtImage, {x: region.x + Math.max(srcImage.width, region.width), y: 0})
     } else {
-      const bottomRightImage = await extract(lastImage, {
+      const bottomRightExtImage = await extract(bottomImage, {
         x: region.x,
         y: region.y - yDiff,
-        width: lastImage.width - region.x,
-        height: lastImage.height - (region.y - yDiff),
+        width: bottomImage.width - region.x,
+        height: bottomImage.height - (region.y - yDiff),
       })
 
-      await copy(dstImage, bottomRightImage, {
-        x: region.x + srcImage.width - region.width,
-        y: region.y + srcImage.height - region.height,
+      await copy(dstImage, bottomRightExtImage, {
+        x: region.x + Math.max(srcImage.width - region.width, 0),
+        y: region.y + Math.max(srcImage.height - region.height, 0),
       })
     }
   }

package/src/scroll-into-viewport.js

@@ -15,14 +15,23 @@ async function scrollIntoViewport({context, scroller, region, logger}) {
   let remainingOffset = {x: elementContextRegion.x, y: elementContextRegion.y}
   while (currentContext) {
     const scrollingElement = await currentContext.getScrollingElement()
-    const scrollingElementOffset = scrollingElement
-      ? utils.geometry.location(await scrollingElement.getClientRegion())
-      : {x: 0, y: 0}
+    if (!scrollingElement) {
+      currentContext = currentContext.parent
+      continue
+    }
 
-    const actualOffset = await scroller.moveTo(
-      utils.geometry.offsetNegative(remainingOffset, scrollingElementOffset),
-      scrollingElement,
-    )
+    const scrollableRegion = await scrollingElement.getClientRegion()
+    const requiredOffset = {
+      x: Math.max(
+        remainingOffset.x - (scrollableRegion.x + Math.max(scrollableRegion.width - elementContextRegion.width, 0)),
+        0,
+      ),
+      y: Math.max(
+        remainingOffset.y - (scrollableRegion.y + Math.max(scrollableRegion.height - elementContextRegion.height, 0)),
+        0,
+      ),
+    }
+    const actualOffset = await scroller.moveTo(requiredOffset, scrollingElement)
 
     remainingOffset = utils.geometry.offset(
       utils.geometry.offsetNegative(remainingOffset, actualOffset),