about summary refs log tree commit diff stats
path: root/test/layout
diff options
context:
space:
mode:
Diffstat (limited to 'test/layout')
-rw-r--r--test/layout/absolute-no-line-break-easy.expected4
-rw-r--r--test/layout/absolute-no-line-break-easy.html13
-rw-r--r--test/layout/acid1.color.expected38
-rw-r--r--test/layout/acid1.html183
-rw-r--r--test/layout/anb_whitespace.color.expected6
-rw-r--r--test/layout/anb_whitespace.html12
-rw-r--r--test/layout/case2.expected4
-rw-r--r--test/layout/case2.html13
-rw-r--r--test/layout/case4.color.expected7
-rw-r--r--test/layout/case4.html13
-rw-r--r--test/layout/config.color.toml4
-rw-r--r--test/layout/config.toml9
-rw-r--r--test/layout/flex-items-cross-margin.color.expected7
-rw-r--r--test/layout/flex-items-cross-margin.html11
-rw-r--r--test/layout/flex-shrink-simple.expected3
-rw-r--r--test/layout/flex-shrink-simple.html5
-rw-r--r--test/layout/flex-specified-width.expected2
-rw-r--r--test/layout/flex-specified-width.html7
-rw-r--r--test/layout/flex-width-children-overconstrained.expected3
-rw-r--r--test/layout/flex-width-children-overconstrained.html6
-rw-r--r--test/layout/flexbox-simple-flex-grow-and-height.color.expected12
-rw-r--r--test/layout/flexbox-simple-flex-grow-and-height.html5
-rw-r--r--test/layout/flexbox-with-ul.expected2
-rw-r--r--test/layout/flexbox-with-ul.html6
-rw-r--r--test/layout/float-with-left-padding.expected1
-rw-r--r--test/layout/float-with-left-padding.html3
-rw-r--r--test/layout/float_negative_margin.expected1
-rw-r--r--test/layout/float_negative_margin.html13
-rw-r--r--test/layout/float_resolve_parent.color.expected13
-rw-r--r--test/layout/float_resolve_parent.html36
-rw-r--r--test/layout/hangul.expected8
-rw-r--r--test/layout/hangul.html9
-rw-r--r--test/layout/inline-backgrounds.color.expected30
-rw-r--r--test/layout/inline-backgrounds.html33
-rw-r--r--test/layout/inline_split_sizes.color.expected9
-rw-r--r--test/layout/inline_split_sizes.html5
-rw-r--r--test/layout/list_style_type.html.disabled62
-rw-r--r--test/layout/margin.expected10
-rw-r--r--test/layout/margin.html19
-rw-r--r--test/layout/margins.expected9
-rw-r--r--test/layout/margins.html17
-rw-r--r--test/layout/margins_float.expected8
-rw-r--r--test/layout/margins_float.html22
-rw-r--r--test/layout/margins_float2.expected3
-rw-r--r--test/layout/margins_float2.html11
-rw-r--r--test/layout/margins_float2_1.expected3
-rw-r--r--test/layout/margins_float2_1.html9
-rw-r--r--test/layout/min-max-width.color.expected33
-rw-r--r--test/layout/min-max-width.html31
-rw-r--r--test/layout/nested-floats-simple.expected1
-rw-r--r--test/layout/nested-floats-simple.html5
-rwxr-xr-xtest/layout/run_layout_tests.sh23
-rw-r--r--test/layout/table-rowspan.expected3
-rw-r--r--test/layout/table-rowspan.html30
-rw-r--r--test/layout/table.color.expected10
-rw-r--r--test/layout/table.html38
-rw-r--r--test/layout/tabs.color.expected6
-rw-r--r--test/layout/tabs.html7
58 files changed, 896 insertions, 0 deletions
diff --git a/test/layout/absolute-no-line-break-easy.expected b/test/layout/absolute-no-line-break-easy.expected
new file mode 100644
index 00000000..b4d11083
--- /dev/null
+++ b/test/layout/absolute-no-line-break-easy.expected
@@ -0,0 +1,4 @@
+                                       hi
+
+break                                world
+                                    hi world
diff --git a/test/layout/absolute-no-line-break-easy.html b/test/layout/absolute-no-line-break-easy.html
new file mode 100644
index 00000000..30269691
--- /dev/null
+++ b/test/layout/absolute-no-line-break-easy.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+
+* {
+  font-family: monospace,monospace;
+  line-height: 1em;
+  font-size: 18px
+}
+</style>
+<div style="width: 100%; text-align: center">
+<span style="text-align: right">hi <br><br><div style="position: absolute">break</div>world</span>
+<br>
+<span>hi </span> <span>world</span>
diff --git a/test/layout/acid1.color.expected b/test/layout/acid1.color.expected
new file mode 100644
index 00000000..0ecc2fc2
--- /dev/null
+++ b/test/layout/acid1.color.expected
@@ -0,0 +1,38 @@
+                                                                                                   
+                                                                                                   
+                                                                                                   
+      toggle                                                                                       
+                              the way         the world ends                   i grow old          
+                                              bang ( )                                             
+                                              whimper ( )                                          
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                              pluot?                    bar maids,    sing to me, erbarme          
+                                                                      dich                         
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+                                                                                                   
+   This is a nonsensical document, but syntactically valid HTML 4.0. All 100%-conformant CSS1      
+   agents should be able to render the document elements above this paragraph indistinguishably (to
+   the pixel) from this reference rendering, (except font rasterization and form widgets). All     
+   discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished   
+   evaluating this test, you can return to the parent page.                                        
+
diff --git a/test/layout/acid1.html b/test/layout/acid1.html
new file mode 100644
index 00000000..2a02951a
--- /dev/null
+++ b/test/layout/acid1.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
+<html><head>
+<meta http-equiv="content-type" content="text/html; charset=windows-1252">
+		<title>
+			 display/box/float/clear test 
+		</title>
+ 	<style type="text/css">
+/* last modified: 1 Dec 98 */ 	
+
+html {
+font: 10px/1 Verdana, sans-serif;
+background-color: blue;
+color: white;
+}
+
+body {
+margin: 1.5em;
+border: .5em solid black;
+padding: 0;
+width: 48em;
+background-color: white;
+}
+
+dl {
+margin: 0;
+border: 0;
+padding: .5em;
+}
+
+dt { 
+background-color: rgb(204,0,0);
+margin: 0; 
+padding: 1em;
+width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
+height: 28em;
+border: .5em solid black;
+float: left;
+}
+
+dd {
+float: right;
+margin: 0 0 0 1em;
+border: 1em solid black;
+padding: 1em;
+width: 34em;
+height: 27em;
+}
+
+ul {
+margin: 0;
+border: 0;
+padding: 0;
+}
+
+li {
+display: block; /* i.e., suppress marker */
+color: black;
+height: 9em;
+width: 5em;
+margin: 0;
+border: .5em solid black;
+padding: 1em;
+float: left;
+background-color: #FC0;
+}
+
+#bar {
+background-color: black;
+color: white;
+width: 41.17%; /* = 14em */
+border: 0;
+margin: 0 1em;
+}
+
+#baz {
+margin: 1em 0;
+border: 0;
+padding: 1em;
+width: 10em;
+height: 10em;
+background-color: black;
+color: white;
+}
+
+form { 
+margin: 0;
+display: inline;
+}
+
+p { 
+margin: 0;
+}
+
+form p {
+line-height: 1.9;
+}
+
+blockquote {
+margin: 1em 1em 1em 2em;
+border-width: 1em 1.5em 2em .5em;
+border-style: solid;
+border-color: black;
+padding: 1em 0;
+width: 5em;
+height: 9em;
+float: left;
+background-color: #FC0;
+color: black;
+}
+
+address {
+font-style: normal;
+}
+
+h1 {
+background-color: black;
+color: white;
+float: left;
+margin: 1em 0;
+border: 0;
+padding: 1em;
+width: 10em;
+height: 10em;
+font-weight: normal;
+font-size: 1em;
+}
+  </style>
+	</head>
+	<body>
+		<dl>
+			<dt>
+			 toggle 
+			</dt>
+			<dd>
+			<ul>
+				<li>
+				 the way 
+				</li>
+				<li id="bar">
+				<p>
+				 the world ends 
+				</p>
+				<form action="./" method="get">
+					<p>
+					 bang 
+					<input type="radio" name="foo" value="off">
+					</p>
+					<p>
+					 whimper 
+					<input type="radio" name="foo2" value="on">
+					</p>
+				</form>
+				</li>
+				<li>
+				 i grow old 
+				</li>
+				<li id="baz">
+				 pluot? 
+				</li>
+			</ul>
+			<blockquote>
+				<address>
+					 bar maids, 
+				</address>
+			</blockquote>
+			<h1>
+				 sing to me, erbarme dich 
+			</h1>
+			</dd>
+		</dl>
+		<p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
+		 This is a nonsensical document, but syntactically valid HTML 4.0. All
+ 100%-conformant CSS1 agents should be able to render the document 
+elements above this paragraph indistinguishably (to the pixel) from this
+ 
+			<a href="https://www.w3.org/Style/CSS/Test/CSS1/current/sec5526c.gif">reference rendering,</a>
+		 (except font rasterization and form widgets). All discrepancies 
+should be traceable to CSS1 implementation shortcomings. Once you have 
+finished evaluating this test, you can return to the <a href="https://www.w3.org/Style/CSS/Test/CSS1/current/sec5526c.htm">parent page</a>. 
+		</p>
+	
+
+</body></html>
diff --git a/test/layout/anb_whitespace.color.expected b/test/layout/anb_whitespace.color.expected
new file mode 100644
index 00000000..c5048053
--- /dev/null
+++ b/test/layout/anb_whitespace.color.expected
@@ -0,0 +1,6 @@
+
+  • hello
+  • world
+  • how
+  • are
+  • you
diff --git a/test/layout/anb_whitespace.html b/test/layout/anb_whitespace.html
new file mode 100644
index 00000000..716173a8
--- /dev/null
+++ b/test/layout/anb_whitespace.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<style>
+ul li:nth-child( 1n ) {
+	color: blue
+}
+</style>
+<ul>
+<li>hello
+<li>world
+<li>how
+<li>are
+<li>you
diff --git a/test/layout/case2.expected b/test/layout/case2.expected
new file mode 100644
index 00000000..b4d11083
--- /dev/null
+++ b/test/layout/case2.expected
@@ -0,0 +1,4 @@
+                                       hi
+
+break                                world
+                                    hi world
diff --git a/test/layout/case2.html b/test/layout/case2.html
new file mode 100644
index 00000000..30269691
--- /dev/null
+++ b/test/layout/case2.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+
+* {
+  font-family: monospace,monospace;
+  line-height: 1em;
+  font-size: 18px
+}
+</style>
+<div style="width: 100%; text-align: center">
+<span style="text-align: right">hi <br><br><div style="position: absolute">break</div>world</span>
+<br>
+<span>hi </span> <span>world</span>
diff --git a/test/layout/case4.color.expected b/test/layout/case4.color.expected
new file mode 100644
index 00000000..60425cc0
--- /dev/null
+++ b/test/layout/case4.color.expected
@@ -0,0 +1,7 @@
+
+
+test test test test test test test test test test test test test testfloat right
+float lefttest test test test test test test test test test test testfloat right
+test test test test test test test test test test test test test test test test
+test test test test test test test test test test test test test test test test
+test test test test test test test test test test test test
diff --git a/test/layout/case4.html b/test/layout/case4.html
new file mode 100644
index 00000000..36d3e9ce
--- /dev/null
+++ b/test/layout/case4.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="margin-top: 1em">
+<div style="float: right; background-color: blue">float right</div>
+<div style="float: left; clear: right; background-color: red">float left</div>
+<div style="float: right; background-color: yellow">float right</div>
+</div>
+<div style="margin-top: 2em">
+test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
+</div>
+</body>
+</html>
diff --git a/test/layout/config.color.toml b/test/layout/config.color.toml
new file mode 100644
index 00000000..4b5e999c
--- /dev/null
+++ b/test/layout/config.color.toml
@@ -0,0 +1,4 @@
+include = "config.toml"
+
+[display]
+color-mode = 'true-color'
diff --git a/test/layout/config.toml b/test/layout/config.toml
new file mode 100644
index 00000000..9b33aa2e
--- /dev/null
+++ b/test/layout/config.toml
@@ -0,0 +1,9 @@
+[display]
+columns = 80
+lines = 24
+pixels-per-column = 9
+pixels-per-line = 18
+force-columns = true
+force-lines = true
+force-pixels-per-column = true
+force-pixels-per-line = true
diff --git a/test/layout/flex-items-cross-margin.color.expected b/test/layout/flex-items-cross-margin.color.expected
new file mode 100644
index 00000000..8751cbec
--- /dev/null
+++ b/test/layout/flex-items-cross-margin.color.expected
@@ -0,0 +1,7 @@
+                                                       testing                  
+                                                                                
+             • testing                                                          
+                                                                                
+  • testing                                                                     
+                                                                                
+
diff --git a/test/layout/flex-items-cross-margin.html b/test/layout/flex-items-cross-margin.html
new file mode 100644
index 00000000..784d1c56
--- /dev/null
+++ b/test/layout/flex-items-cross-margin.html
@@ -0,0 +1,11 @@
+<div style="display: flex; background: blue; flex-wrap: wrap">
+<ul style="margin-top: 3em; background: green">
+<li style="margin-top: 1em; background: red">
+testing
+</ul>
+<ul style="margin-top: 1em; width: 40ch; background: green">
+<li style="margin-top: 1em; background: red">
+testing
+</ul>
+<div>
+testing
diff --git a/test/layout/flex-shrink-simple.expected b/test/layout/flex-shrink-simple.expected
new file mode 100644
index 00000000..1ba2dc37
--- /dev/null
+++ b/test/layout/flex-shrink-simple.expected
@@ -0,0 +1,3 @@
+test test test test test test test test test test test test test test test  last
+test test test test test test test test test test
+test
diff --git a/test/layout/flex-shrink-simple.html b/test/layout/flex-shrink-simple.html
new file mode 100644
index 00000000..45de8bcc
--- /dev/null
+++ b/test/layout/flex-shrink-simple.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<div style="display: flex">
+<div>test test test test test test test test test</div>
+<div>test test test test test test test test test test test test test test test test test</div>
+<div>last</div>
diff --git a/test/layout/flex-specified-width.expected b/test/layout/flex-specified-width.expected
new file mode 100644
index 00000000..d1b12d02
--- /dev/null
+++ b/test/layout/flex-specified-width.expected
@@ -0,0 +1,2 @@
+test                                    testing testing testing testing testing
+                                        testing testing testing
diff --git a/test/layout/flex-specified-width.html b/test/layout/flex-specified-width.html
new file mode 100644
index 00000000..a74cd6f0
--- /dev/null
+++ b/test/layout/flex-specified-width.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<div style="display: flex">
+<div style="width: 50%">
+test
+</div>
+<div style="width: 50%">
+testing testing testing testing testing testing testing testing
diff --git a/test/layout/flex-width-children-overconstrained.expected b/test/layout/flex-width-children-overconstrained.expected
new file mode 100644
index 00000000..10302e6f
--- /dev/null
+++ b/test/layout/flex-width-children-overconstrained.expected
@@ -0,0 +1,3 @@
+something       second second
+something       second
+something
diff --git a/test/layout/flex-width-children-overconstrained.html b/test/layout/flex-width-children-overconstrained.html
new file mode 100644
index 00000000..d9b86b31
--- /dev/null
+++ b/test/layout/flex-width-children-overconstrained.html
@@ -0,0 +1,6 @@
+<div style="display:flex">
+<div style="width:25%">something something something</div>
+<div style="width:25%">second second second</div>
+<div style="width:25%"></div>
+<div style="width:25%"></div>
+<div style="width:25%"></div>
diff --git a/test/layout/flexbox-simple-flex-grow-and-height.color.expected b/test/layout/flexbox-simple-flex-grow-and-height.color.expected
new file mode 100644
index 00000000..f8a29147
--- /dev/null
+++ b/test/layout/flexbox-simple-flex-grow-and-height.color.expected
@@ -0,0 +1,12 @@
+test 1000000000000                                          test 3              
+                                                                                
+                                                                                
+                                                                                
+                                                                                
+                                                                                
+                                                                                
+                                                                                
+                                                                                
+                                                                                
+                                                                                
+
diff --git a/test/layout/flexbox-simple-flex-grow-and-height.html b/test/layout/flexbox-simple-flex-grow-and-height.html
new file mode 100644
index 00000000..f286271e
--- /dev/null
+++ b/test/layout/flexbox-simple-flex-grow-and-height.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<div style="display: flex">
+<div style="flex-grow: 2; height:200px"><div style="background-color: red">test 1000000000000</div></div>
+<div style="flex-grow: 1; height: 100px;background-color: green; display: flex"></div>
+<div style="flex-grow: 1; background-color: pink">test 3</div>
diff --git a/test/layout/flexbox-with-ul.expected b/test/layout/flexbox-with-ul.expected
new file mode 100644
index 00000000..cba3b994
--- /dev/null
+++ b/test/layout/flexbox-with-ul.expected
@@ -0,0 +1,2 @@
+                                                                            test
+  • test
diff --git a/test/layout/flexbox-with-ul.html b/test/layout/flexbox-with-ul.html
new file mode 100644
index 00000000..bd367eec
--- /dev/null
+++ b/test/layout/flexbox-with-ul.html
@@ -0,0 +1,6 @@
+<nav style="display: flex;">
+<ul style="flex-grow: 1">
+<li>test
+</ul>
+<div class="login">
+test
diff --git a/test/layout/float-with-left-padding.expected b/test/layout/float-with-left-padding.expected
new file mode 100644
index 00000000..a8022699
--- /dev/null
+++ b/test/layout/float-with-left-padding.expected
@@ -0,0 +1 @@
+                                                                             wat
diff --git a/test/layout/float-with-left-padding.html b/test/layout/float-with-left-padding.html
new file mode 100644
index 00000000..613d9e11
--- /dev/null
+++ b/test/layout/float-with-left-padding.html
@@ -0,0 +1,3 @@
+<div style="padding-left: 10em">
+<div style="float: right">
+wat
diff --git a/test/layout/float_negative_margin.expected b/test/layout/float_negative_margin.expected
new file mode 100644
index 00000000..0b4af186
--- /dev/null
+++ b/test/layout/float_negative_margin.expected
@@ -0,0 +1 @@
+testing               aside
diff --git a/test/layout/float_negative_margin.html b/test/layout/float_negative_margin.html
new file mode 100644
index 00000000..70dcfa0c
--- /dev/null
+++ b/test/layout/float_negative_margin.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="width: 200px">
+<div style="float: left; width: 200px">
+testing
+</div>
+<aside style="float: left;margin-right: -100px;">
+aside
+</aside>
+</div>
+</body>
+</html>
diff --git a/test/layout/float_resolve_parent.color.expected b/test/layout/float_resolve_parent.color.expected
new file mode 100644
index 00000000..387747d5
--- /dev/null
+++ b/test/layout/float_resolve_parent.color.expected
@@ -0,0 +1,13 @@
+
+                                                                                
+                                                                                
+                                                                                
+                                                                                
+                                                                                
+                                                                                
+                                                                                
+                                                                                
+                                                                                
+                                                                                
+this is line 1. this is line 2. this is line 3. this is line 4. this is line 5.
+this is line 6. this is line 7. this is line 8. this is line 9. this is line 10.
diff --git a/test/layout/float_resolve_parent.html b/test/layout/float_resolve_parent.html
new file mode 100644
index 00000000..4ff9a931
--- /dev/null
+++ b/test/layout/float_resolve_parent.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<style>
+
+* {
+  font-family: monospace,monospace;
+  line-height: 1em;
+  font-size: 15px
+}
+</style>
+<script>
+window.onload = function() {
+document.getElementById("test").innerHTML = "test"
+console.log(document.querySelector("html").outerHTML);
+}
+/*
+(function(view) {
+	"use strict";
+	view.Intl = view.webkitURL || view.Intl;
+}(window))
+*/
+</script>
+<div style="display: flow-root">
+<div>
+<div style="float: left; width: 100%; height: 10em; background-color: red"></div>
+<div style="margin-top: 1em">
+this is line 1.
+this is line 2.
+this is line 3.
+this is line 4.
+this is line 5.
+this is line 6.
+this is line 7.
+this is line 8.
+this is line 9.
+this is line 10.
+</pre>
diff --git a/test/layout/hangul.expected b/test/layout/hangul.expected
new file mode 100644
index 00000000..2e10afce
--- /dev/null
+++ b/test/layout/hangul.expected
@@ -0,0 +1,8 @@
+
+The following two paragraphs should contain the same hangul letters.
+
+Decomposed form:
+수학
+
+Normal form:
+수학
diff --git a/test/layout/hangul.html b/test/layout/hangul.html
new file mode 100644
index 00000000..4d9571a3
--- /dev/null
+++ b/test/layout/hangul.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<p>
+The following two paragraphs should contain the same hangul letters.
+<p>
+Decomposed form:<br>
+수학
+<p>
+Normal form:<br>
+수학
diff --git a/test/layout/inline-backgrounds.color.expected b/test/layout/inline-backgrounds.color.expected
new file mode 100644
index 00000000..f93a6898
--- /dev/null
+++ b/test/layout/inline-backgrounds.color.expected
@@ -0,0 +1,30 @@
+
+
+                                    testing
+                              test test test test
+                                                 
+                                    new line
+
+                                    new line
+                                    new line
+                             donenow another thing
+
+
+but
+
+                              this works: testing
+
+
+
+                           test test test test thing
+final stage
+
+
+                                    testing
+                              test test test test
+                                                 
+                                    new line
+                                    new line
+                                    new line
+                             donenow another thing
+
diff --git a/test/layout/inline-backgrounds.html b/test/layout/inline-backgrounds.html
new file mode 100644
index 00000000..27519bd5
--- /dev/null
+++ b/test/layout/inline-backgrounds.html
@@ -0,0 +1,33 @@
+<pre style="width: 100%; text-align: center">
+<span style="background-color: red">
+<span style="text-align: center">testing</span>
+test test test <span style="display: inline-block; margin-top: -2em">test</span>
+new line
+
+new line
+new line
+done</span>now another thing
+</span>
+</pre>
+but
+<div style="width: 100%; text-align: center">
+<br>
+<span style="background-color: red">
+this works: <span style="text-align: center">testing</span>
+<br>
+<br>
+<br>
+<br>
+test test test <span style="display: inline-block">test</span> thing
+</div>
+final stage
+<pre style="width: 100%; text-align: center">
+<span style="background-color: red">
+<span style="text-align: center">testing</span>
+test test test <span style="display: inline-block; margin-top: -2em">test</span>
+new line
+new line
+new line
+done</span>now another thing
+</span>
+</pre>
diff --git a/test/layout/inline_split_sizes.color.expected b/test/layout/inline_split_sizes.color.expected
new file mode 100644
index 00000000..dafbf438
--- /dev/null
+++ b/test/layout/inline_split_sizes.color.expected
@@ -0,0 +1,9 @@
+        
+before t
+
+carthago delenda
+             
+          est
+     
+hello after
+
diff --git a/test/layout/inline_split_sizes.html b/test/layout/inline_split_sizes.html
new file mode 100644
index 00000000..df50dca5
--- /dev/null
+++ b/test/layout/inline_split_sizes.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+before <span style="background-color: red; line-height: 2em"> t<br>
+<div>carthago delenda</div>
+<span style="padding-left: 5em; line-height: 2em"></span><span>est</span><br>
+hello</span> after
diff --git a/test/layout/list_style_type.html.disabled b/test/layout/list_style_type.html.disabled
new file mode 100644
index 00000000..0e7a959a
--- /dev/null
+++ b/test/layout/list_style_type.html.disabled
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<HTML>
+<HEAD>
+<TITLE>List style types</TITLE>
+</HEAD>
+<BODY>
+<blockquote>
+<ul type="circle">
+<!-- TODO value= appears to be broken :/ -->
+<LI value=-1>-1
+<LI value=0>0
+<LI>1
+<LI>2
+<LI>3
+<LI>4
+<LI>5
+<LI>6
+<LI>7
+<LI>8
+<LI>9
+<LI>10
+<LI>12
+<LI>13
+<LI>14
+<LI>15
+<LI>16
+<LI>17
+<LI>18
+<LI>19
+<LI>20
+<LI>21
+<LI>22
+<LI>23
+<LI>24
+<LI>25
+<LI>26
+<LI>27
+<LI>28
+<LI>29
+<LI>30
+<LI>30
+<LI>30
+<LI>30
+<LI>31
+<LI>32
+<LI>33
+<LI>34
+<LI>35
+<LI>36
+<LI>37
+<LI>38
+<LI>39
+<LI>40
+<LI>41
+<LI>42
+<LI>43
+<LI>44
+<LI>45
+<LI>46
+</OL>
+</BODY>
+</HTML>
diff --git a/test/layout/margin.expected b/test/layout/margin.expected
new file mode 100644
index 00000000..73eaa60e
--- /dev/null
+++ b/test/layout/margin.expected
@@ -0,0 +1,10 @@
+spacer
+
+  left, right: 2em
+  top, bottom: 1em.
+
+
+spacer
+                                             width: 10em
+                                             left, right: auto
+                                             top, bottom: 0
diff --git a/test/layout/margin.html b/test/layout/margin.html
new file mode 100644
index 00000000..d055f865
--- /dev/null
+++ b/test/layout/margin.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<style>
+.claz {
+	margin: 1em 2em 1em;
+}
+.one {
+	margin: 0 auto;
+        width: 10em;
+}
+#a {
+	margin: 1em;
+}
+</style>
+<div style="width: 1000px">
+spacer
+<div class=claz>left, right: 2em<br>top, bottom: 1em.</div>
+spacer
+<div class="clazz one">width: 10em<br>left, right: auto<br>top, bottom: 0</div>
+</div>
diff --git a/test/layout/margins.expected b/test/layout/margins.expected
new file mode 100644
index 00000000..427ec986
--- /dev/null
+++ b/test/layout/margins.expected
@@ -0,0 +1,9 @@
+wtf?
+
+
+hi from right
+
+
+  hi from
+  left
+hi in center
diff --git a/test/layout/margins.html b/test/layout/margins.html
new file mode 100644
index 00000000..415dc592
--- /dev/null
+++ b/test/layout/margins.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<style>
+
+* {
+  font-family: monospace,monospace
+}
+</style>
+<div style="display: inline-block; width: 15ch">
+<div style="margin-bottom: 2ch;">wtf?</div>
+<div style="display: flow-root; margin-top: 4ch">hi from right</div>
+<div style="margin-left: 2ch; margin-right: 2ch; margin-top: 4ch">
+<div style="display: flow-root">hi from left</div>
+</div>
+<div>
+hi in center
+</div>
+</div>
diff --git a/test/layout/margins_float.expected b/test/layout/margins_float.expected
new file mode 100644
index 00000000..2e9f7131
--- /dev/null
+++ b/test/layout/margins_float.expected
@@ -0,0 +1,8 @@
+wtf?
+
+
+hi
+inhi from right
+  hi from
+  left
+center
diff --git a/test/layout/margins_float.html b/test/layout/margins_float.html
new file mode 100644
index 00000000..1ac7bc94
--- /dev/null
+++ b/test/layout/margins_float.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+
+* {
+  font-family: monospace,monospace;
+  line-height: 1em;
+  font-size: 18px
+}
+</style>
+<div style="display: inline-block; width: 15ch">
+<div style="margin-bottom: 1em;">wtf?</div>
+<div style="float: right; margin-top: 2em">hi from right</div>
+<div style="margin-left: 2ch; margin-right: 2ch; margin-top: 2em">
+<div style="float: left">
+<div style="display: inline-block">hi from left</div>
+</div>
+<!--<div style="margin-top: 5em">ok</div>-->
+</div>
+<div>
+hi in center
+</div>
+</div>
diff --git a/test/layout/margins_float2.expected b/test/layout/margins_float2.expected
new file mode 100644
index 00000000..70a3c5da
--- /dev/null
+++ b/test/layout/margins_float2.expected
@@ -0,0 +1,3 @@
+
+
+test                                         float
diff --git a/test/layout/margins_float2.html b/test/layout/margins_float2.html
new file mode 100644
index 00000000..ca340bf6
--- /dev/null
+++ b/test/layout/margins_float2.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<div style="display: inline-block; width: 50ch">
+<div>
+<div id=empty style="margin-top: 1em">
+<div style="float: right">float</div>
+</div>
+<div id=full style="margin-top: 2em">
+test
+</div>
+</div>
+</div>
diff --git a/test/layout/margins_float2_1.expected b/test/layout/margins_float2_1.expected
new file mode 100644
index 00000000..dfca7780
--- /dev/null
+++ b/test/layout/margins_float2_1.expected
@@ -0,0 +1,3 @@
+
+                                             float
+test
diff --git a/test/layout/margins_float2_1.html b/test/layout/margins_float2_1.html
new file mode 100644
index 00000000..57920421
--- /dev/null
+++ b/test/layout/margins_float2_1.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<div style="display: inline-block; width: 50ch">
+<div id=empty style="margin-top: 1em">
+<div style="float: right">float</div>
+</div>
+<div id=full style="margin-top: 2em">
+test
+</div>
+</div>
diff --git a/test/layout/min-max-width.color.expected b/test/layout/min-max-width.color.expected
new file mode 100644
index 00000000..d6a0a72e
--- /dev/null
+++ b/test/layout/min-max-width.color.expected
@@ -0,0 +1,33 @@
+This
+box
+should
+have
+a 
+2ch
+wide
+blue
+background
+and
+should
+wrap
+on
+every
+word.
+x This text should be displayed after a 2ch wide red box.
+This
+text
+should
+have
+a 
+2ch
+wide
+green
+background
+and
+should
+wrap
+on
+every
+word.
+II 
+
diff --git a/test/layout/min-max-width.html b/test/layout/min-max-width.html
new file mode 100644
index 00000000..c76a9b13
--- /dev/null
+++ b/test/layout/min-max-width.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<style>
+#one {
+	width: 10ch;
+	max-width: 2ch;
+	background-color: blue;
+}
+#two {
+	width: 10ch;
+	max-width: 2ch;
+	background-color: red;
+	display: inline-block;
+}
+#three {
+	width: 10ch;
+	max-width: 2ch;
+	background-color: green;
+	display: block;
+}
+#four {
+	width: fit-content(5ch);
+	background-color: purple;
+	max-width: 3ch;
+}
+</style>
+<div id=one>
+	<span><span>This box should have a 2ch wide blue background and should wrap on every word.</span></span>
+</div>
+<div id=two>x</div>This text should be displayed after a 2ch wide red box.
+<div id=three><div>This text should have a 2ch wide green background and should wrap on every word.</div></div>
+<div id=four>II</div>
diff --git a/test/layout/nested-floats-simple.expected b/test/layout/nested-floats-simple.expected
new file mode 100644
index 00000000..cea792ad
--- /dev/null
+++ b/test/layout/nested-floats-simple.expected
@@ -0,0 +1 @@
+                                                                     onethreetwo
diff --git a/test/layout/nested-floats-simple.html b/test/layout/nested-floats-simple.html
new file mode 100644
index 00000000..be6d976d
--- /dev/null
+++ b/test/layout/nested-floats-simple.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<div style="float: right">
+<div style="float: left">one</div>
+<div style="float: right">two</div>
+<div style="float: right">three</div>
diff --git a/test/layout/run_layout_tests.sh b/test/layout/run_layout_tests.sh
new file mode 100755
index 00000000..03c9c818
--- /dev/null
+++ b/test/layout/run_layout_tests.sh
@@ -0,0 +1,23 @@
+#!/bin/sh
+if test -z "$CHA_TEST_BIN"
+then	test -f ../../../cha && CHA_TEST_BIN=../../../cha || CHA_TEST_BIN=cha
+fi
+failed=0
+for h in *.html
+do	printf '%s\n' "$h"
+	expected="$(basename "$h" .html).expected"
+	color_expected="$(basename "$h" .html).color.expected"
+	if test -f "$expected"
+	then	if ! "$CHA_TEST_BIN" -C config.toml "$h" | diff "$expected" -
+		then	failed=$(($failed+1))
+			printf 'FAIL: %s\n' "$h"
+		fi
+	elif test -f "$color_expected"
+	then	if ! "$CHA_TEST_BIN" -C config.color.toml "$h" | diff "$color_expected" -
+		then	failed=$(($failed+1))
+			printf 'FAIL: %s\n' "$h"
+		fi
+	else	printf 'WARNING: expected file not found for %s\n' "$h"
+	fi
+done
+exit "$failed"
diff --git a/test/layout/table-rowspan.expected b/test/layout/table-rowspan.expected
new file mode 100644
index 00000000..1cf730fb
--- /dev/null
+++ b/test/layout/table-rowspan.expected
@@ -0,0 +1,3 @@
+ row 1, cell 1                               row 1, cell 3
+ row 2, cell 1 rowspan 3 (centered on row 2) row 2, cell 3
+ row 3, cell 1                               row 3, cell 3
diff --git a/test/layout/table-rowspan.html b/test/layout/table-rowspan.html
new file mode 100644
index 00000000..60720a1f
--- /dev/null
+++ b/test/layout/table-rowspan.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<TABLE>
+<TR>
+<TD>
+row 1, cell 1
+</TD>
+<TD ROWSPAN=3>
+rowspan 3 (centered on row 2)
+</TD>
+<TD>
+row 1, cell 3
+</TD>
+</TR>
+<TR>
+<TD>
+row 2, cell 1
+</TD>
+<TD>
+row 2, cell 3
+</TD>
+</TR>
+<TR>
+<TD>
+row 3, cell 1
+</TD>
+<TD>
+row 3, cell 3
+</TD>
+</TR>
+</TABLE>
diff --git a/test/layout/table.color.expected b/test/layout/table.color.expected
new file mode 100644
index 00000000..532766bb
--- /dev/null
+++ b/test/layout/table.color.expected
@@ -0,0 +1,10 @@
+                                    caption
+                                     lorem ipsum dolor sit amet, consectetur   
+ one two                             adipiscing elit, sed do eiusmod tempor    
+ three                               incididunt ut labore et dolore magna      
+ four five                       c d aliqua いろはにほへとちりぬるをわかよたれ 
+ six seven                           そつ one two three four five six seven    
+ eight                               eight nine ten elevenn twelve thirteen    
+                                     fourteen sixteen seventeen eighteen       
+           internationalization      nineteen                                  
+aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
diff --git a/test/layout/table.html b/test/layout/table.html
new file mode 100644
index 00000000..8f409e79
--- /dev/null
+++ b/test/layout/table.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<style>
+* {
+	font-family: monospace, monospace
+}
+table {
+	border-spacing: 0.5ch 0
+}
+</style>
+<table style="background-color: blue">
+  <caption>
+    caption
+  </caption>
+  <tbody>
+  <tr>
+    <td style="background-color: red">
+      one two three four five six seven eight
+    </td>
+    <td colspan=2 style="vertical-align: bottom" valign=top>
+      internationalization
+    </td>
+    <td>
+      c
+    </td>
+    <td>
+      d
+    </td>
+    <td valign=bottom>
+      lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua
+      いろはにほへとちりぬるをわかよたれそつ one two three
+      four five six seven eight nine ten elevenn twelve thirteen fourteen
+      sixteen seventeen eighteen nineteen
+    </td>
+  </tr>
+  </tbody>
+</table>
+aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
diff --git a/test/layout/tabs.color.expected b/test/layout/tabs.color.expected
new file mode 100644
index 00000000..3d08349c
--- /dev/null
+++ b/test/layout/tabs.color.expected
@@ -0,0 +1,6 @@
+
+x       y                                                                       
+x       y                                                                       
+x       y                                                                       
+^ The above rows should be aligned                                              
+
diff --git a/test/layout/tabs.html b/test/layout/tabs.html
new file mode 100644
index 00000000..509a656c
--- /dev/null
+++ b/test/layout/tabs.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<pre style="background-color: red">
+x	y
+x    	y
+x       y
+^ The above rows should be aligned
+</pre>