High DPI support for the visual tests

Tests/Data/VisualTests/acid1.rml

@@ -9,7 +9,7 @@
 <style type="text/css">
 /* RmlUi does not accept styling of the html/rml element, they have been moved into body. */
 body {
-font-size: 10px;
+font-size: 10dp;
 color: white;
 margin: 1.5em;
 border: .5em black;
@@ -30,7 +30,7 @@ dt {
 background-color: rgb(204,0,0);
 margin: 0; 
 padding: 1em;
-width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
+width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50dp */
 height: 28em;
 border: .5em black;
 float: left;

Tests/Data/VisualTests/border_radius.rml

@@ -10,27 +10,27 @@
 			color: #444;
 		}
 		div {
-			margin: 20px auto;
-			width: 200px;
-			height: 120px;
+			margin: 20dp auto;
+			width: 200dp;
+			height: 120dp;
 			background: #c3c3c3;
 			border-color: #55f #f57 #55f #afa;
 		}
 		.thin {
-			border-width: 10px 5px 25px 20px;
-			border-radius: 80px 30px;
+			border-width: 10dp 5dp 25dp 20dp;
+			border-radius: 80dp 30dp;
 			decorator: gradient( horizontal #ff8400 #ffd34f );
 		}
 		.thick {
-			border-width: 40px 20px;
-			border-radius: 30px;
+			border-width: 40dp 20dp;
+			border-radius: 30dp;
 		}
 		.arc {
-			width: 80px;
-			height: 80px;
-			border-width: 40px;
+			width: 80dp;
+			height: 80dp;
+			border-width: 40dp;
 			border-color: #ff8400 #ff8400 #ffd34f #ffd34f;
-			border-radius: 0 150px;
+			border-radius: 0 150dp;
 		}
 		.split {
 			line-height: 2.5;
@@ -38,8 +38,8 @@
 		.split span {
 			background: #c3c3c3;
 			border-color: #55f #f57 #55f #afa;
-			border-width: 5px;
-			border-radius: 8px;
+			border-width: 5dp;
+			border-radius: 8dp;
 		}
 	</style>
 </head>

Tests/Data/VisualTests/box_sizing.rml

@@ -7,9 +7,9 @@
 	<style>
 		div > div {
 			width: 50%;
-			margin: 10px 0;
-			padding: 20px;
-			border: 10px #999;
+			margin: 10dp 0;
+			padding: 20dp;
+			border: 10dp #999;
 			background-color: #aaf;
 		}
 		.border-box {
@@ -23,11 +23,11 @@
 			width: 23.3%;  /* width + margins should be 33.3% */
 			margin-left: 5%;
 			margin-right: 5%;
-			border-width: 20px;
+			border-width: 20dp;
 		}
 		.fill {
-			height: 200px;
-			border: 15px #ffa;
+			height: 200dp;
+			border: 15dp #ffa;
 			background: #f00;
 			overflow: auto;
 		}

Tests/Data/VisualTests/element_label.rml

@@ -11,7 +11,7 @@
 			invader: 179px 152px 50px 40px;
 		}
 		body {
-			font-size: 16px;
+			font-size: 16dp;
 		}
 		input, button {
 			margin: 0 1em;
@@ -33,7 +33,7 @@
 		button {
 			display: inline-block;
 			background: #aaa;
-			border: 1px #333;
+			border: 1dp #333;
 			padding: 0.5em 1em;
 			tab-index: auto;
 		}

Tests/Data/VisualTests/float_basic.rml

@@ -11,16 +11,16 @@
 			color: #444;
 		}
 		#content {
-			width: 250px;
+			width: 250dp;
 			margin: 0 auto;
 		}
 		div.float {
 			float: left;
 			background-color: #bbb;
-			border: 1px #333;
-			width: 100px;
-			height: 100px;
-			margin: 5px;
+			border: 1dp #333;
+			width: 100dp;
+			height: 100dp;
+			margin: 5dp;
 		}
 		.red {
 			color: red;

Tests/Data/VisualTests/float_overflow.rml

@@ -10,20 +10,20 @@
 			color: #444;
 		}
 		#content {
-			width: 200px;
+			width: 200dp;
 			margin: 0 auto;
 		}
 		.box {
 			background-color: #cce;
-			border: 5px #77b;
+			border: 5dp #77b;
 		}
 		.float {
 			float: left;
 			background-color: #ddda;
-			border: 1px #333;
-			width: 200px;
-			height: 130px;
-			margin: 5px;
+			border: 1dp #333;
+			width: 200dp;
+			height: 130dp;
+			margin: 5dp;
 		}
 		
 	</style>

Tests/Data/VisualTests/media_query_01.rml

