Add manual tests (template and pagebreaks)

eKoopmans · eKoopmans · commit 950c355aebb1 · 2018-10-07T16:59:30.000+11:00
diff --git a/test/manual/pagebreaks.html b/test/manual/pagebreaks.html
@@ -0,0 +1,99 @@
+﻿<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>html2pdf Test - Pagebreaks</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <style type="text/css">
+      /* Avoid unexpected sizing on all elements. */
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      /* CSS styling for before/after/avoid. */
+      .before {
+        page-break-before: always;
+      }
+      .after {
+        page-break-after: always;
+      }
+      .avoid {
+        page-break-inside: avoid;
+      }
+
+      /* Big and bigger elements. */
+      .big {
+        height: 10.9in;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+      .fullpage {
+        height: 11in;
+        background-color: fuchsia;
+        border: 1px solid black;
+      }
+      .bigger {
+        height: 11.1in;
+        background-color: aqua;
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+
+  <body>
+    <!-- Different options. -->
+    <select id="mode">
+      <option value="avoid-all">Avoid-all</option>
+      <option value="css">CSS</option>
+      <option value="legacy">Legacy</option>
+      <option value="specify">Specified elements (using before/after/avoid)</option>
+    </select>
+
+    <!-- Button to generate PDF. -->
+    <button onclick="test()">Generate PDF</button>
+
+    <!-- Div to capture. -->
+    <div id="root">
+      <p>First line</p>
+      <p class="before">Break before</p>
+      <p class="after">Break after</p>
+      <p>No effect (should be top of 3rd page, using css or specify).</p>
+      <p class="html2pdf__page-break">Legacy (should create a break after).</p>
+      <p>No effect (should be top of 2nd page, using legacy).</p>
+      <p class="avoid big">Big element (should start on new page, using avoid-all/css/specify).</p>
+      <p>No effect (should start on next page *only* using avoid-all).</p>
+      <p>No effect (for spacing).</p>
+      <p class="avoid fullpage">Full-page element (should start on new page using avoid-all/css/specify).</p>
+      <p>No effect (for spacing).</p>
+      <p class="avoid bigger">Even bigger element (should continue normally, because it's more than a page).</p>
+    </div>
+
+    <!-- Include html2pdf bundle. -->
+    <script src="../../dist/html2pdf.bundle.js"></script>
+
+    <script>
+      // Pagebreak fields:  mode, before, after, avoid
+      // Pagebreak modes:   'avoid-all', 'css', 'legacy'
+
+      function test() {
+        // Get the element.
+        var element = document.getElementById('root');
+
+        // Choose pagebreak options based on mode.
+        var mode = document.getElementById('mode').value;
+        var pagebreak = (mode === 'specify') ?
+            { mode: '', before: '.before', after: '.after', avoid: '.avoid' } :
+            { mode: mode };
+
+        // Generate the PDF.
+        html2pdf().from(element).set({
+          filename: mode + '.pdf',
+          pagebreak: pagebreak,
+          jsPDF: {orientation: 'portrait', unit: 'in', format: 'letter', compressPDF: true}
+        }).save();
+      }
+    </script>
+  </body>
+</html>
diff --git a/test/manual/template.html b/test/manual/template.html
@@ -0,0 +1,44 @@
+﻿<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>html2pdf Test - Template</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <style type="text/css">
+      /* Basic styling for root. */
+      #root {
+        width: 500px;
+        height: 700px;
+        background-color: yellow;
+      }
+    </style>
+  </head>
+
+  <body>
+    <!-- Button to generate PDF. -->
+    <button onclick="test()">Generate PDF</button>
+
+    <!-- Div to capture. -->
+    <div id="root">
+      This is a test
+    </div>
+
+    <!-- Include html2pdf bundle. -->
+    <script src="../../dist/html2pdf.bundle.js"></script>
+
+    <script>
+      function test() {
+        // Get the element.
+        var element = document.getElementById('root');
+
+        // Generate the PDF.
+        html2pdf().from(element).set({
+          margin: 1,
+          filename: 'test.pdf',
+          html2canvas: { scale: 2 },
+          jsPDF: {orientation: 'portrait', unit: 'in', format: 'letter', compressPDF: true}
+        }).save();
+      }
+    </script>
+  </body>
+</html>
