Home Explore Help
Sign In
cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Update visual tests for fractional dimensions

Michael Ragazzon 1 year ago
parent
bc19971ef5
commit
78b18bc886
4 changed files with 70 additions and 51 deletions
Unified View Show Diff Stats
  1. 1 0
      Tests/Data/VisualTests/clip_mask.rml
  2. 51 40
      Tests/Data/VisualTests/fractional-dimensions-01.rml
  3. 15 8
      Tests/Data/VisualTests/fractional-dimensions-02.rml
  4. 3 3
      Tests/Data/VisualTests/reference/fractional-dimensions-02-ref.rml

+ 1 - 0
Tests/Data/VisualTests/clip_mask.rml
View File 

@@ -16,6 +16,7 @@
 
 			height: auto;
 
 			height: auto;
 
 			display: block;
 
 			display: block;
 
 			position: relative;
 
 			position: relative;
 
+			cursor: move;
 
 		}
 
 		}
 
 		.box {
 
 		.box {
 
 			margin: 20dp auto;
 
 			margin: 20dp auto;

+ 51 - 40
Tests/Data/VisualTests/fractional-dimensions-01.rml
View File 

@@ -5,50 +5,61 @@
 
 	<link rel="#438" href="https://github.com/mikke89/RmlUi/issues/438"/>
 
 	<link rel="#438" href="https://github.com/mikke89/RmlUi/issues/438"/>
 
 	<meta name="Description" content="Layout of elements with fractional height. Try zooming in and out (Ctrl +/-). The inner heights are allowed to vary by one pixel to accommodate the accumulation of the fractional pixels."/>
 
 	<meta name="Description" content="Layout of elements with fractional height. Try zooming in and out (Ctrl +/-). The inner heights are allowed to vary by one pixel to accommodate the accumulation of the fractional pixels."/>
 
 	<style>
 
 	<style>
 
+		handle {
 
+			background-color: red;
 
+			display: block;
 
+			position: relative;
 
+			width: auto;
 
+			height: auto;
 
+			cursor: move;
 
+		}
 
 		div {
 
 		div {
 
-			border: 1dp black;
 
-			height: 1.2em;
 
-			padding-left: 1em;
 
+			border: 1.23dp #333;
 
+			background-color: #666;
 
+			height: 15.33333dp;
 
+		}
 
+		div:nth-child(odd) {
 
+			background-color: #999;
 
 		}
 
 		}
 
 	</style>
 
 	</style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
-	<p>Borders should have the same width everywhere and be placed edge to edge.</p>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
-	<div></div>
 
+	<p>Borders should be placed edge-to-edge, and there should be no red.</p>
 
+	<handle move_target="#self" edge_margin="-80%">
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+		<div></div>
 
+	</handle>
 
 </body>
 
 </body>
 
 </rml>
 
 </rml>

+ 15 - 8
Tests/Data/VisualTests/fractional-dimensions-02.rml
View File 

@@ -12,17 +12,24 @@
 
 	<meta name="Instructions" content="Try different font sizes, zooms, and resolutions, as well as slightly different sizes for the floats."/>
 
 	<meta name="Instructions" content="Try different font sizes, zooms, and resolutions, as well as slightly different sizes for the floats."/>
 
 	<meta name="Assert" content="It's hard to fill the box perfectly for all combinations of scaling and box dimensions. Even Firefox and Chromium struggles with this for some combinations. However, we should at least try to avoid gaps between the individual span elements."/>
 
 	<meta name="Assert" content="It's hard to fill the box perfectly for all combinations of scaling and box dimensions. Even Firefox and Chromium struggles with this for some combinations. However, we should at least try to avoid gaps between the individual span elements."/>
 
 	<style>
 
 	<style>
 
-		div {
 
-			width: 8.7em;
 
-			height: 8.7em;
 
+		handle {
 
+			width: 87dp;
 
+			height: 87dp;
 
 			background-color: red;
 
 			background-color: red;
 
-			border: 3px lime;
 
+			border: 3dp lime;
 
+			position: relative;
 
+			top: auto;
 
+			left: auto;
 
+			right: auto;
 
+			bottom: auto;
 
+			display: block;
 
+			cursor: move;
 
 		}
 
 		}
 
 
 
 		span {
 
 		span {
 
 			float: left;
 
 			float: left;
 
-			width: 0.87em;
 
-			height: 0.87em;
 
+			width: 8.7dp;
 
+			height: 8.7dp;
 
 			background-color: green;
 
 			background-color: green;
 
 		}
 
 		}
 
 
 
@@ -33,7 +40,7 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 <p>You should see no red below, just a green square with a green border.</p>
 
 <p>You should see no red below, just a green square with a green border.</p>
 
-<div>
 
+<handle move_target="#self">
 
 	<!-- 100 spans -->
 
 	<!-- 100 spans -->
 
 	<span></span> <span></span> <span></span> <span></span> <span></span>
 
 	<span></span> <span></span> <span></span> <span></span> <span></span>
 
 	<span></span> <span></span> <span></span> <span></span> <span></span>
 
 	<span></span> <span></span> <span></span> <span></span> <span></span>
 
@@ -55,6 +62,6 @@
 
 	<span></span> <span></span> <span></span> <span></span> <span></span>
 
 	<span></span> <span></span> <span></span> <span></span> <span></span>
 
 	<span></span> <span></span> <span></span> <span></span> <span></span>
 
 	<span></span> <span></span> <span></span> <span></span> <span></span>
 
 	<span></span> <span></span> <span></span> <span></span> <span></span>
 
 	<span></span> <span></span> <span></span> <span></span> <span></span>
 
-</div>
 
+</handle>
 
 </body>
 
 </body>
 
 </rml>
 
 </rml>

+ 3 - 3
Tests/Data/VisualTests/reference/fractional-dimensions-02-ref.rml
View File 

@@ -4,10 +4,10 @@
 
 	<link rel="author" title="Ms2ger" href="mailto:[email protected]"/>
 
 	<link rel="author" title="Ms2ger" href="mailto:[email protected]"/>
 
 	<style>
 
 	<style>
 
 		div {
 
 		div {
 
-			width: 8.7em;
 
-			height: 8.7em;
 
+			width: 87dp;
 
+			height: 87dp;
 
 			background-color: green;
 
 			background-color: green;
 
-			border: 3px lime;
 
+			border: 3dp lime;
 
 		}
 
 		}
 
 	</style>
 
 	</style>
 
 </head>
 
 </head>