@@ -14,15 +14,15 @@
 		body {
 			background: #ddd;
 			color: #444;
-			right: 440px;
+			right: 440dp;
 			width: -1px;
-			left: 0px;
+			left: 0;
 		}
 		item {
 			background: #fff;
 			font-size: 1.2em;
 			padding: 1em;
-			border: 3px #ccc;
+			border: 3dp #ccc;
 			cursor: pointer;
 		}
 		item:hover {
@@ -32,7 +32,7 @@
 			background: #e0e0e0;
 		}
 		
-		@media (min-width: 1000px)
+		@media (min-width: 1000dp)
 		{
 			menu {
 				display: table;
@@ -47,17 +47,17 @@
 				border-right-width: 0;
 			}
 			item:last-child {
-				border-right-width: 3px;
+				border-right-width: 3dp;
 			}
 		}
 
-		@media (max-width: 999px)
+		@media (max-width: 999dp)
 		{
 			menu {
 				display: block;
 				width: 100%;
-				min-width: 100px;
-				height: 37px;
+				min-width: 100dp;
+				height: 37dp;
 				cursor: pointer;
 				decorator: image(selectarrow contain left);
 			}
@@ -69,7 +69,7 @@
 			}
 			items {
 				display: none;
-				padding-top: 37px;
+				padding-top: 37dp;
 				z-index: 10;
 			}
 			menu:focus items {
@@ -80,7 +80,7 @@
 				border-bottom-width: 0;
 			}
 			item:last-child {
-				border-bottom-width: 3px;
+				border-bottom-width: 3dp;
 			}
 		}
 	</style>

Tests/Data/VisualTests/media_query_02.rml

@@ -7,15 +7,15 @@
 		body {
 			background: #ddd;
 			color: #444;
-			right: 440px;
+			right: 440dp;
 			width: -1px;
-			left: 0px;
+			left: 0;
 		}
 		icon {
 			display: block;
 			decorator: image(icon scale-none);
-			width: 64px;
-			height: 64px;
+			width: 64dp;
+			height: 64dp;
 		}
 
 		@spritesheet
@@ -44,7 +44,7 @@
 			@spritesheet
 			{
 				src: /assets/high_scores_alien_1.tga;
-				icon: 0px 0px 64px 64px;
+				icon: 0 0 64px 64px;
 				resolution: 2x;
 			}
 		}

Tests/Data/VisualTests/overflow_hidden.rml

