diff --git a/javascript/examples/previewTest.html b/javascript/examples/previewTest.html
new file mode 100644
index 000000000..45c3c0098
--- /dev/null
+++ b/javascript/examples/previewTest.html
@@ -0,0 +1,152 @@
+<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=8" ><![endif]-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Hello, World! example for mxGraph</title>
+
+  <!-- Sets the basepath for the library if not in same directory -->
+	<script type="text/javascript">
+		mxBasePath = '../src';
+	</script>
+
+	<!-- Loads and initializes the library -->
+	<script type="text/javascript" src="../src/js/mxClient.js"></script>
+
+	<!-- Example code -->
+	<script type="text/javascript">
+		// Program starts here. Creates a sample graph in the
+		// DOM node with the specified ID. This function is invoked
+		// from the onLoad event handler of the document (see below).
+		function main(container)
+		{
+			// Checks if the browser is supported
+			if (!mxClient.isBrowserSupported())
+			{
+				// Displays an error message if the browser is not supported.
+				mxUtils.error('Browser is not supported!', 200, false);
+			}
+			else
+			{
+				// Disables the built-in context menu
+				mxEvent.disableContextMenu(container);
+
+				// Loads the stencils into the registry
+				var req = mxUtils.load('stencils.xml');
+				var root = req.getDocumentElement();
+				var shape = root.firstChild;
+
+				while (shape != null)
+				{
+					if (shape.nodeType == mxConstants.NODETYPE_ELEMENT)
+					{
+						mxStencilRegistry.addStencil(shape.getAttribute('name'), new mxStencil(shape));
+					}
+
+					shape = shape.nextSibling;
+				}
+
+				// Creates the graph inside the given container
+				var graph = new mxGraph(container);
+				graph.setPanning(true);
+
+				// Enables rubberband selection
+				new mxRubberband(graph);
+
+				// Gets the default parent for inserting new cells. This
+				// is normally the first child of the root (ie. layer 0).
+				var parent = graph.getDefaultParent();
+
+				// Adds cells to the model in a single step
+				graph.getModel().beginUpdate();
+				try
+				{
+					var v1 = graph.insertVertex(parent, null, 'Hello,', 0, 0, 160, 320, 'shape=and');
+					var v2 = graph.insertVertex(parent, null, 'World!', 2202, 323, 160, 140, 'shape=triangle');
+					var v3 = graph.insertVertex(parent, null, 'World!', 1202, 323, 160, 140, 'shape=ellipse;opacity=20;');
+					var v3 = graph.insertVertex(parent, null, 'World!', 1302, 323, 160, 140, 'shape=rectangle;opacity=20;');
+					var e1 = graph.insertEdge(parent, null, '', v1, v2);
+				}
+				finally
+				{
+					// Updates the display
+					graph.getModel().endUpdate();
+				}
+
+				document.body.appendChild(mxUtils.button('print', function()
+				{
+					var scale = mxUtils.getScaleForPageCount(1, 
+						graph,mxConstants.PAGE_FORMAT_A4_LANDSCAPE);
+					scale = 0.49449590101522844;
+					var preview = new mxPrintPreview(graph, scale, 
+					mxConstants.PAGE_FORMAT_A4_LANDSCAPE);
+
+					if (document.documentMode == 8)
+					{
+						preview.getDoctype = function ()
+						{
+							return '<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=8"> <![endif]-->';
+						};
+					}
+					else if (document.documentMode == 7)
+					{
+						preview.getDoctype = function ()
+						{
+							return '<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=7"> <![endif]-->';
+						};
+					}
+
+					preview.open();
+					mxLog.debug('scale', scale);
+				}));
+
+				mxLog.show();
+				var bds = graph.view.getGraphBounds();
+				mxLog.debug('x', bds.x, bds.y, bds.width, bds.height);
+
+				var outline;
+
+				function displayOutline()
+				{
+					var create = outline == null;
+					if (create) {
+						var div = document.createElement('div');
+						div.style.position = 'relative';
+						div.style.overflow = 'hidden';
+						div.style.width = '100%';
+						div.style.height = '100%';
+						div.style.filter = 'progid:DXImageTransform.Microsoft.alpha(opacity=100)';
+						div.style.background = 'white';
+						div.style.cursor = 'move';
+						var wnd = new mxWindow('Test', div, 780, 440, 200, 175, false);
+						var outl = new mxOutline(graph, div);
+						wnd.setClosable(true);
+						wnd.setResizable(true);
+						wnd.setMaximizable(true);
+						wnd.setMinimizable(true);
+						wnd.destroyOnClose = false;
+						wnd.addListener(mxEvent.RESIZE_END,
+						function() {
+							outl.update();
+						});
+						outline = wnd;
+						outline.outline = outl;
+					}
+					outline.setVisible(true);
+					outline.outline.update(true);
+				}
+
+				displayOutline();
+			}
+		};
+	</script>
+</head>
+
+<!-- Page passes the container for the graph to the program -->
+<body onload="main(document.getElementById('graphContainer'))">
+
+	<!-- Creates a container for the graph with a grid wallpaper -->
+	<div id="graphContainer"
+		style="position:relative;overflow:hidden;width:821px;height:641px;background:url('editors/images/grid.gif');cursor:default;">
+	</div>
+</body>
+</html>
