summaryrefslogtreecommitdiffstats
path: root/layout/reftests/text-indent
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/text-indent')
-rw-r--r--layout/reftests/text-indent/dynamic-change-with-overflow-1-ref.html6
-rw-r--r--layout/reftests/text-indent/dynamic-change-with-overflow-1.html16
-rw-r--r--layout/reftests/text-indent/reftest.list20
-rw-r--r--layout/reftests/text-indent/text-indent-intrinsic-min-ref.html36
-rw-r--r--layout/reftests/text-indent/text-indent-intrinsic-min.html48
-rw-r--r--layout/reftests/text-indent/text-indent-intrinsic-pref-ref.html36
-rw-r--r--layout/reftests/text-indent/text-indent-intrinsic-pref.html48
-rw-r--r--layout/reftests/text-indent/text-indent-multiple-line-notref-block-margin.html16
-rw-r--r--layout/reftests/text-indent/text-indent-multiple-line-ref-float.html16
-rw-r--r--layout/reftests/text-indent/text-indent-multiple-line-ref-inline-margin.html15
-rw-r--r--layout/reftests/text-indent/text-indent-multiple-line.html16
-rw-r--r--layout/reftests/text-indent/text-indent-negative-intrinsic-min-ref.html30
-rw-r--r--layout/reftests/text-indent/text-indent-negative-intrinsic-min.html43
-rw-r--r--layout/reftests/text-indent/text-indent-negative-intrinsic-pref-ref.html30
-rw-r--r--layout/reftests/text-indent/text-indent-negative-intrinsic-pref.html43
-rw-r--r--layout/reftests/text-indent/text-indent-parent-dynamic-ref.html10
-rw-r--r--layout/reftests/text-indent/text-indent-parent-dynamic.html15
-rw-r--r--layout/reftests/text-indent/text-indent-single-line-0.html15
-rw-r--r--layout/reftests/text-indent/text-indent-single-line-100.html15
-rw-r--r--layout/reftests/text-indent/text-indent-single-line-indent-inline-ref-block-margin.html16
-rw-r--r--layout/reftests/text-indent/text-indent-single-line-indent-inline-ref-inline-margin.html15
-rw-r--r--layout/reftests/text-indent/text-indent-single-line-indent-inline.html16
-rw-r--r--layout/reftests/text-indent/text-indent-single-line-percent-ref.html14
-rw-r--r--layout/reftests/text-indent/text-indent-single-line-percent.html18
-rw-r--r--layout/reftests/text-indent/text-indent-single-line-ref-margin.html15
-rw-r--r--layout/reftests/text-indent/text-indent-single-line-ref-unstyled.html14
26 files changed, 582 insertions, 0 deletions
diff --git a/layout/reftests/text-indent/dynamic-change-with-overflow-1-ref.html b/layout/reftests/text-indent/dynamic-change-with-overflow-1-ref.html
new file mode 100644
index 0000000000..8de8673c25
--- /dev/null
+++ b/layout/reftests/text-indent/dynamic-change-with-overflow-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <div style="overflow: hidden; text-indent: 50px">
+ Some text.
+ </div>
+</html>
diff --git a/layout/reftests/text-indent/dynamic-change-with-overflow-1.html b/layout/reftests/text-indent/dynamic-change-with-overflow-1.html
new file mode 100644
index 0000000000..97d6c69f70
--- /dev/null
+++ b/layout/reftests/text-indent/dynamic-change-with-overflow-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <div style="overflow: hidden;">
+ Some text.
+ </div>
+
+ <script>
+ onload = function() {
+ var div = document.querySelector("div");
+ // Make sure layout has happened.
+ window.width = div.offsetWidth;
+ div.style.textIndent = "50px";
+ document.documentElement.className = "";
+ }
+ </script>
+</html>
diff --git a/layout/reftests/text-indent/reftest.list b/layout/reftests/text-indent/reftest.list
new file mode 100644
index 0000000000..2a9cfed416
--- /dev/null
+++ b/layout/reftests/text-indent/reftest.list
@@ -0,0 +1,20 @@
+# XXX Need to repeat these tests for RTL. (Note that != tests can't use
+# same file.)
+
+# Also need to test intrinsic widths (bug 368155).
+
+!= text-indent-single-line-100.html text-indent-single-line-0.html
+== text-indent-single-line-100.html text-indent-single-line-ref-margin.html
+== text-indent-single-line-0.html text-indent-single-line-ref-unstyled.html
+== text-indent-single-line-percent.html text-indent-single-line-percent-ref.html
+== text-indent-single-line-indent-inline.html text-indent-single-line-indent-inline-ref-block-margin.html
+== text-indent-single-line-indent-inline.html text-indent-single-line-indent-inline-ref-inline-margin.html
+== text-indent-multiple-line.html text-indent-multiple-line-ref-inline-margin.html
+== text-indent-multiple-line.html text-indent-multiple-line-ref-float.html
+!= text-indent-multiple-line.html text-indent-multiple-line-notref-block-margin.html
+== text-indent-intrinsic-pref.html text-indent-intrinsic-pref-ref.html
+== text-indent-intrinsic-min.html text-indent-intrinsic-min-ref.html
+== text-indent-negative-intrinsic-pref.html text-indent-negative-intrinsic-pref-ref.html
+== text-indent-negative-intrinsic-min.html text-indent-negative-intrinsic-min-ref.html
+== text-indent-parent-dynamic.html text-indent-parent-dynamic-ref.html
+== dynamic-change-with-overflow-1.html dynamic-change-with-overflow-1-ref.html
diff --git a/layout/reftests/text-indent/text-indent-intrinsic-min-ref.html b/layout/reftests/text-indent/text-indent-intrinsic-min-ref.html
new file mode 100644
index 0000000000..8fb6f977e7
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-intrinsic-min-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test for intrinsic widths and text-indent</title>
+<style type="text/css">
+
+body { font-size: 12px; }
+
+body > div, body > pre {
+ float: left; clear: left; margin: 1px; height: 2em;
+ border: medium solid;
+}
+
+</style>
+</head>
+<body>
+
+<!-- test against inline margin -->
+<div><span style="margin-left: 3em">X</span></div>
+
+<!-- test against block padding -->
+<div style="padding-left: 3em;">X</div>
+
+<!-- test against block width -->
+<div style="width: 4em;"></div>
+
+<div style="width: 4em;"></div>
+<div style="width: 4em;"></div>
+<div style="width: 6em;"></div>
+<div style="width: 4em;"></div>
+<div style="width: 6em;"></div>
+<div style="width: 4em;"></div>
+<div style="width: 6em;"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-intrinsic-min.html b/layout/reftests/text-indent/text-indent-intrinsic-min.html
new file mode 100644
index 0000000000..1672b9778b
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-intrinsic-min.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>CSS 2.1 Test Suite: Test for intrinsic widths and text-indent</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+
+body { font-size: 12px; width: 1px; }
+
+body > div, body > pre {
+ float: left; clear: left; margin: 1px; height: 2em;
+ border: medium solid;
+}
+
+span {
+ display: inline-block;
+ height: 1em;
+ width: 1em;
+}
+
+</style>
+</head>
+<body>
+
+<!-- test against inline margin -->
+<div style="text-indent: 3em;">X</div>
+
+<!-- test against block padding -->
+<div style="text-indent: 3em;">X</div>
+
+<!-- test against block width -->
+<div style="text-indent: 3em;"><span></span></div>
+
+<div style="text-indent: 3em"><span style="width: 1em"></span></div>
+<div style="text-indent: 3em"><span style="width: 1em"></span>&#x200b;<span style="width: 2em"></span></div>
+<div style="text-indent: 3em"><span style="width: 1em"></span>&#x200b;<span style="width: 6em"></span></div>
+<div style="text-indent: 3em"><span style="width: 1em"></span><br><span style="width: 2em"></span></div>
+<div style="text-indent: 3em"><span style="width: 1em"></span><br><span style="width: 6em"></span></div>
+<pre style="text-indent: 3em"><span style="width: 1em"></span>
+<span style="width: 2em"></span></pre>
+<pre style="text-indent: 3em"><span style="width: 1em"></span>
+<span style="width: 6em"></span></pre>
+
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-intrinsic-pref-ref.html b/layout/reftests/text-indent/text-indent-intrinsic-pref-ref.html
new file mode 100644
index 0000000000..e31a87e7f6
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-intrinsic-pref-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test for intrinsic widths and text-indent</title>
+<style type="text/css">
+
+body { font-size: 12px; }
+
+body > div, body > pre {
+ float: left; clear: left; margin: 1px; height: 2em;
+ border: medium solid;
+}
+
+</style>
+</head>
+<body>
+
+<!-- test against inline margin -->
+<div><span style="margin-left: 3em">X</span></div>
+
+<!-- test against block padding -->
+<div style="padding-left: 3em;">X</div>
+
+<!-- test against block width -->
+<div style="width: 4em;"></div>
+
+<div style="width: 4em;"></div>
+<div style="width: 6em;"></div>
+<div style="width: 10em;"></div>
+<div style="width: 4em;"></div>
+<div style="width: 6em;"></div>
+<div style="width: 4em;"></div>
+<div style="width: 6em;"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-intrinsic-pref.html b/layout/reftests/text-indent/text-indent-intrinsic-pref.html
new file mode 100644
index 0000000000..7f90ed4fbc
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-intrinsic-pref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>CSS 2.1 Test Suite: Test for intrinsic widths and text-indent</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+
+body { font-size: 12px; }
+
+body > div, body > pre {
+ float: left; clear: left; margin: 1px; height: 2em;
+ border: medium solid;
+}
+
+span {
+ display: inline-block;
+ height: 1em;
+ width: 1em;
+}
+
+</style>
+</head>
+<body>
+
+<!-- test against inline margin -->
+<div style="text-indent: 3em;">X</div>
+
+<!-- test against block padding -->
+<div style="text-indent: 3em;">X</div>
+
+<!-- test against block width -->
+<div style="text-indent: 3em;"><span></span></div>
+
+<div style="text-indent: 3em"><span style="width: 1em"></span></div>
+<div style="text-indent: 3em"><span style="width: 1em"></span>&#x200b;<span style="width: 2em"></span></div>
+<div style="text-indent: 3em"><span style="width: 1em"></span>&#x200b;<span style="width: 6em"></span></div>
+<div style="text-indent: 3em"><span style="width: 1em"></span><br><span style="width: 2em"></span></div>
+<div style="text-indent: 3em"><span style="width: 1em"></span><br><span style="width: 6em"></span></div>
+<pre style="text-indent: 3em"><span style="width: 1em"></span>
+<span style="width: 2em"></span></pre>
+<pre style="text-indent: 3em"><span style="width: 1em"></span>
+<span style="width: 6em"></span></pre>
+
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-multiple-line-notref-block-margin.html b/layout/reftests/text-indent/text-indent-multiple-line-notref-block-margin.html
new file mode 100644
index 0000000000..6ab611947d
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-multiple-line-notref-block-margin.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<head>
+<title>CSS 2.1 Test Suite: text-indent test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+p { margin-left: 100px }
+span { background: yellow }
+</style>
+</head>
+<body>
+<p><span>This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines.</span></p>
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-multiple-line-ref-float.html b/layout/reftests/text-indent/text-indent-multiple-line-ref-float.html
new file mode 100644
index 0000000000..1166653475
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-multiple-line-ref-float.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<head>
+<title>CSS 2.1 Test Suite: text-indent test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+i { float: left; height: 0.3em; width: 100px; }
+span { background: yellow }
+</style>
+</head>
+<body>
+<p><i></i><span>This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines.</span></p>
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-multiple-line-ref-inline-margin.html b/layout/reftests/text-indent/text-indent-multiple-line-ref-inline-margin.html
new file mode 100644
index 0000000000..a2c2634f61
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-multiple-line-ref-inline-margin.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<head>
+<title>CSS 2.1 Test Suite: text-indent test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+span { background: yellow; margin-left: 100px }
+</style>
+</head>
+<body>
+<p><span>This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines.</span></p>
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-multiple-line.html b/layout/reftests/text-indent/text-indent-multiple-line.html
new file mode 100644
index 0000000000..faac92a3e2
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-multiple-line.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<head>
+<title>CSS 2.1 Test Suite: text-indent test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+p { text-indent: 100px }
+span { background: yellow }
+</style>
+</head>
+<body>
+<p><span>This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines.</span></p>
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-negative-intrinsic-min-ref.html b/layout/reftests/text-indent/text-indent-negative-intrinsic-min-ref.html
new file mode 100644
index 0000000000..b5bd6204ce
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-negative-intrinsic-min-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test for intrinsic widths and text-indent</title>
+<style type="text/css">
+
+body { font-size: 12px; }
+
+body > div, body > pre {
+ float: left; clear: left; margin: 1px; height: 2em;
+ border: medium solid;
+}
+
+</style>
+</head>
+<body>
+
+<div style="width: 0"></div>
+<div style="width: 2em"></div>
+<div style="width: 0"></div>
+<div style="width: 1em"></div>
+<div style="width: 3em"></div>
+<div style="width: 3em"></div>
+<div style="width: 1em"></div>
+<div style="width: 2em"></div>
+<div style="width: 5em"></div>
+<div style="width: 2em"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-negative-intrinsic-min.html b/layout/reftests/text-indent/text-indent-negative-intrinsic-min.html
new file mode 100644
index 0000000000..7139987bef
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-negative-intrinsic-min.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>CSS 2.1 Test Suite: Test for intrinsic widths and negative text-indent</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+
+body { font-size: 12px; }
+
+body > div, body > pre {
+ float: left; clear: left; margin: 1px; height: 2em;
+ border: medium solid;
+}
+
+span {
+ display: inline-block;
+ height: 1em;
+ width: 1em;
+}
+
+</style>
+</head>
+<body style="width: 1px">
+
+<div style="text-indent: -3em;"><span style="width: 1em"></span></div>
+<div style="text-indent: -3em;"><span style="width: 5em"></span></div>
+
+<div style="text-indent: -3em;"><span style="width: 1em"></span>&#x200b;<span style="width: 1em"></span></div>
+<div style="text-indent: -3em;"><span style="width: 1em"></span>&#x200b;<span style="width: 3em"></span></div>
+<div style="text-indent: -3em;"><span style="width: 1em"></span>&#x200b;<span style="width: 3em"></span>&#x200b;<span style="width: 3em"></span></div>
+<div style="text-indent: -3em;"><span style="width: 4em"></span>&#x200b;<span style="width: 3em"></span></div>
+<div style="text-indent: -3em;"><span style="width: 1em"></span><br><span style="width: 1em"></span></div>
+<div style="text-indent: -3em;"><span style="width: 5em"></span><br><span style="width: 1em"></span></div>
+<pre style="text-indent: -3em"><span style="width: 1em"></span>
+<span style="width: 5em"></span></pre>
+<pre style="text-indent: -3em"><span style="width: 5em"></span>
+<span style="width: 1em"></span></pre>
+
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-negative-intrinsic-pref-ref.html b/layout/reftests/text-indent/text-indent-negative-intrinsic-pref-ref.html
new file mode 100644
index 0000000000..b8f26095ed
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-negative-intrinsic-pref-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test for intrinsic widths and text-indent</title>
+<style type="text/css">
+
+body { font-size: 12px; }
+
+body > div, body > pre {
+ float: left; clear: left; margin: 1px; height: 2em;
+ border: medium solid;
+}
+
+</style>
+</head>
+<body>
+
+<div style="width: 0"></div>
+<div style="width: 2em"></div>
+<div style="width: 0"></div>
+<div style="width: 1em"></div>
+<div style="width: 4em"></div>
+<div style="width: 4em"></div>
+<div style="width: 1em"></div>
+<div style="width: 2em"></div>
+<div style="width: 5em"></div>
+<div style="width: 2em"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-negative-intrinsic-pref.html b/layout/reftests/text-indent/text-indent-negative-intrinsic-pref.html
new file mode 100644
index 0000000000..d9f8e12f26
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-negative-intrinsic-pref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>CSS 2.1 Test Suite: Test for intrinsic widths and negative text-indent</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+
+body { font-size: 12px; }
+
+body > div, body > pre {
+ float: left; clear: left; margin: 1px; height: 2em;
+ border: medium solid;
+}
+
+span {
+ display: inline-block;
+ height: 1em;
+ width: 1em;
+}
+
+</style>
+</head>
+<body>
+
+<div style="text-indent: -3em;"><span style="width: 1em"></span></div>
+<div style="text-indent: -3em;"><span style="width: 5em"></span></div>
+
+<div style="text-indent: -3em;"><span style="width: 1em"></span>&#x200b;<span style="width: 1em"></span></div>
+<div style="text-indent: -3em;"><span style="width: 1em"></span>&#x200b;<span style="width: 3em"></span></div>
+<div style="text-indent: -3em;"><span style="width: 1em"></span>&#x200b;<span style="width: 3em"></span>&#x200b;<span style="width: 3em"></span></div>
+<div style="text-indent: -3em;"><span style="width: 4em"></span>&#x200b;<span style="width: 3em"></span></div>
+<div style="text-indent: -3em;"><span style="width: 1em"></span><br><span style="width: 1em"></span></div>
+<div style="text-indent: -3em;"><span style="width: 5em"></span><br><span style="width: 1em"></span></div>
+<pre style="text-indent: -3em"><span style="width: 1em"></span>
+<span style="width: 5em"></span></pre>
+<pre style="text-indent: -3em"><span style="width: 5em"></span>
+<span style="width: 1em"></span></pre>
+
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-parent-dynamic-ref.html b/layout/reftests/text-indent/text-indent-parent-dynamic-ref.html
new file mode 100644
index 0000000000..8109f19e59
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-parent-dynamic-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<div id="x" style="background: lightgreen; height: 3em; width: 500px; padding: 4px;">
+ <div style="text-indent: 80px; width: 200px; background: yellow;">X</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-parent-dynamic.html b/layout/reftests/text-indent/text-indent-parent-dynamic.html
new file mode 100644
index 0000000000..2bc8767d23
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-parent-dynamic.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<div id="x" style="background: lightgreen; height: 3em; width: 400px; padding: 4px;">
+ <div style="text-indent: 40%; width: 200px; background: yellow;">X</div>
+</div>
+
+<script>
+var x = document.getElementById('x');
+x.offsetWidth;
+x.style.width = '500px';
+</script>
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-single-line-0.html b/layout/reftests/text-indent/text-indent-single-line-0.html
new file mode 100644
index 0000000000..0cb6ab4d4d
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-single-line-0.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<head>
+<title>CSS 2.1 Test Suite: text-indent test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+p { text-indent: 0px }
+</style>
+</head>
+<body>
+<p>text</p>
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-single-line-100.html b/layout/reftests/text-indent/text-indent-single-line-100.html
new file mode 100644
index 0000000000..0df429a239
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-single-line-100.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<head>
+<title>CSS 2.1 Test Suite: text-indent test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+p { text-indent: 100px }
+</style>
+</head>
+<body>
+<p>text</p>
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-single-line-indent-inline-ref-block-margin.html b/layout/reftests/text-indent/text-indent-single-line-indent-inline-ref-block-margin.html
new file mode 100644
index 0000000000..7eb28cd930
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-single-line-indent-inline-ref-block-margin.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<head>
+<title>CSS 2.1 Test Suite: text-indent test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+p { margin-left: 100px }
+span { background: yellow }
+</style>
+</head>
+<body>
+<p><span>text</span></p>
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-single-line-indent-inline-ref-inline-margin.html b/layout/reftests/text-indent/text-indent-single-line-indent-inline-ref-inline-margin.html
new file mode 100644
index 0000000000..62a8f86fcb
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-single-line-indent-inline-ref-inline-margin.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<head>
+<title>CSS 2.1 Test Suite: text-indent test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+span { background: yellow; margin-left: 100px }
+</style>
+</head>
+<body>
+<p><span>text</span></p>
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-single-line-indent-inline.html b/layout/reftests/text-indent/text-indent-single-line-indent-inline.html
new file mode 100644
index 0000000000..7c520427dd
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-single-line-indent-inline.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<head>
+<title>CSS 2.1 Test Suite: text-indent test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+p { text-indent: 100px }
+span { background: yellow }
+</style>
+</head>
+<body>
+<p><span>text</span></p>
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-single-line-percent-ref.html b/layout/reftests/text-indent/text-indent-single-line-percent-ref.html
new file mode 100644
index 0000000000..0eafe7c97c
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-single-line-percent-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<head>
+<title>text-indent test</title>
+<style type="text/css">
+div { width: 500px; }
+p { width: 300px; text-indent: 30px; }
+</style>
+</head>
+<body>
+<div>
+<p>text</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-single-line-percent.html b/layout/reftests/text-indent/text-indent-single-line-percent.html
new file mode 100644
index 0000000000..aeb4ae5f74
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-single-line-percent.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<head>
+<title>CSS 2.1 Test Suite: text-indent test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+div { width: 500px; }
+p { width: 300px; text-indent: 10%; }
+</style>
+</head>
+<body>
+<div>
+<p>text</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-single-line-ref-margin.html b/layout/reftests/text-indent/text-indent-single-line-ref-margin.html
new file mode 100644
index 0000000000..7fb1be9993
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-single-line-ref-margin.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<head>
+<title>CSS 2.1 Test Suite: text-indent test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+p { margin-left: 100px }
+</style>
+</head>
+<body>
+<p>text</p>
+</body>
+</html>
diff --git a/layout/reftests/text-indent/text-indent-single-line-ref-unstyled.html b/layout/reftests/text-indent/text-indent-single-line-ref-unstyled.html
new file mode 100644
index 0000000000..5863a40c7b
--- /dev/null
+++ b/layout/reftests/text-indent/text-indent-single-line-ref-unstyled.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<head>
+<title>CSS 2.1 Test Suite: text-indent test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" />
+<meta name="flags" content="" />
+<style type="text/css">
+</style>
+</head>
+<body>
+<p>text</p>
+</body>
+</html>