@@ -14,27 +14,27 @@
 			color: #444;
 		}
 		div.overflow {
-			border: 1px black;
+			border: 1dp black;
 			overflow: hidden;
-			width: 200px;
-			height: 200px;
+			width: 200dp;
+			height: 200dp;
 		}
 		div.relative {
 			position: relative;
 		}
 		div.wide {
-			width: 300px;
-			height: 20px;
+			width: 300dp;
+			height: 20dp;
 			color: #f00;
 			text-align: right;
 			background-color: #aaa;
 		}
 		div.absolute {
 			position: absolute;
-			top: 100px;
-			left: 250px;
-			width: 80px;
-			height: 80px;
+			top: 100dp;
+			left: 250dp;
+			width: 80dp;
+			height: 80dp;
 		}
 		.green { background-color: #7f7; }
 		.red { background-color: #f77; }

Tests/Data/VisualTests/overflow_nested.rml

@@ -11,21 +11,21 @@
 		}
 		div.outer {
 			overflow: auto;
-			width: 200px;
-			height: 200px;
+			width: 200dp;
+			height: 200dp;
 		}
 		div.overflow {
-			border: 1px black;
+			border: 1dp black;
 			overflow: auto;
-			width: 150px;
-			height: 150px;
+			width: 150dp;
+			height: 150dp;
 		}
 		div.wide {
-			width: 300px;
-			height: 20px;
+			width: 300dp;
+			height: 20dp;
 			text-align: center;
-			border: 1px #0a0;
-			margin: 5px;
+			border: 1dp #0a0;
+			margin: 5dp;
 			background-color: #eee;
 		}
 	</style>

Tests/Data/VisualTests/position_01_normal_flow.rml

@@ -7,7 +7,7 @@
 	<meta name="description" content="Position demo" />
 	<style>
 		body {
-			font-size: 20px;
+			font-size: 20dp;
 			display: block;
 			background: #ddd;
 			color: #444;

Tests/Data/VisualTests/position_02_relative_positioning.rml

@@ -7,14 +7,14 @@
 	<meta name="description" content='The result is identical to normal flow, except that the "outer" text is shifted 12px upward, without affecting the flow of the "body" or "inner" text.' />
 	<style>
 		body {
-			font-size: 20px;
+			font-size: 20dp;
 			display: block;
 			background: #ddd;
 			color: #444;
 			line-height: 200%;
 		}
-		#outer { position: relative; top: -12px; color: red }
-		#inner { position: relative; top: 12px; color: blue }
+		#outer { position: relative; top: -12dp; color: red }
+		#inner { position: relative; top: 12dp; color: blue }
 	</style>
 </head>
 <body>

Tests/Data/VisualTests/position_03_floating_a_box.rml

@@ -7,14 +7,14 @@
 	<meta name="description" content='The "inner" text lays out in an independent box on the right, causing the remaining "body" and "outer" text to flow around it.' />
 	<style>
 		body {
-			font-size: 20px;
+			font-size: 20dp;
 			display: block;
 			background: #ddd;
 			color: #444;
 			line-height: 200%;
 		}
 		#outer { color: red }
-		#inner { float: right; width: 130px; color: blue }
+		#inner { float: right; width: 130dp; color: blue }
 	</style>
 </head>
 <body>

Tests/Data/VisualTests/position_04_floating_a_box_sibling.rml

@@ -7,13 +7,13 @@
 	<meta name="description" content='Identical to the previous example, save that there is now "sibling" text flowing with the "body" and "outer" text.' />
 	<style>
 		body {
-			font-size: 20px;
+			font-size: 20dp;
 			display: block;
 			background: #ddd;
 			color: #444;
 			line-height: 200%;
 		}
-		#inner { float: right; width: 130px; color: blue }
+		#inner { float: right; width: 130dp; color: blue }
 		#sibling { color: red }
 	</style>
 </head>

Tests/Data/VisualTests/position_05_floating_a_box_clear.rml

@@ -7,13 +7,13 @@
 	<meta name="description" content='Now the "sibling" text moves down to below the "inner" text’s box, leaving blank space behind. The text following the "sibling" text flows after it as normal.' />
 	<style>
 		body {
-			font-size: 20px;
+			font-size: 20dp;
 			display: block;
 			background: #ddd;
 			color: #444;
 			line-height: 200%;
 		}
-		#inner { float: right; width: 130px; color: blue }
+		#inner { float: right; width: 130dp; color: blue }
 		#sibling { clear: right; color: red }
 	</style>
 </head>

Tests/Data/VisualTests/position_06_absolute_positioning.rml

@@ -7,7 +7,7 @@
 	<meta name="description" content='All of the text within #outer (the "outer" and "inner" text) moves down to an independent box in the lower right corner. The two halves of "body" text flow together.' />
 	<style>
 		body {
-			font-size: 20px;
+			font-size: 20dp;
 			display: block;
 			background: #ddd;
 			color: #444;
@@ -15,8 +15,8 @@
 		}
 		#outer {
 			position: absolute;
-			top: 200px; left: 200px;
-			width: 200px;
+			top: 200dp; left: 200dp;
+			width: 200dp;
 			color: red;
 		}
 		#inner { color: blue }

Tests/Data/VisualTests/position_07_absolute_positioning_relative.rml

@@ -7,7 +7,7 @@
 	<meta name="description" content='The "inner" text is positioned in an independent box, relative to the top-left corner of the start of the "outer" text.' />
 	<style>
 		body {
-			font-size: 20px;
+			font-size: 20dp;
 			display: block;
 			background: #ddd;
 			color: #444;
@@ -19,8 +19,8 @@
 		}
 		#inner {
 			position: absolute;
-			top: 200px; left: -100px;
-			height: 130px; width: 130px;
+			top: 200dp; left: -100dp;
+			height: 130dp; width: 130dp;
 			color: blue;
 		}
 	</style>

Tests/Data/VisualTests/position_08_absolute_positioning_no_relative.rml

@@ -7,7 +7,7 @@
 	<meta name="description" content='Same as before, except now the "inner text" is positioned relative to the top-left corner of the page itself.' />
 	<style>
 		body {
-			font-size: 20px;
+			font-size: 20dp;
 			display: block;
 			background: #ddd;
 			color: #444;
@@ -16,8 +16,8 @@
 		#outer { color: red }
 		#inner {
 			position: absolute;
-			top: 200px; left: -100px;
-			height: 130px; width: 130px;
+			top: 200dp; left: -100dp;
+			height: 130dp; width: 130dp;
 			color: blue;
 		}
 	</style>

Tests/Data/VisualTests/position_09_absolute_positioning_change_bars.rml

