Merge pull request #84 from asturur/gh-pages

Create failing case for canvas poistioning
fabricjs · Jun 11, 2015 · 3f604ca · 3f604ca
2 parents f739d2d + 6ca02b6
commit 3f604ca
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 0 deletions.
diff --git a/assets/html/scrolling.html b/assets/html/scrolling.html
@@ -0,0 +1,44 @@
+<html>
+  <head>
+    <script type="text/javascript" src="../../lib/fabric.js" ></script>
+    <style>
+      canvas#b {
+        border: 1px solid red;
+      }
+      .imp-modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+      }
+      #modal-body {
+        position: absolute;
+        height: 100%;
+        overflow-y: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="imp-modal" >
+      <div id="modal-body">
+        <canvas id="b" width="200" height="400"></canvas>
+      </div>
+    </div>
+    <script type="text/javascript">
+      var canvasB = window._canvas = new fabric.Canvas('b', {
+            backgroundColor: '#FFF',
+            selection: false,
+            isDrawingMode: true
+          });
+
+      canvasB.canvas_h = 2000;
+      canvasB.canvas_w = 200;
+      canvasB.setHeight(canvasB.canvas_h).setWidth(canvasB.canvas_w);
+
+      document.getElementById('modal-body').onscroll = function() {
+        canvasB.calcOffset();
+      };
+    </script>
+  </body>
+</html>
diff --git a/test/misc/position.html b/test/misc/position.html
@@ -53,3 +53,8 @@ <h3>Border on canvas</h3>
     init(new fabric.Canvas('c3'));
   </script>
 </div>
+
+<div class="test">
+  <h3>Scrolling canvas in fixed and absolute div</h3>
+  <iframe src="../../assets/html/scrolling.html" width="202" height="200" ></iframe>
+</div>