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

Add visual tests for replaced elements and stacking context paint order

Michael Ragazzon 2 years ago
parent
ad0f659677
commit
fe63c15395
5 changed files with 187 additions and 1 deletions
Unified View Show Diff Stats
  1. 1 0
      Tests/Data/VisualTests/overflow_clip_transform.rml
  2. 118 0
      Tests/Data/VisualTests/replaced_display.rml
  3. 65 0
      Tests/Data/VisualTests/stacking_context.rml
  4. 3 0
      Tests/Data/VisualTests/table_01.rml
  5. 0 1
      Tests/Data/style.rcss

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

@@ -62,6 +62,7 @@
 
 			height: 20px;
 
 			height: 20px;
 
 			width: auto;
 
 			width: auto;
 
 			cursor: move;
 
 			cursor: move;
 
+			clip: 1;
 
 		}
 
 		}
 
 	</style>
 
 	</style>
 
 </head>
 
 </head>

+ 118 - 0
Tests/Data/VisualTests/replaced_display.rml
View File 

@@ -0,0 +1,118 @@
 
+<rml>
 
+<head>
 
+    <title>Display of replaced elements</title>
 
+    <link type="text/rcss" href="../style.rcss"/>
 
+	<link rel="help" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#inline-replaced-width" />
 
+	<meta name="Description" content="Replaced elements should be correctly rendered when placed out-of-flow and in different formatting contexts." />
 
+	<style>
 
+		@spritesheet theme 
+		{
 
+			src: /assets/invader.tga;
 
+			invader: 179px 152px 50px 40px;
 
+			progress:      103px 267px 80px 34px;
 
+			progress-fill: 103px 302px 80px 34px;
 
+		}
 
+		img {
 
+			margin: 10dp 5dp;
 
+			vertical-align: bottom;
 
+		}
 
+		progress { 
+			decorator: image( progress );
 
+			width: 80dp;
 
+			height: 34dp;
 
+			line-height: 32dp;
 
+			fill-image: progress-fill;
 
+			text-align: center;
 
+		}
 
+		textarea {
 
+			background: #fff;
 
+			border: 5dp #999;
 
+			border-right: 17dp;
 
+			padding: 2dp;
 
+			height: 35dp;
 
+			width: 100dp;
 
+			cursor: text;
 
+			vertical-align: bottom;
 
+		}
 
+		textarea scrollbarvertical {
 
+			width: 12dp;
 
+			margin-right: -12dp;
 
+			cursor: arrow;
 
+		}
 
+		.float { float: left; }
 
+		.block { display: block; }
 
+		.flex {
 
+			display: flex;
 
+			justify-content: center;
 
+			
+			/* If we decide to support flex layout inside replaced elements, test
 
+			with the below line uncommented. Then we know flex layout occurred if
 
+			the text is still centered inside the element. */
 
+			
+			/*text-align: right;*/ 
+		}
 
+		.absolute { position: absolute; }
 
+	</style>
 
+</head>
 
+
 
+<body>
 
+<div>
 
+	<img style="float: right" sprite="invader"/>
 
+	<img style="position: absolute; margin-left: auto; margin-right: auto;" sprite="invader"/>
 
+	<table style="float: left; width: 60dp;"><td>
 
+		<img sprite="invader"/>
 
+	</td></table>
 
+</div>
 
+
 
+<hr/>
 
+
 
+<p>Replaced element with internal content.</p>
 
+
 
+<progress direction="right" value="0.6">60%</progress><br/>
 
+<progress direction="right" value="0.6" class="float">60%</progress>
 
+<progress direction="right" value="0.6" class="block">60%</progress>
 
+<progress direction="right" value="0.6" class="flex"><div>60%</div></progress>
 
+<table><td>
 
+	<progress direction="right" value="0.6">60%</progress>
 
+</td></table>
 
+<progress direction="right" value="0.6" class="absolute">60%</progress>
 
+
 
+<hr style="margin-top: 40dp;"/>
 
+
 
+<p>Overflowing textarea.</p>
 
+
 