@@ -7,7 +7,7 @@
 	<meta name="description" content='The two red hyphens, indicating a change, sit in the left margin of the page on the line containing the word "THIS", regardless of what line that ends up being.' />
 	<style>
 		body {
-			font-size: 20px;
+			font-size: 20dp;
 			display: block;
 			background: #ddd;
 			color: #444;
@@ -16,7 +16,7 @@
 	</style>
 </head>
 <body>
-	<p style="position: relative; margin-right: 10px; left: 10px;">
+	<p style="position: relative; margin-right: 10dp; left: 10dp;">
 	  I used two red hyphens to serve as a change bar. They
 	  will "float" to the left of the line containing THIS
 	  <span style="position: absolute; top: auto; left: -1em; color: red;">--</span>

Tests/Data/VisualTests/reference/overflow_hidden-ref.rml

@@ -9,27 +9,27 @@
 			color: #444;
 		}
 		div.overflow {
-			border: 1px black;
+			border: 1dp black;
 			overflow: hidden;
-			width: 200px;
-			height: 200px;
+			width: 200dp;
+			height: 200dp;
 		}
 		div.relative {
 			position: relative;
 		}
 		div.wide {
-			width: 300px;
-			height: 20px;
+			width: 300dp;
+			height: 20dp;
 			color: #f00;
 			text-align: right;
 			background-color: #aaa;
 		}
 		div.absolute {
 			position: absolute;
-			top: 100px;
-			left: 250px;
-			width: 80px;
-			height: 80px;
+			top: 100dp;
+			left: 250dp;
+			width: 80dp;
+			height: 80dp;
 		}
 		.green { background-color: #7f7; }
 		.red { background-color: #f77; }

Tests/Data/VisualTests/reference/table_01-ref.rml

@@ -6,12 +6,12 @@
 	<style>
 		table {
 			display: block;
-			border-width: 20px 5px 0;
+			border-width: 20dp 5dp 0;
 			color: #333;
 			text-align: center;
 			margin: 0 auto;
-			min-width: 100px;
-			max-width: 400px;
+			min-width: 100dp;
+			max-width: 400dp;
 		}
 		body * {
 			border-color: #666;
@@ -19,9 +19,9 @@
 		td {
 			display: inline-block;
 			box-sizing: border-box;
-			padding: 15px 5px;
+			padding: 15dp 5dp;
 			width: 25%;
-			height: 47px;
+			height: 47dp;
 			background: #3d3;
 		}
 		td.span2 { width: 50%; }
@@ -31,7 +31,7 @@
 		}
 		td:first-child {
 			background: #6df;
-			border-right-width: 3px;
+			border-right-width: 3dp;
 		}
 		td:last-of-type {
 			background: #dd3;
@@ -40,13 +40,13 @@
 			display: block;
 			color: black;
 			background: #fff5;
-			border-bottom: 3px #666;
+			border-bottom: 3dp #666;
 		}
 		tbody {
 			display: block;
 		}
 		tbody tr {
-			border-bottom: 1px #666a;
+			border-bottom: 1dp #666a;
 		}
 		tbody tr:last-child {
 			border-bottom: 0;
@@ -60,10 +60,10 @@
 			color: #ccc;
 		}
 		tfoot td {
-			padding-top: 0px;
-			padding-bottom: 0px;
+			padding-top: 0;
+			padding-bottom: 0;
 			text-align: right;
-			height: 20px;
+			height: 20dp;
 		}
 	</style>
 </head>

Tests/Data/VisualTests/replaced_elements.rml

@@ -13,15 +13,15 @@
 		}
 		img {
 			vertical-align: bottom;
-			margin: 10px 5px;
+			margin: 10dp 5dp;
 		}
 		.border-box {
 			box-sizing: border-box;
 		}
 		input.text {
 			font-size: 1.1em;
-			border: 5px #999;
-			padding: 15px;
+			border: 5dp #999;
+			padding: 15dp;
 			box-sizing: border-box;
 		}
 	</style>
@@ -31,25 +31,25 @@
 <p>The following images should be the same size (width and height) in each section.</p>
 <div>
 	<!-- Test replaced element scaling with intrinsic ratio. -->
-	<img style="padding: 10px;" sprite="invader"/>
-	<img style="padding: 10px;" class="border-box" sprite="invader"/>
-	<img style="padding: 10px; height: 40px;" sprite="invader"/>
-	<img style="padding: 10px; width: 50px;" sprite="invader"/>
-	<img style="padding: 10px; height: 60px;" class="border-box" sprite="invader"/>
-	<img style="padding: 10px; width: 70px;" class="border-box" sprite="invader"/>
+	<img style="padding: 10dp;" sprite="invader"/>
+	<img style="padding: 10dp;" class="border-box" sprite="invader"/>
+	<img style="padding: 10dp; height: 40dp;" sprite="invader"/>
+	<img style="padding: 10dp; width: 50dp;" sprite="invader"/>
+	<img style="padding: 10dp; height: 60dp;" class="border-box" sprite="invader"/>
+	<img style="padding: 10dp; width: 70dp;" class="border-box" sprite="invader"/>
 <hr/>
 	<!-- Test width and height auto sizing with constraints. -->
-	<img style="padding: 10px; max-height: 20px;" sprite="invader"/>
-	<img style="padding: 10px; max-width: 25px;" sprite="invader"/>
-	<img style="padding: 10px; max-width: 25px; max-height: 40px;" sprite="invader"/>
-	<img style="padding: 10px; max-height: 20px; max-width: 50px;" sprite="invader"/>
-	<img style="padding: 10px; max-width: 40px; max-height: 20px;" sprite="invader"/>
-	<img style="padding: 10px; max-width: 25px; max-height: 35px;" sprite="invader"/>
+	<img style="padding: 10dp; max-height: 20dp;" sprite="invader"/>
+	<img style="padding: 10dp; max-width: 25dp;" sprite="invader"/>
+	<img style="padding: 10dp; max-width: 25dp; max-height: 40dp;" sprite="invader"/>
+	<img style="padding: 10dp; max-height: 20dp; max-width: 50dp;" sprite="invader"/>
+	<img style="padding: 10dp; max-width: 40dp; max-height: 20dp;" sprite="invader"/>
+	<img style="padding: 10dp; max-width: 25dp; max-height: 35dp;" sprite="invader"/>
 <hr/>
-	<img style="padding: 10px; min-height: 24px;" sprite="bar"/>
-	<img style="padding: 10px; min-width: 84px;" sprite="bar"/>
-	<img style="padding: 10px; min-width: 84px; min-height: 20px;" sprite="bar"/>
-	<img style="padding: 10px; min-height: 24px; min-width: 20px;" sprite="bar"/>
+	<img style="padding: 10dp; min-height: 24dp;" sprite="bar"/>
+	<img style="padding: 10dp; min-width: 84dp;" sprite="bar"/>
+	<img style="padding: 10dp; min-width: 84dp; min-height: 20dp;" sprite="bar"/>
+	<img style="padding: 10dp; min-height: 24dp; min-width: 20dp;" sprite="bar"/>
 </div>
 <hr/>
 <p>There should be three evenly spaced, same-sized images on a single line.</p>
@@ -61,14 +61,14 @@
 <hr/>
 <p>The outer border of the images should take up the same height.</p>
 <div>
-	<img style="border: 10px black; height: 30px;" sprite="invader"/>
-	<img style="border: 2px black; height: 50px;" class="border-box" sprite="invader"/>
-	<img style="border: 2px black; padding: 5px; height: 50px;" class="border-box" sprite="invader"/>
+	<img style="border: 10dp black; height: 30dp;" sprite="invader"/>
+	<img style="border: 2dp black; height: 50dp;" class="border-box" sprite="invader"/>
+	<img style="border: 2dp black; padding: 5dp; height: 50dp;" class="border-box" sprite="invader"/>
 </div>
 <hr/>
 <p>The two images should be same-sized, and perfectly aligned below each other.</p>
 <div style="text-align: center;">
-	<img style="display: block; margin: 10px auto;" sprite="invader"/>
+	<img style="display: block; margin: 10dp auto;" sprite="invader"/>
 	<img style="display: inline;" sprite="invader"/>
 </div>
 <hr/>

Tests/Data/VisualTests/shrink_to_fit_01.rml

@@ -12,10 +12,10 @@
 		body > div {
 			clear: both;
 			position: relative;
-			height: 50px;
+			height: 50dp;
 		}
 		body > div > * {
-			border: 2px #888;
+			border: 2dp #888;
 			color: black;
 			background: #ccf;
 		}

Tests/Data/VisualTests/shrink_to_fit_02.rml

@@ -10,12 +10,12 @@
 			color: #444;
 		}
 		hr {
-			margin-top: 15px;
-			margin-bottom: 15px;
+			margin-top: 15dp;
+			margin-bottom: 15dp;
 			background-color: #ccc;
 		}
 		div {
-			border: 2px #444;
+			border: 2dp #444;
 			background: #ccf;
 		}
 		body > div {
@@ -24,19 +24,19 @@
 			/*overflow: auto;*/
 		}
 		body > div > div {
-			width: 150px;
-			height: 30px;
+			width: 150dp;
+			height: 30dp;
 			background: #cfc;
 		}
 		.absolute {
 			position: absolute;
-			top: 20px;
-			left: 50px;
+			top: 20dp;
+			left: 50dp;
 		}
 		.relative {
 			position: relative;
-			top: 20px;
-			left: 50px;
+			top: 20dp;
+			left: 50dp;
 		}
 		.float-left {
 			float: left;
@@ -59,7 +59,7 @@
   <div class="absolute">Absolute</div>
   Text after
 </div>
-<hr style="margin-top: 55px;"/>
+<hr style="margin-top: 55dp;"/>
 <div>
   Some text
   <div class="relative">Relative</div>

Tests/Data/VisualTests/table_01.rml

@@ -7,25 +7,25 @@
 	<meta name="Description" content="Basic table layout." />
 	<style>
 		table {
-			border-width: 20px 5px 0;
+			border-width: 20dp 5dp 0;
 			color: #333;
 			text-align: center;
 			margin: 0 auto;
-			min-width: 100px;
-			max-width: 400px;
+			min-width: 100dp;
+			max-width: 400dp;
 		}
 		table, table * {
 			border-color: #666;
 		}
 		td {
-			padding: 15px 5px;
+			padding: 15dp 5dp;
 		}
 		col {
 			background: #3d3;
 		}
 		col:first-child {
 			background: #6df;
-			border-right-width: 3px;
+			border-right-width: 3dp;
 		}
 		col:nth-child(3) {
 			background: #dd3;
@@ -33,10 +33,10 @@
 		thead {
 			color: black;
 			background: #fff5;
-			border-bottom: 3px #666;
+			border-bottom: 3dp #666;
 		}
 		tbody tr {
-			border-bottom: 1px #666a;
+			border-bottom: 1dp #666a;
 		}
 		tbody tr:last-child {
 			border-bottom: 0;
@@ -49,10 +49,10 @@
 			color: #ccc;
 		}
 		tfoot td {
-			padding-top: 0px;
-			padding-bottom: 0px;
+			padding-top: 0;
+			padding-bottom: 0;
 			text-align: right;
-			height: 20px;
+			height: 20dp;
 		}
 	</style>
 </head>

Tests/Data/VisualTests/table_02.rml

@@ -7,49 +7,49 @@
 	<style>
 		table {
 			margin: 2em 0;
-			border: 2px #666;
-			gap: 5px;
+			border: 2dp #666;
+			gap: 5dp;
 			text-align: center;
 		}
 		td {
 			background: #bbb;
 			vertical-align: middle;
-			padding: 5px;
+			padding: 5dp;
 		}
 		.color {
 			background: #333;
-			padding: 5px;
-			width: 0px;
+			padding: 5dp;
+			width: 0;
 		}
 		.color colgroup {
-			padding: 0 5px;
-			margin: 0 5px;
+			padding: 0 5dp;
+			margin: 0 5dp;
 			background: #a33;
-			border: 5px #f33;
+			border: 5dp #f33;
 		}
 		.color col {
-			width: 80px;
-			padding: 0 5px;
-			margin: 0 5px;
+			width: 80dp;
+			padding: 0 5dp;
+			margin: 0 5dp;
 			background: #33b;
-			border: 5px #66f;
+			border: 5dp #66f;
 		}
 		.color tr { 
 			height: auto;
 		}
 		.color td {
-			margin: 0 5px;
-			padding: 0 5px;
+			margin: 0 5dp;
+			padding: 0 5dp;
 			background: #bbb;
-			border: 5px #ddd;
-			height: 30px;
+			border: 5dp #ddd;
+			height: 30dp;
 		}
 		.color-ref {
-			border: 2px #666;
+			border: 2dp #666;
 			background: #333;
-			margin: 20px 0;
-			height: 40px;
-			width: 305px; /* 2*col width + 8*td margin + 4*col margin + 4*colgroup padding + 4*colgroup border +
+			margin: 20dp 0;
+			height: 40dp;
+			width: 305dp; /* 2*col width + 8*td margin + 4*col margin + 4*colgroup padding + 4*colgroup border +
 			                 4*colgroup margin + 3*column-gap + 2*table padding */
 		}
 	</style>
@@ -59,17 +59,17 @@
 <p>The following tables should be the same size.</p>
 <table>
 	<tr>
-		<td style="width: 50px">A</td>
+		<td style="width: 50dp">A</td>
 		<td>B</td>
 		<td>C</td>
 		<td>D</td>
-		<td style="width: 50px">E</td>
+		<td style="width: 50dp">E</td>
 	</tr>
 </table>
 <table>
-	<col style="width: 50px"/>
+	<col style="width: 50dp"/>
 	<colgroup span="3"/>
-	<col style="width: 50px"/>
+	<col style="width: 50dp"/>
 	<tr>
 		<td>A</td>
 		<td>B</td>
@@ -80,11 +80,11 @@
 </table>
 <table>
 	<colgroup>
-		<col style="width: 50px"/>
+		<col style="width: 50dp"/>
 	</colgroup>
 	<col span="3"/>
 	<colgroup>
-		<col style="width: 50px"/>
+		<col style="width: 50dp"/>
 	</colgroup>
 	<tr>
 		<td>A</td>
@@ -96,11 +96,11 @@
 </table>
 <table>
 	<colgroup>
-		<col style="min-width: 50px; max-width: 50px"/>
+		<col style="min-width: 50dp; max-width: 50dp"/>
 		<col/>
 		<col/>
 		<col/>
-		<col style="width: 50px"/>
+		<col style="width: 50dp"/>
 	</colgroup>
 	<tr>
 		<td>A</td>

Tests/Data/VisualTests/table_03.rml

@@ -8,19 +8,19 @@
 		table {
 			box-sizing: border-box;
 			display: table;
-			border: 5px #666;
-			gap: 10px 2%;
+			border: 5dp #666;
+			gap: 10dp 2%;
 			height: 50%;
-			padding-left: 5px;
-			padding-right: 20px;
+			padding-left: 5dp;
+			padding-right: 20dp;
 		}
 		col {
 			box-sizing: border-box;
 			display: table-column;
 			background: #aac;
-			border-left: 2px #e3e;
-			border-right: 5px #3ce;
-			margin: 15px 0;
+			border-left: 2dp #e3e;
+			border-right: 5dp #3ce;
+			margin: 15dp 0;
 		}
 		col:first-child {
 			border-left-width: 0;
@@ -31,24 +31,24 @@
 		tr {
 			box-sizing: border-box;
 			display: table-row;
-			border-top: 5px #ec3;
+			border-top: 5dp #ec3;
 			background: #acc;
-			padding-top: 5px;
-			padding-bottom: 15px;
-			margin: 10px 20px;
+			padding-top: 5dp;
+			padding-bottom: 15dp;
+			margin: 10dp 20dp;
 		}
 		td {
 			box-sizing: border-box;
 			display: table-cell;
-			border-right: 5px red;
+			border-right: 5dp red;
 			background: #bbb;
 		}
 		.bottom-right {
 			position: absolute;
 			bottom: 0;
 			right: 0;
-			width: 15px;
-			height: 15px;
+			width: 15dp;
+			height: 15dp;
 		}
 	</style>
 </head>
@@ -56,9 +56,9 @@
 <body>
 <p>Try resizing the table using the document handle in the lower-right corner.</p>
 <table>
-	<col span="2" style="min-width: 150px; max-width: 250px;"/>
+	<col span="2" style="min-width: 150dp; max-width: 250dp;"/>
 	<col/>
-	<col style="min-width: 50px; max-width: 300px;"/>
+	<col style="min-width: 50dp; max-width: 300dp;"/>
 	<tr>
 		<td rowspan="2" colspan="2">Hello</td>
 		<td>Whoop!</td>
@@ -69,8 +69,8 @@
 	</tr>
 	<tr>
 		<td style="height: 50%;">Cat<div class="bottom-right">X</div></td>
-		<td style="padding-left: 30px; padding-top: 50px;" colspan="2">Mouse<div class="bottom-right">X</div></td>
-		<td style="border-left: 5px green; border-right-width: 2px; vertical-align: bottom" rowspan="2">RatTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</td>
+		<td style="padding-left: 30dp; padding-top: 50dp;" colspan="2">Mouse<div class="bottom-right">X</div></td>
+		<td style="border-left: 5dp green; border-right-width: 2dp; vertical-align: bottom" rowspan="2">RatTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</td>
 	</tr>
 	<tr>
 		<td style="vertical-align: bottom;">Row<br/>Row</td>

Tests/Data/VisualTests/word_break.rml

@@ -17,11 +17,11 @@
 			color: #45e;
 		}
 		.box {
-			width: 60px;
-			border: 2px #aaa;
+			width: 60dp;
+			border: 2dp #aaa;
 		}
 		.zero {
-			width: 0px;
+			width: 0;
 		}
 		.break-all {
 			word-break: break-all;

Tests/Data/description.rml

@@ -4,15 +4,15 @@
 <link type="text/rcss" href="style.rcss"/>
 <style>
 	body {
-		font-size: 17px;
+		font-size: 17dp;
 		color: #444;
 		position: absolute;
 		top: 0; bottom: 0;
 		right: 0;
-		width: 400px;
+		width: 400dp;
 		background: #333;
 		color: #ccc;
-		padding: 20px 20px;
+		padding: 20dp 20dp;
 		z-index: 100;
 		tab-index: auto;
 	}
@@ -32,18 +32,18 @@
 	}
 	#filter {
 		position: absolute;
-		right: 20px;
-		top: 20px;
+		right: 20dp;
+		top: 20dp;
 		width: 50%;
 		text-align: right;
 	}
 	input.text {
 		font-size: 0.85em;
-		padding: 3px 4px;
+		padding: 3dp 4dp;
 		width: 80%;
 		background-color: #444;
 		color: #ffe;
-		border: 1px #555;
+		border: 1dp #555;
 		cursor: text;
 		tab-index: auto;
 	}
@@ -57,7 +57,7 @@
 		overflow: hidden auto;	
 	}
 	#goto {
