Browse Source

Update visual tests.

Michael Ragazzon 5 years ago
parent
commit
e20d1afacf

+ 2 - 2
Tests/Data/VisualTests/float_basic.rml

@@ -11,7 +11,7 @@
 			color: #444;
 			color: #444;
 		}
 		}
 		#content {
 		#content {
-			width: 200px;
+			width: 230px;
 			margin: 0 auto;
 			margin: 0 auto;
 		}
 		}
 		div.float {
 		div.float {
@@ -49,4 +49,4 @@
 	<p style="overflow: auto;">This paragraph should establish a new block formatting context. This element's size and position should not overlap with the float, but still be located next to it.</p>
 	<p style="overflow: auto;">This paragraph should establish a new block formatting context. This element's size and position should not overlap with the float, but still be located next to it.</p>
 </div>
 </div>
 </body>
 </body>
-</rml>
+</rml>

+ 1 - 1
Tests/Data/VisualTests/float_overflow.rml

@@ -40,4 +40,4 @@
 	<p>Using 'overflow: auto' on the containing '.box' element. This should establish a new block formatting context (thereby resolving all floats) so that the background wraps around the entire float.</p>
 	<p>Using 'overflow: auto' on the containing '.box' element. This should establish a new block formatting context (thereby resolving all floats) so that the background wraps around the entire float.</p>
 </div>
 </div>
 </body>
 </body>
-</rml>
+</rml>

+ 6 - 1
Tests/Data/VisualTests/inline_block.rml

@@ -30,5 +30,10 @@
 <div>Left filler text. <div class="iblock">An inline-block. <p>A paragraph</p> Filler text.</div> Right filler text.</div>
 <div>Left filler text. <div class="iblock">An inline-block. <p>A paragraph</p> Filler text.</div> Right filler text.</div>
 <hr/>
 <hr/>
 <div>Left filler text. <div class="iblock">An inline-block. <div class="float">A float</div> Filler text.</div> Right filler text.</div>
 <div>Left filler text. <div class="iblock">An inline-block. <div class="float">A float</div> Filler text.</div> Right filler text.</div>
+<hr/>
+<div class="iblock">Nesting inline-blocks: 
+	<div class="iblock">A<div class="iblock">B<div class="iblock">C</div></div></div>
+	<div class="iblock">D<div class="iblock">E<div class="iblock">F</div></div></div>
+</div>
 </body>
 </body>
-</rml>
+</rml>

+ 1 - 1
Tests/Data/VisualTests/overflow_hidden.rml

@@ -60,4 +60,4 @@
 	</div>
 	</div>
 </div>
 </div>
 </body>
 </body>
-</rml>
+</rml>

+ 1 - 1
Tests/Data/VisualTests/overflow_nested.rml

@@ -39,4 +39,4 @@
 	</div>
 	</div>
 </div>
 </div>
 </body>
 </body>
-</rml>
+</rml>

+ 1 - 1
Tests/Data/VisualTests/position_01_normal_flow.rml

@@ -25,4 +25,4 @@
 		End of p contents.
 		End of p contents.
 	</p>
 	</p>
 </body>
 </body>
-</rml>
+</rml>

+ 1 - 1
Tests/Data/VisualTests/position_02_relative_positioning.rml

@@ -25,4 +25,4 @@
 		End of p contents.
 		End of p contents.
 	</p>
 	</p>
 </body>
 </body>
-</rml>
+</rml>

+ 1 - 1
Tests/Data/VisualTests/position_03_floating_a_box.rml

@@ -25,4 +25,4 @@
 		End of p contents.
 		End of p contents.
 	</p>
 	</p>
 </body>
 </body>
-</rml>
+</rml>

+ 1 - 1
Tests/Data/VisualTests/position_04_floating_a_box_sibling.rml

@@ -26,4 +26,4 @@
 		End of p contents.
 		End of p contents.
 	</p>
 	</p>
 </body>
 </body>
-</rml>
+</rml>

+ 1 - 1
Tests/Data/VisualTests/position_05_floating_a_box_clear.rml

@@ -26,4 +26,4 @@
 		End of p contents.
 		End of p contents.
 	</p>
 	</p>
 </body>
 </body>
-</rml>
+</rml>

+ 1 - 1
Tests/Data/VisualTests/position_06_absolute_positioning.rml

@@ -30,4 +30,4 @@
 		End of p contents.
 		End of p contents.
 	</p>
 	</p>
 </body>
 </body>
-</rml>
+</rml>

+ 1 - 1
Tests/Data/VisualTests/position_07_absolute_positioning_relative.rml

@@ -33,4 +33,4 @@
 		End of p contents.
 		End of p contents.
 	</p>
 	</p>
 </body>
 </body>
-</rml>
+</rml>

+ 1 - 1
Tests/Data/VisualTests/position_08_absolute_positioning_no_relative.rml

@@ -30,4 +30,4 @@
 		End of p contents.
 		End of p contents.
 	</p>
 	</p>
 </body>
 </body>
-</rml>
+</rml>

+ 1 - 1
Tests/Data/VisualTests/position_09_absolute_positioning_change_bars.rml

@@ -23,4 +23,4 @@
 	  word.
 	  word.
 	</p>
 	</p>
 </body>
 </body>
-</rml>
+</rml>

+ 1 - 1
Tests/Data/VisualTests/shrink_to_fit.rml → Tests/Data/VisualTests/shrink_to_fit_01.rml

@@ -55,4 +55,4 @@
 	<div class="iblock right">BOX</div>
 	<div class="iblock right">BOX</div>
 </div>
 </div>
 </body>
 </body>
-</rml>
+</rml>

+ 91 - 0
Tests/Data/VisualTests/shrink_to_fit_02.rml

@@ -0,0 +1,91 @@
+<rml>
+<head>
+    <title>Shrink-to-fit 2</title>
+    <link type="text/rcss" href="../style.rcss"/>
+	<link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float" />
+	<meta name="Description" content="Shrink-to-fit width" />
+	<style>
+		body {
+			background: #ddd;
+			color: #444;
+		}
+		body > div {
+			clear: both;
+			position: relative;
+			height: 50px;
+		}
+		.absolute
+		{
+			position: absolute;
+			top: 10em;
+			left: 2em;
+			right: auto;
+			height: 22dp;
+			padding: 4dp 5dp;
+			color: white;
+			background-color: #888;
+			font-size: 15dp;
+		}
+		.x
+		{
+			position: absolute;
+			top: 5em;
+			left: 10px;
+			background: #fff;
+		}
+		.close
+		{
+			margin-left: 10dp;
+			z-index: 1;
+			float: right;
+			width: 18dp;
+			color: black;
+			background-color: #ddd;
+			border-width: 1px;
+			border-color: #666;
+			text-align: center;
+		}
+		.close:hover
+		{
+			background-color: #eee;
+		}
+		.close:active
+		{
+			background-color: #fff;
+		}
+		.title {
+			/*width: 280dp;*/
+			display: inline-block;
+		}
+		.button
+		{
+			font-size: 0.9em;
+			margin-left: 3dp;
+			z-index: 1;
+			float: right;
+			width: 18dp;
+			color: #fff;
+			background-color: #666;
+			border-width: 1px;
+			border-color: #ccc;
+			text-align: center;
+		}
+	</style>
+</head>
+
+<body id="test">
+<p>The following boxes should all appear the same, with the background and border tightly packed around the word 'BOX'.</p>
+<div style="position: relative; top: -50px;">
+<div class="x" id="absolute">
+Element Information
+</div>
+</div>
+<div class="absolute" id="absolute">
+	<div class="close">X</div>
+	<div class="button">U</div>
+	<div class="button">D</div>
+	<div class="button">*</div>
+	<div class="title">Element Information</div>
+</div>
+</body>
+</rml>