test: include reftests previewer with docs website (#1799)

www/.gitignore

@@ -6,3 +6,6 @@ node_modules
 public/
 .DS_Store
 yarn-error.log
+src/results.json
+static/tests/preview.js
+src/preview.js

www/src/preview.ts

@@ -0,0 +1,115 @@
+import * as results from './results.json' ;
+const testList: TestList = results;
+
+const testSelector: HTMLSelectElement | null = document.querySelector('#test_selector');
+const browserSelector: HTMLSelectElement | null = document.querySelector('#browser_selector');
+const previewImage: HTMLImageElement | null = document.querySelector('#preview_image');
+const testLink: HTMLAnchorElement | null = document.querySelector('#test_link');
+
+interface Test {
+    windowWidth: number;
+    windowHeight: number;
+    platform: {
+        name: string;
+        version: string;
+    }
+    "devicePixelRatio": number;
+    "id": string;
+    "screenshot": string;
+}
+
+type TestList = {[key: string]: Test[]};
+
+function onTestChange(browserTests: Test[]) {
+    if (browserSelector) {
+        while (browserSelector.firstChild) {
+            browserSelector.firstChild.remove();
+        }
+        browserTests.forEach((browser, i) => {
+            if (i === 0) {
+                onBrowserChange(browser);
+            }
+            const option = document.createElement('option');
+            option.value = browser.id;
+            option.textContent = browser.id.replace(/_/g, ' ');
+            browserSelector.appendChild(option);
+        });
+    }
+}
+
+function onBrowserChange(browserTest: Test) {
+    if (previewImage) {
+        previewImage.src = `/results/${browserTest.screenshot}.png`;
+        if (browserTest.devicePixelRatio > 1) {
+            previewImage.style.transform = `scale(${1 / browserTest.devicePixelRatio})`;
+        }
+    }
+}
+
+function selectTest(testName: string) {
+    if (testLink) {
+        testLink.textContent = testLink.href = testName;
+    }
+    onTestChange(testList[testName]);
+}
+
+const UP_ARROW = 38;
+const DOWN_ARROW = 40;
+const LEFT_ARROW = 37;
+const RIGHT_ARROW = 39;
+
+window.addEventListener('keydown', e => {
+    if (testSelector && browserSelector) {
+        if (e.keyCode === UP_ARROW) {
+            testSelector.selectedIndex = Math.max(0, testSelector.selectedIndex - 1);
+            const event = new Event('change');
+            testSelector.dispatchEvent(event);
+            e.preventDefault();
+        } else if (e.keyCode === DOWN_ARROW) {
+            testSelector.selectedIndex = Math.min(testSelector.children.length - 1, testSelector.selectedIndex + 1);
+            const event = new Event('change');
+            testSelector.dispatchEvent(event);
+            e.preventDefault();
+        } else if (e.keyCode === LEFT_ARROW) {
+            browserSelector.selectedIndex = Math.max(0, browserSelector.selectedIndex - 1);
+            const event = new Event('change');
+            browserSelector.dispatchEvent(event);
+            e.preventDefault();
+        } else if (e.keyCode === RIGHT_ARROW) {
+            browserSelector.selectedIndex = Math.min(browserSelector.children.length - 1, browserSelector.selectedIndex + 1);
+            const event = new Event('change');
+            browserSelector.dispatchEvent(event);
+            e.preventDefault();
+        }
+    }
+});
+
+if (testSelector && browserSelector) {
+    testSelector.addEventListener('change', () => {
+        selectTest(testSelector.value);
+    }, false);
+
+    browserSelector.addEventListener('change', () => {
+        testList[testSelector.value].some(browser => {
+            if (browser.id === browserSelector.value) {
+                if (browser) {
+                    onBrowserChange(browser);
+                }
+                return true;
+            }
+            return false;
+        });
+    }, false);
+
+    const tests: string[] = Object.keys(testList);
+    tests.forEach((testName, i) => {
+        if (i === 0) {
+            selectTest(testName);
+        }
+        const option = document.createElement('option');
+        option.value = testName;
+        option.textContent = testName;
+
+        testSelector.appendChild(option);
+    });
+}

www/static/tests/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>html2canvas - Test result preview</title>
+</head>
+<body>
+
+<div>
+    <select id="test_selector"></select>
+    <select id="browser_selector"></select>
+    <a href="#" id="test_link" target="_blank">Test link</a>
+</div>
+<div>
+    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" id="preview_image" alt="Preview image" />
+</div>
+
+<script src="preview.js"></script>
+</body>
+</html>

www/webpack.config.js

@@ -0,0 +1,20 @@
+const path = require('path');
+
+module.exports = {
+    mode: 'development',
+    target: 'web',
+    entry:  path.resolve(__dirname, './src/preview.ts'),
+    output: {
+        path: path.resolve(__dirname, './static/tests'),
+        filename: 'preview.js'
+    },
+    resolve: {
+        extensions: [".tsx", ".ts", ".js", ".json"]
+    },
+    module: {
+        rules: [
+            // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
+            { test: /\.tsx?$/, use: ["ts-loader"], exclude: /node_modules/ }
+        ]
+    }
+};