-		margin: 0 20px 10px 20px;
+		margin: 0 20dp 10dp 20dp;
 		color: #ddb;
 	}
 	#bottom {
@@ -69,7 +69,7 @@
 		word-break: break-all;
 	}
 	#hovertext {
-		margin: 0px 20px 10px 20px;
+		margin: 0dp 20dp 10dp 20dp;
 		font-size: 0.9em;
 		color: #aaa;
 		min-height: 1.5em;

Tests/Data/style.rcss

@@ -7,20 +7,20 @@ pre { white-space: pre; }
 hr {
 	display: block;
 	clear: both;
-	padding: 1px;
+	padding: 1dp;
 	background-color: #999;
-	margin: 5px 0;
+	margin: 5dp 0;
 }
 
 body {
 	font-family: LatoLatin;
 	font-weight: normal;
 	font-style: normal;
-	font-size: 14px;
-	padding: 8px;
-	width: 484px;
-	top: 0px;
-	bottom: 0px;
+	font-size: 14dp;
+	padding: 8dp;
+	width: 484dp;
+	top: 0;
+	bottom: 0;
 	color: black;
 	background: #ccc;
 	overflow: auto;
@@ -59,12 +59,12 @@ scrollbarhorizontal slidertrack
 }
 scrollbarvertical slidertrack
 {
-	border-left-width: 1px;
+	border-left-width: 1dp;
 }
 scrollbarhorizontal slidertrack
 {
 	height: 15dp;
-	border-top-width: 1px;
+	border-top-width: 1dp;
 }
 scrollbarvertical sliderbar,
 scrollbarhorizontal sliderbar
