Merge pull request #45 from keshav1720/add-scroll

Add scroll test case and matrixScroll

Author: ombr

src/index.pug

@@ -15,7 +15,8 @@ html(lang='en')
       include ../node_modules/reset-css/reset.css
       include ./demo.css
   body
-    include ../test/svg-composition.pug
+    // - include ../test/svg-composition.pug
+    include ../test/scroll.pug
     //.super(style="height: 200px; width: 200px;")
     //div(style="margin-top: 40px; margin-left: 40px")
       //div(style="margin-top: 40px")
@@ -27,12 +28,12 @@ html(lang='en')
       .referentiel
         .pointer
     //div(style="margin-top: 14px")
-    div(style="position: relative; top: 40px; left: 40px")
-      p Hello World
-      div
-        div(style="position: absolute; top: 40px; left: 50px;")
-          .referentiel
-            .pointer
+    // - div(style="position: relative; top: 40px; left: 40px")
+    // -   p Hello World
+    // -   div
+    // -     div(style="position: absolute; top: 40px; left: 50px;")
+    // -       .referentiel
+    // -         .pointer
     //div(style="position: absolute; top: 40px; left: 50px;")
       .referentiel
         .pointer

src/referentiel.ts

@@ -107,7 +107,8 @@ class Referentiel {
       this.matrixTransformOrigin(),
       this.matrixTransform(),
       Referentiel.inv(this.matrixTransformOrigin()),
-      this.matrixBorder()
+      this.matrixBorder(),
+      this.matrixScroll()
     );
   }
 
@@ -168,6 +169,17 @@ class Referentiel {
     ];
   }
 
+  matrixScroll(): Matrix {
+    if (!(this.reference instanceof HTMLElement)) return Referentiel.identity();
+    const left = this.reference.scrollLeft;
+    const top = this.reference.scrollTop;
+    return [
+      [1, 0, -left],
+      [0, 1, -top],
+      [0, 0, 1],
+    ];
+  }
+
   parent(element: Node): Node | null {
     if (
       element.parentNode != null &&

test/pug_loader.js

@@ -94,6 +94,7 @@ describe("Pug", function () {
     "absolute_tricky",
     "absolute_stacked",
     "absolute_transformations",
+    "scroll"
   ];
   results = [];
   for (j = 0, len = ref.length; j < len; j++) {

test/scroll.pug

@@ -0,0 +1,8 @@
+div(style="overflow:auto; width: 200px; height: 200px;")
+  .referentiel(style="width: 5000px; height: 5000px;")
+    script.
+      document.scripts[document.scripts.length - 1].parentElement.parentElement.scrollTop = 50
+      document.scripts[document.scripts.length - 1].parentElement.parentElement.scrollLeft = 30
+    .assert(data-assert="0,0:30,50")
+    .assert(data-assert="10,10:40,60")
+