+<textarea>A
 
+B
 
+C</textarea>
 
+<br/>
 
+<textarea class="float">A
 
+B
 
+C</textarea>
 
+
 
+<textarea class="block">A
 
+B
 
+C</textarea>
 
+
 
+<textarea class="flex">A
 
+B
 
+C</textarea>
 
+
 
+<table><td>
 
+<textarea>A
 
+B
 
+C</textarea>
 
+</td></table>
 
+
 
+<textarea class="absolute">A
 
+B
 
+C</textarea>
 
+
 
+<hr style="margin-top: 80dp;"/>
 
+
 
+<p>Force overflow with the empty space below, to ensure that this does not trigger any clipping issues in the above elements.</p>
 
+
 
+<div style="height:300dp"/>
 
+
 
+<handle size_target="#parent"/>
 
+</body>
 
+</rml>

+ 65 - 0
Tests/Data/VisualTests/stacking_context.rml
View File 

@@ -0,0 +1,65 @@
 
+<rml>
 
+<head>
 
+    <title>Stacking context and paint order</title>
 
+    <link type="text/rcss" href="../style.rcss"/>
 
+	<link rel="help" href="https://drafts.csswg.org/css2/#painting-order" />
 
+	<meta name="Description" content="Stacking contexts are formed by 'z-index' and possibly other properties." />
 
+	<style>
 
+		.wrapper {
 
+			margin: 15dp 0;
 
+		}
 
+		.box {
 
+			border: 2dp #d66;
 
+			background: #fff;
 
+			text-align: center;
 
+			width: 25dp;
 
+			height: 22dp;
 
+		}
 
+		.flex {
 
+			display: flex;
 
+			flex-direction: column;
 
+		}
 
+	</style>
 
+</head>
 
+
 
+<body>
 
+
 
+<p>In the following, 'AA' should overflow and be painted over the 'B' boxes.</p>
 
+
 
+<div class="wrapper">
 
+  <div class="box">A<br/>AA</div>
 
+  <div class="box">B</div>
 
+</div>
 
+
 
+<div class="wrapper">
 
+  <div class="box">A<br/>AA</div>
 
+  <div class="box" style="position: relative; z-index: -1;">B</div>
 
+</div>
 
+
 
+<hr/>
 
+
 
+<p>In the following, 'B' boxes should be painted over the overflowing 'AA' text.</p>
 
+
 
+<div class="wrapper">
 
+  <div class="box">A<br/>AA</div>
 
+  <div class="box" style="position: relative;">B</div>
 
+</div>
 
+
 
+<div class="wrapper">
 
+  <div class="box">A<br/>AA</div>
 
+  <div class="box" style="position: relative; z-index: 0;">B</div>
 
+</div>
 
+
 
+<div class="wrapper">
 
+  <div class="box">A<br/>AA</div>
 
+  <div class="box" style="display: inline-block;">B</div>
 
+</div>
 
+
 
+<div class="wrapper flex" id="flex">
 
+  <div class="box">A<br/>AA</div>
 
+  <div class="box">B</div>
 
+</div>
 
+
 
+<handle size_target="#document"/>
 
+</body>
 
+</rml>

+ 3 - 0
Tests/Data/VisualTests/table_01.rml
View File 

@@ -22,6 +22,9 @@
 
 		}
 
 		}
 
 		col {
 
 		col {
 
 			background: #3d3;
 
 			background: #3d3;
 
+			
+			/* Used to test the paint order of positioned columns, should not affect the order. */
 
+			position: relative;
 
 		}
 
 		}
 
 		col:first-child {
 
 		col:first-child {
 
 			background: #6df;
 
 			background: #6df;

+ 0 - 1
Tests/Data/style.rcss
View File 

@@ -117,7 +117,6 @@ handle {
 
 	height: 16dp;
 
 	height: 16dp;
 
 	bottom: 0;
 
 	bottom: 0;
 
 	right: 0;
 
 	right: 0;
 
-	clip: 1;
 
 	cursor: resize;
 
 	cursor: resize;
 
 }
 
 }