@@ -74,13 +74,13 @@ scrollbarhorizontal sliderbar
 }
 scrollbarvertical sliderbar
 {
-	border-width: 1px 0px;
+	border-width: 1dp 0;
 	margin-left: 1dp;
 }
 scrollbarhorizontal sliderbar
 {
 	height: 15dp;
-	border-width: 0px 1px;
+	border-width: 0 1dp;
 	margin-top: 1dp;
 }
 scrollbarcorner
@@ -113,23 +113,23 @@ thead, tbody, tfoot {
 handle {
 	position: fixed;
 	background: #555a;
-	width: 16px;
-	height: 16px;
-	bottom: 0px;
-	right: 0px;
+	width: 16dp;
+	height: 16dp;
+	bottom: 0;
+	right: 0;
 	clip: 1;
 	cursor: resize;
 }
 
 input.radio, input.checkbox {
-	width: 10px;
-	height: 10px;
-	border: 1px #666;
+	width: 10dp;
+	height: 10dp;
+	border: 1dp #666;
 	background: #fff;
 	tab-index: auto;
 }
 input.radio {
-	border-radius: 5px;
+	border-radius: 5dp;
 }
 input.radio:hover, input.checkbox:hover {
 	background: #ff3;
@@ -143,8 +143,8 @@ input.radio:checked, input.checkbox:checked {
 input.text {
 	background-color: #fff;
 	color: #555;
-	border: 2px #999;
-	padding: 5px;
+	border: 2dp #999;
+	padding: 5dp;
 	tab-index: auto;
 	cursor: text;
 	box-sizing: border-box;

Tests/Data/view_source.rml

@@ -7,12 +7,12 @@
 		font-family: rmlui-debugger-font;
 		font-weight: normal;
 		font-style: normal;
-		font-size: 16px;
+		font-size: 16dp;
 		width: auto;
 		color: #444;
 		position: absolute;
-		top: 0px; right: 0px;
-		bottom: 0px; left: 0px;
+		top: 0; right: 0;
+		bottom: 0; left: 0;
 		background-color: #222222f9;
 		color: #ddd;
 		z-index: 200;
@@ -21,7 +21,7 @@
 		display: block;
 		white-space: pre-wrap;
 		font-size: 0.9em;
-		padding: 20px 30px;
+		padding: 20dp 30dp;
 	}
 </style>
 </head>

Tests/Data/visual_tests_help.rml

@@ -7,8 +7,8 @@
 		width: auto;
 		color: #444;
 		position: absolute;
-		top: 0px; right: 0px;
-		bottom: 0px; left: 0px;
+		top: 0; right: 0;
+		bottom: 0; left: 0;
 		background-color: #222222f9;
 		color: #ddd;
 		z-index: 300;
@@ -16,10 +16,10 @@
 	#content {
 		display: block;
 		white-space: pre-wrap;
-		font-size: 17px;
-		width: 700px;
+		font-size: 17dp;
+		width: 700dp;
 		margin: 0 auto;
-		padding-top: 30px;
+		padding-top: 30dp;
 	}
 	p {
 		clear: both;

Tests/Source/VisualTests/TestViewer.cpp

@@ -242,7 +242,7 @@ bool TestViewer::LoadTest(const Rml::String& directory, const Rml::String& filen
 				document_reference = context->LoadDocumentFromMemory(source_reference, Rml::StringUtilities::Replace(reference_path, ':', '|'));
 				if (document_reference)
 				{
-					document_reference->SetProperty(PropertyId::Left, Property(510.f, Property::PX));
+					document_reference->SetProperty(PropertyId::Left, Property(510.f, Property::DP));
 					document_reference->Show(ModalFlag::None, FocusFlag::None);
 				}
 			}