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 test for label element

Michael Ragazzon 4 years ago
parent
2eb5662239
commit
02d37b3b9a
5 changed files with 125 additions and 13 deletions
Unified View Show Diff Stats
  1. 3 1
      Source/Core/Elements/ElementLabel.cpp
  2. 92 0
      Tests/Data/VisualTests/element_label.rml
  3. 1 1
      Tests/Data/VisualTests/float_basic.rml
  4. 0 4
      Tests/Data/VisualTests/replaced_elements.rml
  5. 29 7
      Tests/Data/style.rcss

+ 3 - 1
Source/Core/Elements/ElementLabel.cpp
View File 

@@ -106,7 +106,9 @@ Element* ElementLabel::GetTarget()
 
 	}
 
 	}
 
 	else
 
 	else
 
 	{
 
 	{
 
-		return GetElementById(target_id);
 
+		Element* target = GetElementById(target_id);
 
+		if (target != this)
 
+			return target;
 
 	}
 
 	}
 
 
 
 	return nullptr;
 
 	return nullptr;

+ 92 - 0
Tests/Data/VisualTests/element_label.rml
View File 

@@ -0,0 +1,92 @@
 
+<rml>
 
+<head>
 
+    <title>Element &lt;label&gt;</title>
 
+    <link type="text/rcss" href="../style.rcss"/>
 
+	<link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#the-label-element" />
 
+	<meta name="Description" content="The label element. Pay attention to the hover and active states, and that the target is clicked when its label is clicked." />
 
+	<style>
 
+		@spritesheet theme 
+		{
 
+			src: /assets/invader.tga;
 
+			invader: 179px 152px 50px 40px;
 
+		}
 
+		body {
 
+			font-size: 16px;
 
+		}
 
+		input, button {
 
+			margin: 0 1em;
 
+		}
 
+		label {
 
+			cursor: pointer;
 
+		}
 
+		label:hover {
 
+			color: #ff3;
 
+		}
 
+		input:focus, button:focus {
 
+			border-color: #3af;
 
+		}
 
+		input.checkbox, input.radio {
 
+			width: 1.2em;
 
+			height: 1.2em;
 
+			vertical-align: middle;
 
+		}
 
+		button {
 
+			display: inline-block;
 
+			background: #aaa;
 
+			border: 1px #333;
 
+			padding: 0.5em 1em;
 
+			tab-index: auto;
 
+		}
 
+		button:hover {
 
+			color: #333;
 
+			background: #cca;
 
+		}
 
+		button:active {
 
+			background: #eec;
 
+		}
 
+		label.float {
 
+			display: inline-block;
 
+			float: left;
 
+			background-color: #ddd;
 
+			border-radius: 1em; 
+			padding: 0.5em;
 
+		}
 
+	</style>
 
+</head>
 
+
 
+<body>
 
+<p>
 
+	<label><input type="checkbox"/> Pizza</label>
 
+</p>
 
+<p>
 
+	<input type="checkbox" id="pasta"/><label for="pasta"> Pasta</label>
 
+</p>
 
+<p>
 
+	<label id="my_label" for="my_label">
 
+		<input type="checkbox"/> Self referenced label (invalid)
 
+	</label>
 
+</p>
 
+<p>
 
+	<label>Left<input type="checkbox"/> Right</label>
 
+</p>
 
+<p>
 
+	<label for="sandwich">Left</label><input type="checkbox" id="sandwich"/><label for="sandwich"> Right</label>
 
+</p>
 
+
 
+<h1><label for="name">Name</label></h1>
 
+<p>
 
+	<input style="width: 50%;" type="text" id="name"/>
 
+</p>
 
+
 
+<label class="float">
 
+	<button id="submit">Submit</button> 
+	<p>
 
+		Press button from many places.<img sprite="invader"/><br/>
 
+		Even here...
 
+	</p>
 
+</label>
 
+<label class="float" style="float: right;" for="submit">
 
+	...or here.
 
+</label>
 
+</body>
 
+</rml>

+ 1 - 1
Tests/Data/VisualTests/float_basic.rml
View File 

@@ -11,7 +11,7 @@
 
 			color: #444;
 
 			color: #444;
 
 		}
 
 		}
 
 		#content {
 
 		#content {
 
-			width: 230px;
 
+			width: 250px;
 
 			margin: 0 auto;
 
 			margin: 0 auto;
 
 		}
 
 		}
 
 		div.float {
 
 		div.float {

+ 0 - 4
Tests/Data/VisualTests/replaced_elements.rml
View File 

@@ -20,12 +20,8 @@
 
 		}
 
 		}
 
 		input.text {
 
 		input.text {
 
 			font-size: 1.1em;
 
 			font-size: 1.1em;
 
-			background-color: #fff;
 
-			color: #555;
 
 			border: 5px #999;
 
 			border: 5px #999;
 
 			padding: 15px;
 
 			padding: 15px;
 
-			cursor: text;
 
-			tab-index: auto;
 
 			box-sizing: border-box;
 
 			box-sizing: border-box;
 
 		}
 
 		}
 
 	</style>
 
 	</style>

+ 29 - 7
Tests/Data/style.rcss
View File 

@@ -12,13 +12,6 @@ hr {
 
 	margin: 5px 0;
 
 	margin: 5px 0;
 
 }
 
 }
 
 
 
-input.radio {
 
-	width: 10px;
 
-	height: 10px;
 
-	border: 1px #666;
 
-	background: #fff;
 
-}
 
-
 
 body {
 
 body {
 
 	font-family: LatoLatin;
 
 	font-family: LatoLatin;
 
 	font-weight: normal;
 
 	font-weight: normal;
 
@@ -127,3 +120,32 @@ handle {
 
 	clip: 1;
 
 	clip: 1;
 
 	cursor: resize;
 
 	cursor: resize;
 
 }
 
 }
 
+
 
+input.radio, input.checkbox {
 
+	width: 10px;
 
+	height: 10px;
 
+	border: 1px #666;
 
+	background: #fff;
 
+	tab-index: auto;
 
+}
 
+input.radio {
 
+	border-radius: 5px;
 
+}
 
+input.radio:hover, input.checkbox:hover {
 
+	background: #ff3;
 
+}
 
+input.radio:active, input.checkbox:active {
 
+	background: #ccc;
 
+}
 
+input.radio:checked, input.checkbox:checked {
 
+	background: #222;
 
+}
 
+input.text {
 
+	background-color: #fff;
 
+	color: #555;
 
+	border: 2px #999;
 
+	padding: 5px;
 
+	tab-index: auto;
 
+	cursor: text;
 
+	box-sizing: border-box;
 
+}