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

Visual tests: Update and add new table samples

Michael Ragazzon 5 years ago
parent
aee2c49f8b
commit
8574490daa
6 changed files with 446 additions and 75 deletions
Split View Show Diff Stats
  1. 22 0
      Samples/assets/rml.rcss
  2. 103 0
      Tests/Data/VisualTests/reference/table_01-ref.rml
  3. 70 75
      Tests/Data/VisualTests/table_01.rml
  4. 135 0
      Tests/Data/VisualTests/table_02.rml
  5. 83 0
      Tests/Data/VisualTests/table_03.rml
  6. 33 0
      Tests/Data/style.rcss

+ 22 - 0
Samples/assets/rml.rcss
View File 

@@ -42,3 +42,25 @@ tabset tabs
 
 	display: block;
 
 }
 
 
+table {
 
+	box-sizing: border-box;
 
+	display: table;
 
+}
 
+tr {
 
+	box-sizing: border-box;
 
+	display: table-row;
 
+}
 
+td {
 
+	box-sizing: border-box;
 
+	display: table-cell;
 
+}
 
+col {
 
+	box-sizing: border-box;
 
+	display: table-column;
 
+}
 
+colgroup {
 
+	display: table-column-group;
 
+}
 
+thead, tbody, tfoot {
 
+	display: table-row-group;
 
+}

+ 103 - 0
Tests/Data/VisualTests/reference/table_01-ref.rml
View File 

@@ -0,0 +1,103 @@
 
+<rml>
 
+<head>
 
+    <title>Table 01 ref</title>
 
+    <link type="text/rcss" href="../../style.rcss"/>
 
+	<meta name="Reference" content="Reference implemented using 'inline-blocks' instead. Row coloring does not work here. Might not be pixel accurate." />
 
+	<style>
 
+		table {
 
+			display: block;
 
+			border-width: 20px 5px 0;
 
+			color: #333;
 
+			text-align: center;
 
+			margin: 0 auto;
 
+			min-width: 100px;
 
+			max-width: 400px;
 
+		}
 
+		body * {
 
+			border-color: #666;
 
+		}
 
+		td {
 
+			display: inline-block;
 
+			box-sizing: border-box;
 
+			padding: 15px 5px;
 
+			width: 25%;
 
+			height: 47px;
 
+			background: #3d3;
 
+		}
 
+		td.span2 { width: 50%; }
 
+		td.span4 { width: 100%; }
 
+		tr {
 
+			display: block;
 
+		}
 
+		td:first-child {
 
+			background: #6df;
 
+			border-right-width: 3px;
 
+		}
 
+		td:last-of-type {
 
+			background: #dd3;
 
+		}
 
+		thead {
 
+			display: block;
 
+			color: black;
 
+			background: #fff5;
 
+			border-bottom: 3px #666;
 
+		}
 
+		tbody {
 
+			display: block;
 
+		}
 
+		tbody tr {
 
+			border-bottom: 1px #666a;
 
+		}
 
+		tbody tr:last-child {
 
+			border-bottom: 0;
 
+		}
 
+		tbody tr:hover {
 
+			background: #fff5;
 
+		}
 
+		tfoot {
 
+			display: block;
 
+			background: #666;
 
+			color: #ccc;
 
+		}
 
+		tfoot td {
 
+			padding-top: 0px;
 
+			padding-bottom: 0px;
 
+			text-align: right;
 
+			height: 20px;
 
+		}
 
+	</style>
 
+</head>
 
+
 
+<body>
 
+<table>
 
+	<thead>
 
+		<tr>
 
+			<td>A</td>
 
+			<td class="span2">B</td>
 
+			<td>C</td>
 
+		</tr>
 
+	</thead>
 
+	<tbody>
 
+		<tr>
 
+			<td>D</td>
 
+			<td>E</td>
 
+			<td>F</td>
 
+			<td>G</td>
 
+		</tr>
 
+		<tr>
 
+			<td>H</td>
 
+			<td>I</td>
 
+			<td>J</td>
 
+			<td>K</td>
 
+		</tr>
 
+	</tbody>
 
+	<tfoot>
 
+		<tr>
 
+			<td style="background: transparent" class="span4">[1] Footnote</td>
 
+		</tr>
 
+	</tfoot>
 
+</table>
 
+
 
+<handle size_target="#document"/>
 
+</body>
 
+</rml>

+ 70 - 75
Tests/Data/VisualTests/table_01.rml
View File 

@@ -1,99 +1,94 @@
 
 <rml>
 
 <head>
 
