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 text input overflow visual test, and update text alignment test

Michael Ragazzon 1 year ago
parent
41381b1141
commit
924858c1ea
2 changed files with 101 additions and 38 deletions
Unified View Show Diff Stats
  1. 39 38
      Tests/Data/VisualTests/text_alignment.rml
  2. 62 0
      Tests/Data/VisualTests/text_input_overflow.rml

+ 39 - 38
Tests/Data/VisualTests/text_alignment.rml
View File 

@@ -1,46 +1,47 @@
 
 <rml>
 
 <rml>
 
+<head>
 
+	<title>Text-alignment property</title>
 
+	<link type="text/rcss" href="../style.rcss"/>
 
+	<meta name="Description" content="Text-alignment property for inputs."/>
 
+	<style>
 
+		body {
 
+			background: #ddd;
 
+			color: #444;
 
+		}
 
 
 
-	<head>
 
-		<title>Text-alignment property</title>
 
-		<link type="text/rcss" href="../style.rcss" />
 
-		<meta name="Description" content="Text-alignment property for inputs." />
 
-		<style>
 
-			body {
 
-				background: #ddd;
 
-				color: #444;
 
-			}
 
+		input.text, textarea {
 
+			display: block;
 
+			margin: 10dp auto;
 
+			border: 2dp #999;
 
+			padding: 5dp 10dp;
 
+			box-sizing: border-box;
 
+			width: 250dp;
 
+			background-color: #fff;
 
+		}
 
+	</style>
 
+</head>
 
 
 
-			textarea {
 
-				background-color: #bbb;
 
-			}
 
+<body>
 
+<input style="text-align:left" value="left aligned"/>
 
+<input style="text-align:center" value="center aligned"/>
 
+<input style="text-align:right" value="right aligned"/>
 
 
 
-			h1 {
 
-				margin-top: 0.3em;
 
-				font-size: 1.1em;
 
-			}
 
-		</style>
 
-	</head>
 
+<textarea style="text-align:left" rows="3">left aligned overflow overflow overflow overflow
 
+line-break</textarea>
 
+<textarea style="text-align:center" rows="3">center aligned overflow overflow overflow overflow
 
+line-break</textarea>
 
+<textarea style="text-align:right" rows="3">right aligned overflow overflow overflow overflow
 
+line-break</textarea>
 
+
 
+<textarea style="text-align:left" rows="3" wrap="nowrap">left aligned nowrap nowrap nowrap nowrap nowrap</textarea>
 
+<textarea style="text-align:center" rows="3" wrap="nowrap">center aligned nowrap nowrap nowrap nowrap nowrap</textarea>
 
+<textarea style="text-align:right" rows="3" wrap="nowrap">right aligned nowrap nowrap nowrap nowrap nowrap</textarea>
 
 
 
-	<body>
 
-		<input style="text-align:left" value="left aligned" />
 
-		<br />
 
-		<input style="text-align:center" value="center aligned" />
 
-		<br />
 
-		<input style="text-align:right" value="right aligned" />
 
-		<br />
 
-		<textarea style="text-align:left" rows="3">left aligned overflow overflow overflow overflow
 
+<textarea style="text-align:left" rows="1" wrap="nowrap">left
 
 line-break</textarea>
 
 line-break</textarea>
 
-		<br />
 
-		<textarea style="text-align:center" rows="3">center aligned overflow overflow overflow overflow
 
+<textarea style="text-align:center" rows="1" wrap="nowrap">center
 
 line-break</textarea>
 
 line-break</textarea>
 
-		<br />
 
-		<textarea style="text-align:right" rows="3">right aligned overflow overflow overflow overflow
 
+<textarea style="text-align:right" rows="1" wrap="nowrap">right
 
 line-break</textarea>
 
 line-break</textarea>
 
-		<br />
 
-		<textarea style="text-align:left" rows="3" wrap="nowrap">left aligned nowrap nowrap nowrap nowrap nowrap</textarea>
 
-		<br />
 
-		<textarea style="text-align:center" rows="3" wrap="nowrap">center aligned nowrap nowrap nowrap nowrap nowrap</textarea>
 
-		<br />
 
-		<textarea style="text-align:right" rows="3" wrap="nowrap">right aligned nowrap nowrap nowrap nowrap nowrap</textarea>
 
-	</body>
 
-</rml>
 
+</body>
 
+</rml>

+ 62 - 0
Tests/Data/VisualTests/text_input_overflow.rml
View File 

@@ -0,0 +1,62 @@
 
+<rml>
 
+<head>
 
+	<title>Text input overflow</title>
 
+	<link type="text/rcss" href="../style.rcss" />
 
+	<link rel="help" href="https://drafts.csswg.org/css-ui/#input-rules" />
 
+	<link rel="fiddle" href="https://jsfiddle.net/kmouse/t3k7jurn/5/" />
 
+	<meta name="Description" content="Overflow behavior in text input controls." />
 
+	<meta name="Assert" content="Single-line text inputs should clip to their content area in the horizontal direction and padding area in the vertical direction. For simplicity, we always clip to the content area. Chrome seems to do the same, only Firefox seems to follow the specification. Text areas follow normal rules, clipping to the padding area." />
 
+	<meta name="Notes" content="Overflow from the text itself, here simulated using a shadow font effect, does not engage clipping by itself. This can be tricky to detect, especially during the layout stage. For small shadows, or for some glyphs that render slightly outside the content area, it might be nice to keep the current behavior so that they are not clipped. However, once the text overflows to the right, or border-radius is added, then clipping kicks in, causing the text to also clip on the left side." />
 
+	<style>
 
+		body {
 
+			background: #ddd;
 
+			color: #444;
 
+			text-align: center;
 
+		}
 
+		input.text, textarea {
 
+			display: block;
 
+			margin: 15dp auto;
 
+		}
 
+		input.text {
 
+			padding: 10dp 15dp;
 
+			width: 150dp;
 
+		}
 
+		textarea {
 
+			background-color: #fff;
 
+			padding: 10px 16px;
 
+			border: 2dp #999;
 
+		}
 
+		.shadow {
 
+			font-effect: shadow(-30dp -10dp #f00);
 
+		}
 
+		.border-radius {
 
+			border-radius: 15dp;
 
+		}
 
+	</style>
 
+</head>
 
+
 
+<body>
 
+<input value="sample text" />
 
+
 
+<input class="shadow" value="sample text" />
 
+<input class="shadow" value="sample text overflow overflow overflow" />
 
+<input class="shadow border-radius" value="sample text" />
 
+<input class="shadow border-radius" value="sample text overflow overflow overflow" />
 
+
 
+<textarea rows="2">sample text</textarea>
 
+<textarea class="shadow"  rows="2">sample text</textarea>
 
+<textarea class="shadow border-radius"  rows="2">sample text</textarea>
 
+
 
+<textarea rows="2">sample text
 
+sample text
 
+sample text</textarea>
 
+
 
+<textarea class="shadow" rows="2">sample text
 
+sample text
 
+sample text</textarea>
 
+
 
+<textarea class="shadow" rows="2" wrap="nowrap">sample text overflow overflow overflow overflow
 
+sample text
 
+sample text</textarea>
 
+</body>
 
+</rml>