tbtlr · February 19, 2016 19:39
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html dir="ltr" mozdisallowselectionprint moznomarginboxes>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    html {
      height: 100%;
      /* Font size is needed to make the activity bar the correct size. */
      font-size: 10px;
    }

    body {
      height: 100%;
    }

    @page {
      margin: 0;
    }

    #printContainer {
      display: none;
    }

    @media print {
      /* General rules for printing. */
      body {
        background: transparent none;
      }

      /* Rules for browsers that support mozPrintCallback */
      body[data-mozPrintCallback] #outerContainer {
        display: none;
      }
      body[data-mozPrintCallback] #printContainer {
        display: block;
      }
      /* wrapper around (scaled) print canvas elements */
      #printContainer > div {
        position: relative;
        top: 0;
        left: 0;
        overflow: hidden;
      }
      #printContainer canvas {
        display: block;
      }
    }
  </style>
  <script>
    function printPage() {
      var viewport = {width: 612, height: 792};

      var canvas = document.createElement('canvas');

      // The logical size of the canvas.
      canvas.width = Math.floor(viewport.width);
      canvas.height = Math.floor(viewport.height);

      // The rendered size of the canvas, relative to the size of canvasWrapper.
      canvas.style.width = '100%';
      canvas.style.height = '100%';

      var printContainer = document.getElementById('printContainer');
      var canvasWrapper = document.createElement('div');
      canvasWrapper.style.width = viewport.width + 'pt';
      canvasWrapper.style.height = viewport.height + 'pt';
      canvasWrapper.appendChild(canvas);
      printContainer.appendChild(canvasWrapper);
      canvas.mozPrintCallback = function(obj) {
        var ctx = obj.context;
        var pixelRatio = obj.printerPixelRatio;

        ctx.save();
        ctx.fillStyle = 'rgb(255, 255, 255)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = 'rgb(0, 255, 0)';
        ctx.lineWidth = 4;
        ctx.strokeRect(0, 0, canvas.width, canvas.height);
        ctx.restore();

        ctx.scale(pixelRatio, pixelRatio);

        setTimeout(function () {
          ctx.fillStyle = 'rgb(0, 0, 255)';
          ctx.font = "80px serif";
          ctx.fillText('test', 100, 100);
          obj.done();
        }, 100);
      };
    }

    var pageStyleSheet;

    function loaded() {
      window.addEventListener('beforeprint', function beforePrint(evt) {
        var body = document.querySelector('body');
        body.setAttribute('data-mozPrintCallback', true);

        var viewport = {width: 612, height: 792};

        pageStyleSheet = document.createElement('style');
        var pageSize = viewport;
        pageStyleSheet.textContent =
          // "size:<width> <height>" is what we need. But also add "A4" because
          // Firefox incorrectly reports support for the other value.
            '@supports ((size:A4) and (size:1pt 1pt)) {' +
            '@page { size: ' + pageSize.width + 'pt ' + pageSize.height + 'pt;}' +
              // The canvas and each ancestor node must have a height of 100% to make
              // sure that each canvas is printed on exactly one page.
            '#printContainer {height:100%}' +
            '#printContainer > div {width:100% !important;height:100% !important;}' +
            '}';
        body.appendChild(pageStyleSheet);

        printPage();
      });

      window.addEventListener('afterprint', function afterPrint(evt) {
        if (pageStyleSheet && pageStyleSheet.parentNode) {
          pageStyleSheet.parentNode.removeChild(pageStyleSheet);
          pageStyleSheet = null;
        }

        var printContainer = document.getElementById('printContainer');
        printContainer.textContent = '';
      });
    }
  </script>
 </head>
 <body onload="loaded()">
  <div id="outerContainer">print test</div>
  <div id="printContainer"></div>
 </body>
	<!DOCTYPE html>
	<html dir="ltr" mozdisallowselectionprint moznomarginboxes>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<style>
	* {
	padding: 0;
	margin: 0;
	}

	html {
	height: 100%;
	/* Font size is needed to make the activity bar the correct size. */
	font-size: 10px;
	}

	body {
	height: 100%;
	}

	@page {
	margin: 0;
	}

	#printContainer {
	display: none;
	}

	@media print {
	/* General rules for printing. */
	body {
	background: transparent none;
	}

	/* Rules for browsers that support mozPrintCallback */
	body[data-mozPrintCallback] #outerContainer {
	display: none;
	}
	body[data-mozPrintCallback] #printContainer {
	display: block;
	}
	/* wrapper around (scaled) print canvas elements */
	#printContainer > div {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
	}
	#printContainer canvas {
	display: block;
	}
	}
	</style>
	<script>
	function printPage() {
	var viewport = {width: 612, height: 792};

	var canvas = document.createElement('canvas');

	// The logical size of the canvas.
	canvas.width = Math.floor(viewport.width);
	canvas.height = Math.floor(viewport.height);

	// The rendered size of the canvas, relative to the size of canvasWrapper.
	canvas.style.width = '100%';
	canvas.style.height = '100%';

	var printContainer = document.getElementById('printContainer');
	var canvasWrapper = document.createElement('div');
	canvasWrapper.style.width = viewport.width + 'pt';
	canvasWrapper.style.height = viewport.height + 'pt';
	canvasWrapper.appendChild(canvas);
	printContainer.appendChild(canvasWrapper);
	canvas.mozPrintCallback = function(obj) {
	var ctx = obj.context;
	var pixelRatio = obj.printerPixelRatio;

	ctx.save();
	ctx.fillStyle = 'rgb(255, 255, 255)';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.strokeStyle = 'rgb(0, 255, 0)';
	ctx.lineWidth = 4;
	ctx.strokeRect(0, 0, canvas.width, canvas.height);
	ctx.restore();

	ctx.scale(pixelRatio, pixelRatio);

	setTimeout(function () {
	ctx.fillStyle = 'rgb(0, 0, 255)';
	ctx.font = "80px serif";
	ctx.fillText('test', 100, 100);
	obj.done();
	}, 100);
	};
	}

	var pageStyleSheet;

	function loaded() {
	window.addEventListener('beforeprint', function beforePrint(evt) {
	var body = document.querySelector('body');
	body.setAttribute('data-mozPrintCallback', true);

	var viewport = {width: 612, height: 792};

	pageStyleSheet = document.createElement('style');
	var pageSize = viewport;
	pageStyleSheet.textContent =
	// "size:<width> <height>" is what we need. But also add "A4" because
	// Firefox incorrectly reports support for the other value.
	'@supports ((size:A4) and (size:1pt 1pt)) {' +
	'@page { size: ' + pageSize.width + 'pt ' + pageSize.height + 'pt;}' +
	// The canvas and each ancestor node must have a height of 100% to make
	// sure that each canvas is printed on exactly one page.
	'#printContainer {height:100%}' +
	'#printContainer > div {width:100% !important;height:100% !important;}' +
	'}';
	body.appendChild(pageStyleSheet);

	printPage();
	});

	window.addEventListener('afterprint', function afterPrint(evt) {
	if (pageStyleSheet && pageStyleSheet.parentNode) {
	pageStyleSheet.parentNode.removeChild(pageStyleSheet);
	pageStyleSheet = null;
	}

	var printContainer = document.getElementById('printContainer');
	printContainer.textContent = '';
	});
	}
	</script>
	</head>
	<body onload="loaded()">
	<div id="outerContainer">print test</div>
	<div id="printContainer"></div>
	</body>