-    <title>Table</title>
 
+    <title>Table 01</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="Basic table" />
 
+	<link rel="help" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html" />
 
+    <link rel="match" href="reference/table_01-ref.rml"/>
 
+	<meta name="Description" content="Basic table layout." />
 
 	<style>
 
-		@spritesheet theme 
-		{
 
-			src: /assets/invader.tga;
 
-			invader: 179px 152px 50px 40px;
 
+		table {
 
+			border-width: 20px 5px 0;
 
+			color: #333;
 
+			text-align: center;
 
+			margin: 0 auto;
 
+			min-width: 100px;
 
+			max-width: 400px;
 
 		}
 
-		body { overflow-x: auto; }
 
-		handle {
 
-			position: fixed;
 
-			background: #555a;
 
-			width: 16px;
 
-			height: 16px;
 
-			bottom: 0px;
 
-			right: 0px;
 
-			clip: 1;
 
-			cursor: resize;
 
+		table, table * {
 
+			border-color: #666;
 
 		}
 
-		table {
 
-			box-sizing: border-box;
 
-			display: table;
 
-			border: 5px #666;
 
-			gap: 10px 2%;
 
-			height: 50%;
 
-			padding-left: 5px;
 
-			padding-right: 20px;
 
+		td {
 
+			padding: 15px 5px;
 
 		}
 
 		col {
 
-			box-sizing: border-box;
 
-			display: table-column;
 
-			background: #aac;
 
-			border-left: 2px #e3e;
 
-			border-right: 5px #3ce;
 
-			margin: 15px 0;
 
+			background: #3d3;
 
 		}
 
 		col:first-child {
 
-			border-left-width: 0;
 
+			background: #6df;
 
+			border-right-width: 3px;
 
 		}
 
-		col:last-of-type {
 
-			border-right-width: 0;
 
+		col:nth-child(3) {
 
+			background: #dd3;
 
 		}
 
-		tr {
 
-			box-sizing: border-box;
 
-			display: table-row;
 
-			border-top: 5px #ec3;
 
-			background: #acc;
 
-			padding-top: 5px;
 
-			padding-bottom: 15px;
 
-			margin: 10px 20px;
 
+		thead {
 
+			color: black;
 
+			background: #fff5;
 
+			border-bottom: 3px #666;
 
 		}
 
-		td {
 
-			box-sizing: border-box;
 
-			display: table-cell;
 
-			border-right: 5px red;
 
-			background: #bbb;
 
+		tbody tr {
 
+			border-bottom: 1px #666a;
 
 		}
 
-		.bottom-right {
 
-			position: absolute;
 
-			bottom: 0;
 
-			right: 0;
 
-			width: 15px;
 
-			height: 15px;
 
+		tbody tr:last-child {
 
+			border-bottom: 0;
 
+		}
 
+		tbody tr:hover {
 
+			background: #fff5;
 
+		}
 
+		tfoot {
 
+			background: #666;
 
+			color: #ccc;
 
+		}
 
+		tfoot td {
 
+			padding-top: 0px;
 
+			padding-bottom: 0px;
 
+			text-align: right;
 
+			height: 20px;
 
 		}
 
 	</style>
 
 </head>
 
 
 <body>
 
-<p>Try resizing the table using the document handle in the lower-right corner.</p>
 
 <table>
 
-	<col span="2" style="min-width: 150px; max-width: 250px;"/>
 
 	<col/>
 
-	<col style="min-width: 50px; max-width: 300px;"/>
 
-	<tr>
 
-		<td rowspan="2" colspan="2">Hello</td>
 
-		<td>Whoop!</td>
 
-		<td>World Hi!</td>
 
-	</tr>
 
-	<tr>
 
-		<td colspan="2">World<br/>Hi!</td>
 
-	</tr>
 
-	<tr>
 
-		<td style="height: 50%;">Cat<div class="bottom-right">X</div></td>
 
-		<td style="padding-left: 30px; padding-top: 50px;" colspan="2">Mouse<div class="bottom-right">X</div></td>
 
-		<td style="border-left: 5px green; border-right-width: 2px; vertical-align: bottom" rowspan="2">RatTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</td>
 
-	</tr>
 
-	<tr>
 
-		<td style="vertical-align: bottom;">Row<br/>Row</td>
 
-		<td colspan="2">3</td>
 
-	</tr>
 
+	<col span="2"/>
 
+	<col/>
 
+	<thead>
 
+		<tr>
 
+			<td>A</td>
 
+			<td colspan="2">B</td>
 
+			<td>C</td>
 
+		</tr>
 
+	</thead>
 
+	<tbody>
 
+		<tr>
 
+			<td>D</td>
 
+			<td>E</td>
 
+			<td>F</td>
 
+			<td>G</td>
 
+		</tr>
 
+		<tr>
 
+			<td>H</td>
 
+			<td>I</td>
 
+			<td>J</td>
 
+			<td>K</td>
 
+		</tr>
 
+	</tbody>
 
+	<tfoot>
 
+		<tr>
 
+			<td colspan="4">[1] Footnote</td>
 
+		</tr>
 
+	</tfoot>
 
 </table>
 
-<p style="text-align: center;">Paragraph after table.</p>
 
-<handle size_target="#document"></handle>
 
+<handle size_target="#document"/>
 
 </body>
 
 </rml>

+ 135 - 0
Tests/Data/VisualTests/table_02.rml
View File 

@@ -0,0 +1,135 @@
 
+<rml>
 
+<head>
 
+    <title>Table 02</title>
 
+    <link type="text/rcss" href="../style.rcss"/>
 
+	<link rel="help" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#fixed-table-layout" />
 
+	<meta name="Description" content="Test table column sizing algorithm." />
 
+	<style>
 
+		table {
 
+			margin: 2em 0;
 
+			border: 2px #666;
 
+			gap: 5px;
 
+			text-align: center;
 
+		}
 
+		td {
 
+			background: #bbb;
 
+			vertical-align: middle;
 
+			padding: 5px;
 
+		}
 
+		.color {
 
+			background: #333;
 
+			padding: 5px;
 
+			width: 0px;
 
+		}
 
+		.color colgroup {
 
+			padding: 0 5px;
 
+			margin: 0 5px;
 
+			background: #a33;
 
+			border: 5px #f33;
 
+		}
 
+		.color col {
 
+			width: 80px;
 
+			padding: 0 5px;
 
+			margin: 0 5px;
 
+			background: #33b;
 
+			border: 5px #66f;
 
+		}
 
+		.color tr { 
+			height: auto;
 
+		}
 
+		.color td {
 
+			margin: 0 5px;
 
+			padding: 0 5px;
 
+			background: #bbb;
 
+			border: 5px #ddd;
 
+			height: 30px;
 
+		}
 
+		.color-ref {
 
+			border: 2px #666;
 
+			background: #333;
 
+			margin: 20px 0;
 
+			height: 40px;
 
+			width: 305px; /* 2*col width + 8*td margin + 4*col margin + 4*colgroup padding + 4*colgroup border +
 
+			                 4*colgroup margin + 3*column-gap + 2*table padding */
 
+		}
 
+	</style>
 
+</head>
 
+
 
+<body>
 
+<p>The following tables should be the same size.</p>
 
+<table>
 
+	<tr>
 
+		<td style="width: 50px">A</td>
 
+		<td>B</td>
 
+		<td>C</td>
 
+		<td>D</td>
 
+		<td style="width: 50px">E</td>
 
+	</tr>
 
+</table>
 
+<table>
 
+	<col style="width: 50px"/>
 
+	<colgroup span="3"/>
 
+	<col style="width: 50px"/>
 
+	<tr>
 
+		<td>A</td>
 
+		<td>B</td>
 
+		<td>C</td>
 
+		<td>D</td>
 
+		<td>E</td>
 
+	</tr>
 
+</table>
 
+<table>
 
+	<colgroup>
 
+		<col style="width: 50px"/>
 
+	</colgroup>
 
+	<col span="3"/>
 
+	<colgroup>
 
+		<col style="width: 50px"/>
 
+	</colgroup>
 
+	<tr>
 
+		<td>A</td>
 
+		<td>B</td>
 
+		<td>C</td>
 
+		<td>D</td>
 
+		<td>E</td>
 
+	</tr>
 
+</table>
 
+<table>
 
+	<colgroup>
 
+		<col style="min-width: 50px; max-width: 50px"/>
 
+		<col/>
 
+		<col/>
 
+		<col/>
 
+		<col style="width: 50px"/>
 
+	</colgroup>
 
+	<tr>
 
+		<td>A</td>
 
+		<td>B</td>
 
+		<td>C</td>
 
+		<td>D</td>
 
+		<td>E</td>
 
+	</tr>
 
+</table>
 
+
 
+<hr/>
 
+
 
+The following table should be symmetrical and have the same size as the reference box beneath.
 
+<table class="color">
 
+	<colgroup>
 
+		<col span="2"/>
 
+	</colgroup>
 
+	<colgroup>
 
+		<col span="2"/>
 
+	</colgroup>
 
+	<tr>
 
+		<td>A</td>
 
+		<td>B</td>
 
+		<td>C</td>
 
+		<td>D</td>
 
+	</tr>
 
+</table>
 
+<div class="color-ref"/>
 
+
 
+<handle size_target="#document"/>
 
+</body>
 
+</rml>

+ 83 - 0
Tests/Data/VisualTests/table_03.rml
View File 

@@ -0,0 +1,83 @@
 
+<rml>
 
+<head>
 
+    <title>Table 03</title>
 
+    <link type="text/rcss" href="../style.rcss"/>
 
+	<link rel="help" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html" />
 
+	<meta name="Description" content="Test various table features." />
 
+	<style>
 
+		table {
 
+			box-sizing: border-box;
 
+			display: table;
 
+			border: 5px #666;
 
+			gap: 10px 2%;
 
+			height: 50%;
 
+			padding-left: 5px;
 
+			padding-right: 20px;
 
+		}
 
+		col {
 
+			box-sizing: border-box;
 
+			display: table-column;
 
+			background: #aac;
 
+			border-left: 2px #e3e;
 
+			border-right: 5px #3ce;
 
+			margin: 15px 0;
 
+		}
 
+		col:first-child {
 
+			border-left-width: 0;
 
+		}
 
+		col:last-of-type {
 
+			border-right-width: 0;
 
+		}
 
+		tr {
 
+			box-sizing: border-box;
 
+			display: table-row;
 
+			border-top: 5px #ec3;
 
+			background: #acc;
 
+			padding-top: 5px;
 
+			padding-bottom: 15px;
 
+			margin: 10px 20px;
 
+		}
 
+		td {
 
+			box-sizing: border-box;
 
+			display: table-cell;
 
+			border-right: 5px red;
 
+			background: #bbb;
 
+		}
 
+		.bottom-right {
 
+			position: absolute;
 
+			bottom: 0;
 
+			right: 0;
 
+			width: 15px;
 
+			height: 15px;
 
+		}
 
+	</style>
 
+</head>
 
+
 
+<body>
 
+<p>Try resizing the table using the document handle in the lower-right corner.</p>
 
+<table>
 
+	<col span="2" style="min-width: 150px; max-width: 250px;"/>
 
+	<col/>
 
+	<col style="min-width: 50px; max-width: 300px;"/>
 
+	<tr>
 
+		<td rowspan="2" colspan="2">Hello</td>
 
+		<td>Whoop!</td>
 
+		<td>World Hi!</td>
 
+	</tr>
 
+	<tr>
 
+		<td colspan="2">World<br/>Hi!</td>
 
+	</tr>
 
+	<tr>
 
+		<td style="height: 50%;">Cat<div class="bottom-right">X</div></td>
 
+		<td style="padding-left: 30px; padding-top: 50px;" colspan="2">Mouse<div class="bottom-right">X</div></td>
 
+		<td style="border-left: 5px green; border-right-width: 2px; vertical-align: bottom" rowspan="2">RatTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</td>
 
+	</tr>
 
+	<tr>
 
+		<td style="vertical-align: bottom;">Row<br/>Row</td>
 
+		<td colspan="2">3</td>
 
+	</tr>
 
+</table>
 
+<p style="text-align: center;">Paragraph after table.</p>
 
+<handle size_target="#document"/>
 
+</body>
 
+</rml>

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

@@ -94,3 +94,36 @@ scrollbarcorner
 
 {
 
 	background: #888;
 
 }
 
+
 
+table {
 
+	box-sizing: border-box;
 
+	display: table;
 
+}
 
+tr {
 
+	box-sizing: border-box;
 
+	display: table-row;
 
+}
 
+td {
 
+	box-sizing: border-box;
 
+	display: table-cell;
 
+}
 
+col {
 
+	box-sizing: border-box;
 
+	display: table-column;
 
+}
 
+colgroup {
 
+	display: table-column-group;
 
+}
 
+thead, tbody, tfoot {
 
+	display: table-row-group;
 
+}
 
+handle {
 
+	position: fixed;
 
+	background: #555a;
 
+	width: 16px;
 
+	height: 16px;
 
+	bottom: 0px;
 
+	right: 0px;
 
+	clip: 1;
 
+	cursor: resize;
 
+}