summaryrefslogtreecommitdiffstats
path: root/layout/reftests/outline
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/outline
parentInitial commit. (diff)
downloadfirefox-esr-upstream.tar.xz
firefox-esr-upstream.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/outline')
-rw-r--r--layout/reftests/outline/outline-and-3d-transform-1-ref.html28
-rw-r--r--layout/reftests/outline/outline-and-3d-transform-1a.html40
-rw-r--r--layout/reftests/outline/outline-and-3d-transform-1b.html40
-rw-r--r--layout/reftests/outline/outline-and-3d-transform-2-ref.html36
-rw-r--r--layout/reftests/outline/outline-and-3d-transform-2.html35
-rw-r--r--layout/reftests/outline/outline-and-box-shadow-ref.html13
-rw-r--r--layout/reftests/outline/outline-and-box-shadow.html13
-rw-r--r--layout/reftests/outline/outline-auto-001-ref.html36
-rw-r--r--layout/reftests/outline/outline-auto-001.html28
-rw-r--r--layout/reftests/outline/outline-auto-002-ref.html2
-rw-r--r--layout/reftests/outline/outline-auto-002.html5
-rw-r--r--layout/reftests/outline/outline-auto-explicit-native-widget-ref.html5
-rw-r--r--layout/reftests/outline/outline-auto-explicit-native-widget.html5
-rw-r--r--layout/reftests/outline/outline-auto-follows-border-radius-non-native-02.html14
-rw-r--r--layout/reftests/outline/outline-auto-follows-border-radius-non-native-notref.html12
-rw-r--r--layout/reftests/outline/outline-auto-follows-border-radius-non-native.html13
-rw-r--r--layout/reftests/outline/outline-auto-suppressed-native-widget-ref.html7
-rw-r--r--layout/reftests/outline/outline-auto-suppressed-native-widget.html8
-rw-r--r--layout/reftests/outline/outline-dynamic-change-1-ref.html17
-rw-r--r--layout/reftests/outline/outline-dynamic-change-1a.html26
-rw-r--r--layout/reftests/outline/outline-dynamic-change-1b.html26
-rw-r--r--layout/reftests/outline/outline-initial-1-ref.html5
-rw-r--r--layout/reftests/outline/outline-initial-1a.html4
-rw-r--r--layout/reftests/outline/outline-initial-1b.html5
-rw-r--r--layout/reftests/outline/outline-on-table-ref.html9
-rw-r--r--layout/reftests/outline/outline-on-table.html17
-rw-r--r--layout/reftests/outline/outline-overflow-block-abspos.html25
-rw-r--r--layout/reftests/outline/outline-overflow-block-float.html23
-rw-r--r--layout/reftests/outline/outline-overflow-block-ref.html17
-rw-r--r--layout/reftests/outline/outline-overflow-inlineblock-abspos.html27
-rw-r--r--layout/reftests/outline/outline-overflow-inlineblock-float.html24
-rw-r--r--layout/reftests/outline/outline-overflow-inlineblock-ref.html17
-rw-r--r--layout/reftests/outline/outline-table-caption-invisible.html8
-rw-r--r--layout/reftests/outline/outline-table-caption-ref.html11
-rw-r--r--layout/reftests/outline/outline-table-caption.html11
-rw-r--r--layout/reftests/outline/outline-wrapped-span-1-ref.html54
-rw-r--r--layout/reftests/outline/outline-wrapped-span-1.html57
-rw-r--r--layout/reftests/outline/reftest.list22
38 files changed, 745 insertions, 0 deletions
diff --git a/layout/reftests/outline/outline-and-3d-transform-1-ref.html b/layout/reftests/outline/outline-and-3d-transform-1-ref.html
new file mode 100644
index 0000000000..30fa7eabec
--- /dev/null
+++ b/layout/reftests/outline/outline-and-3d-transform-1-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<title>Testcase for outline around 3-D transform</title>
+<style>
+
+html, body { margin: 0; padding: 0; border: none }
+
+div {
+ width: 100px;
+ height: 100px;
+}
+
+body > div {
+ margin-top: 200px;
+ margin-left: 200px;
+ transform-style: flat;
+ position: relative;
+}
+
+body > div > div {
+ position: absolute; top: 0; left: 0;
+ height: 150px; width: 150px; top: -25px; left: -25px;
+ background: rgba(255, 255, 0, 0.4);
+ outline: 2px dashed blue;
+}
+
+</style>
+
+<div><div></div></div>
diff --git a/layout/reftests/outline/outline-and-3d-transform-1a.html b/layout/reftests/outline/outline-and-3d-transform-1a.html
new file mode 100644
index 0000000000..6b7926c2da
--- /dev/null
+++ b/layout/reftests/outline/outline-and-3d-transform-1a.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<title>Testcase for outline around 3-D transform</title>
+<style>
+
+html, body { margin: 0; padding: 0; border: none }
+
+div {
+ width: 100px;
+ height: 100px;
+}
+
+body > div {
+ margin-top: 200px;
+ margin-left: 200px;
+ transform-style: flat;
+ outline: 2px dashed blue;
+}
+
+body > div > div {
+ transform: rotateX(30deg);
+ transform-origin: 50% 50%;
+ transform-style: preserve-3d;
+}
+
+body > div > div > div {
+ transform: rotateX(30deg);
+ transform-origin: 50% 50%;
+ transform-style: preserve-3d;
+}
+
+body > div > div > div > div {
+ transform: scale(1.5, 3);
+ transform-origin: 50% 50%;
+ background: rgba(255, 255, 0, 0.4);
+}
+
+
+</style>
+
+<div><div><div><div></div></div></div></div>
diff --git a/layout/reftests/outline/outline-and-3d-transform-1b.html b/layout/reftests/outline/outline-and-3d-transform-1b.html
new file mode 100644
index 0000000000..d2e2316de6
--- /dev/null
+++ b/layout/reftests/outline/outline-and-3d-transform-1b.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<title>Testcase for outline around 3-D transform</title>
+<style>
+
+html, body { margin: 0; padding: 0; border: none }
+
+div {
+ width: 100px;
+ height: 100px;
+}
+
+body > div {
+ margin-top: 200px;
+ margin-left: 200px;
+ transform-style: flat;
+ outline: 2px dashed blue;
+}
+
+body > div > div {
+ transform: rotateX(90deg);
+ transform-origin: 50% 50%;
+ transform-style: preserve-3d;
+}
+
+body > div > div > div {
+ transform: rotateX(-30deg);
+ transform-origin: 50% 50%;
+ transform-style: preserve-3d;
+}
+
+body > div > div > div > div {
+ transform: scale(1.5, 3);
+ transform-origin: 50% 50%;
+ background: rgba(255, 255, 0, 0.4);
+}
+
+
+</style>
+
+<div><div><div><div></div></div></div></div>
diff --git a/layout/reftests/outline/outline-and-3d-transform-2-ref.html b/layout/reftests/outline/outline-and-3d-transform-2-ref.html
new file mode 100644
index 0000000000..93a45d8f80
--- /dev/null
+++ b/layout/reftests/outline/outline-and-3d-transform-2-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<title>Testcase for outline around 3-D transform</title>
+<style>
+
+html, body { margin: 0; padding: 0; border: none }
+
+div {
+ width: 100px;
+ height: 100px;
+}
+
+body > div {
+ margin-top: 200px;
+ margin-left: 200px;
+ transform-style: flat;
+}
+
+body > div > div {
+ transform: rotateX(30deg);
+ transform-origin: 50% 50%;
+ transform-style: preserve-3d;
+ border: 5px solid green;
+ margin: -5px;
+}
+
+body > div > div > div {
+ transform: rotateX(30deg);
+ width: 50px; margin-left: 20px; margin-top: -5px;
+ transform-origin: 50% 50%;
+ transform-style: preserve-3d;
+ border: 5px solid blue;
+}
+
+</style>
+
+<div><div><div></div></div></div>
diff --git a/layout/reftests/outline/outline-and-3d-transform-2.html b/layout/reftests/outline/outline-and-3d-transform-2.html
new file mode 100644
index 0000000000..7243669717
--- /dev/null
+++ b/layout/reftests/outline/outline-and-3d-transform-2.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<title>Testcase for outline around 3-D transform</title>
+<style>
+
+html, body { margin: 0; padding: 0; border: none }
+
+div {
+ width: 100px;
+ height: 100px;
+}
+
+body > div {
+ margin-top: 200px;
+ margin-left: 200px;
+ transform-style: flat;
+}
+
+body > div > div {
+ transform: rotateX(30deg);
+ transform-origin: 50% 50%;
+ transform-style: preserve-3d;
+ outline: 5px solid green;
+}
+
+body > div > div > div {
+ transform: rotateX(30deg);
+ width: 50px; margin-left: 25px;
+ transform-origin: 50% 50%;
+ transform-style: preserve-3d;
+ outline: 5px solid blue;
+}
+
+</style>
+
+<div><div><div></div></div></div>
diff --git a/layout/reftests/outline/outline-and-box-shadow-ref.html b/layout/reftests/outline/outline-and-box-shadow-ref.html
new file mode 100644
index 0000000000..0d4a9ffcf6
--- /dev/null
+++ b/layout/reftests/outline/outline-and-box-shadow-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<title>outline and box-shadow</title>
+<style>
+html, body { margin: 0; padding: 0 }
+p {
+ margin: 48px;
+ border: 2px solid blue;
+ padding: 5px; /* ensure no font overhang */
+ background: yellow; color: black;
+ box-shadow: 10px 10px 10px 0px black;
+}
+</style>
+<p>The outline should be adjacent to the background.</p>
diff --git a/layout/reftests/outline/outline-and-box-shadow.html b/layout/reftests/outline/outline-and-box-shadow.html
new file mode 100644
index 0000000000..3bb717200b
--- /dev/null
+++ b/layout/reftests/outline/outline-and-box-shadow.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<title>outline and box-shadow</title>
+<style>
+html, body { margin: 0; padding: 0 }
+p {
+ margin: 50px;
+ outline: 2px solid blue;
+ padding: 5px; /* ensure no font overhang */
+ background: yellow; color: black;
+ box-shadow: 10px 10px 10px 2px black;
+}
+</style>
+<p>The outline should be adjacent to the background.</p>
diff --git a/layout/reftests/outline/outline-auto-001-ref.html b/layout/reftests/outline/outline-auto-001-ref.html
new file mode 100644
index 0000000000..5520991b74
--- /dev/null
+++ b/layout/reftests/outline/outline-auto-001-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<title>Testcase for outline:auto</title>
+<style>
+ html, body {
+ color: black;
+ background-color: white;
+ padding: 10px;
+ margin: 0;
+ }
+ .a, .a2 {
+ outline: auto;
+ width:190px;
+ height: 10px;
+ background: black;
+ }
+ .a2 {
+ width: 194px;
+ height: 14px;
+ margin-left: -2px;
+ margin-top: -2px;
+ }
+ .w {
+ border: solid black;
+ border-width: 5px;
+ margin: 20px;
+ width: 190px;
+ height: 10px;
+ }
+</style>
+<div class="w"><div class="a" style="outline-width:10px; outline-offset:5px;"></div></div>
+<div class="w"><div class="a" style="outline-width:10px; outline-offset:10px;"></div></div>
+<div class="w"><div class="a2" style="outline-width:10px; outline-offset:-2px;"></div></div>
+<div class="w"><div class="a" style="outline-width:15px; outline-offset:6px;"></div></div>
+<div class="w"><div class="a" style="outline-width:11px; outline-offset:5px;"></div></div>
+<div class="w"><div class="a" style="outline-width:11px; outline-offset:10px;"></div></div>
+<div class="w"><div class="a2" style="outline-width:11px; outline-offset:-2px;"></div></div>
diff --git a/layout/reftests/outline/outline-auto-001.html b/layout/reftests/outline/outline-auto-001.html
new file mode 100644
index 0000000000..89758919ae
--- /dev/null
+++ b/layout/reftests/outline/outline-auto-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<title>Testcase for outline:auto</title>
+<style>
+html, body {
+ color: black;
+ background-color: white;
+ padding: 10px;
+ margin: 0;
+}
+div {
+ outline: auto;
+ width: 200px;
+ margin: 20px;
+ height: 20px;
+ background: black;
+}
+.b div {
+ border: solid blue;
+ border-width: 1px 3px 5px 7px;
+}
+</style>
+<div style="outline-width:0; outline-offset:0;"></div>
+<div style="outline-width:0; outline-offset:5px;"></div>
+<div style="outline-width:0; outline-offset:-5px;"></div>
+<div style="outline-width:5px; outline-offset:1px;"></div>
+<div style="outline-width:1px; outline-offset:0;"></div>
+<div style="outline-width:1px; outline-offset:5px;"></div>
+<div style="outline-width:1px; outline-offset:-5px;"></div>
diff --git a/layout/reftests/outline/outline-auto-002-ref.html b/layout/reftests/outline/outline-auto-002-ref.html
new file mode 100644
index 0000000000..78d22a05a5
--- /dev/null
+++ b/layout/reftests/outline/outline-auto-002-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<div style="width:100px; height: 100px; border: 2px solid lime;"></div>
diff --git a/layout/reftests/outline/outline-auto-002.html b/layout/reftests/outline/outline-auto-002.html
new file mode 100644
index 0000000000..6f1ebddd0b
--- /dev/null
+++ b/layout/reftests/outline/outline-auto-002.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<!-- Should see the border -->
+<div style="width: 104px; height: 104px; overflow: hidden">
+ <div style="width: 100px; height: 100px; outline: 1px auto; border: 2px solid lime; overflow: hidden"></div>
+</div>
diff --git a/layout/reftests/outline/outline-auto-explicit-native-widget-ref.html b/layout/reftests/outline/outline-auto-explicit-native-widget-ref.html
new file mode 100644
index 0000000000..ede3ee72a4
--- /dev/null
+++ b/layout/reftests/outline/outline-auto-explicit-native-widget-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<style>
+ input { caret-color: transparent }
+</style>
+<input autofocus>
diff --git a/layout/reftests/outline/outline-auto-explicit-native-widget.html b/layout/reftests/outline/outline-auto-explicit-native-widget.html
new file mode 100644
index 0000000000..4cbf40a517
--- /dev/null
+++ b/layout/reftests/outline/outline-auto-explicit-native-widget.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<style>
+ input { outline-style: auto }
+</style>
+<input>
diff --git a/layout/reftests/outline/outline-auto-follows-border-radius-non-native-02.html b/layout/reftests/outline/outline-auto-follows-border-radius-non-native-02.html
new file mode 100644
index 0000000000..f03c1694b2
--- /dev/null
+++ b/layout/reftests/outline/outline-auto-follows-border-radius-non-native-02.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<style>
+body { margin: 0 }
+div {
+ width: 92px;
+ height: 92px;
+ border: 1px transparent;
+ border-radius: 1px;
+ outline: 1px auto;
+ outline-offset: 4px;
+ margin: 14px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/outline/outline-auto-follows-border-radius-non-native-notref.html b/layout/reftests/outline/outline-auto-follows-border-radius-non-native-notref.html
new file mode 100644
index 0000000000..7cfe639cd4
--- /dev/null
+++ b/layout/reftests/outline/outline-auto-follows-border-radius-non-native-notref.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<style>
+body { margin: 0 }
+div {
+ width: 100px;
+ height: 100px;
+ border: 1px transparent;
+ outline: 1px auto;
+ margin: 10px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/outline/outline-auto-follows-border-radius-non-native.html b/layout/reftests/outline/outline-auto-follows-border-radius-non-native.html
new file mode 100644
index 0000000000..baff30d54f
--- /dev/null
+++ b/layout/reftests/outline/outline-auto-follows-border-radius-non-native.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<style>
+body { margin: 0 }
+div {
+ width: 100px;
+ height: 100px;
+ border: 1px transparent;
+ border-radius: 5px;
+ outline: 1px auto;
+ margin: 10px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/outline/outline-auto-suppressed-native-widget-ref.html b/layout/reftests/outline/outline-auto-suppressed-native-widget-ref.html
new file mode 100644
index 0000000000..728e9b4fc2
--- /dev/null
+++ b/layout/reftests/outline/outline-auto-suppressed-native-widget-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<style>
+input {
+ outline: 1px solid green;
+}
+</style>
+<input>
diff --git a/layout/reftests/outline/outline-auto-suppressed-native-widget.html b/layout/reftests/outline/outline-auto-suppressed-native-widget.html
new file mode 100644
index 0000000000..97848797dd
--- /dev/null
+++ b/layout/reftests/outline/outline-auto-suppressed-native-widget.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<style>
+input:focus {
+ outline: 1px solid green;
+ caret-color: transparent;
+}
+</style>
+<input autofocus>
diff --git a/layout/reftests/outline/outline-dynamic-change-1-ref.html b/layout/reftests/outline/outline-dynamic-change-1-ref.html
new file mode 100644
index 0000000000..ac45dd1972
--- /dev/null
+++ b/layout/reftests/outline/outline-dynamic-change-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ #tweakMe {
+ height: 100px;
+ width: 100px;
+ background: gray;
+ outline: solid 6px black;
+ outline-offset: -16px;
+ }
+ </style>
+</head>
+<body>
+ <div id="tweakMe"></div>
+</body>
+</html>
diff --git a/layout/reftests/outline/outline-dynamic-change-1a.html b/layout/reftests/outline/outline-dynamic-change-1a.html
new file mode 100644
index 0000000000..92ced60977
--- /dev/null
+++ b/layout/reftests/outline/outline-dynamic-change-1a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <title>
+ Test that dynamic tweaks to 'outline-offset' are reflected in the rendering.
+ </title>
+ <style>
+ #tweakMe {
+ height: 100px;
+ width: 100px;
+ background: gray;
+ outline: solid 6px black;
+ outline-offset: -10px;
+ }
+ </style>
+ <script>
+window.addEventListener("MozReftestInvalidate", function() {
+ tweakMe.style.outlineOffset = "-16px";
+ document.documentElement.removeAttribute("class");
+});
+ </script>
+</head>
+<body>
+ <div id="tweakMe"></div>
+</body>
+</html>
diff --git a/layout/reftests/outline/outline-dynamic-change-1b.html b/layout/reftests/outline/outline-dynamic-change-1b.html
new file mode 100644
index 0000000000..800847bcad
--- /dev/null
+++ b/layout/reftests/outline/outline-dynamic-change-1b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <title>
+ Test that dynamic tweaks to 'outline-width' are reflected in the rendering.
+ </title>
+ <style>
+ #tweakMe {
+ height: 100px;
+ width: 100px;
+ background: gray;
+ outline: solid 2px black;
+ outline-offset: -16px;
+ }
+ </style>
+ <script>
+window.addEventListener("MozReftestInvalidate", function() {
+ tweakMe.style.outlineWidth = "6px";
+ document.documentElement.removeAttribute("class");
+});
+ </script>
+</head>
+<body>
+ <div id="tweakMe"></div>
+</body>
+</html>
diff --git a/layout/reftests/outline/outline-initial-1-ref.html b/layout/reftests/outline/outline-initial-1-ref.html
new file mode 100644
index 0000000000..53bcb0c4ad
--- /dev/null
+++ b/layout/reftests/outline/outline-initial-1-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<span style="outline-width: 2px; outline-style: solid; color: green;
+ outline-color: green">
+ This should have a green outline.
+</span>
diff --git a/layout/reftests/outline/outline-initial-1a.html b/layout/reftests/outline/outline-initial-1a.html
new file mode 100644
index 0000000000..461a8104ea
--- /dev/null
+++ b/layout/reftests/outline/outline-initial-1a.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<span style="outline-width: 2px; outline-style: solid; color: green">
+ This should have a green outline.
+</span>
diff --git a/layout/reftests/outline/outline-initial-1b.html b/layout/reftests/outline/outline-initial-1b.html
new file mode 100644
index 0000000000..a01459af10
--- /dev/null
+++ b/layout/reftests/outline/outline-initial-1b.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<span style="outline-width: 2px; outline-style: solid; color: green;
+ outline-color: initial">
+ This should have a green outline.
+</span>
diff --git a/layout/reftests/outline/outline-on-table-ref.html b/layout/reftests/outline/outline-on-table-ref.html
new file mode 100644
index 0000000000..fd9fbe01bb
--- /dev/null
+++ b/layout/reftests/outline/outline-on-table-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<style>
+#target {
+ width: 100px;
+ height: 100px;
+ outline: 1px solid black;
+}
+</style>
+<div id="target"></div>
diff --git a/layout/reftests/outline/outline-on-table.html b/layout/reftests/outline/outline-on-table.html
new file mode 100644
index 0000000000..bcb1b9e4af
--- /dev/null
+++ b/layout/reftests/outline/outline-on-table.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<style>
+#target {
+ display: table;
+ width: 100px;
+ height: 100px;
+}
+</style>
+<div id="target"></div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ target.style.outline = "1px solid black";
+ document.documentElement.classList.remove("reftest-wait");
+});
+</script>
+</html>
diff --git a/layout/reftests/outline/outline-overflow-block-abspos.html b/layout/reftests/outline/outline-overflow-block-abspos.html
new file mode 100644
index 0000000000..574519e908
--- /dev/null
+++ b/layout/reftests/outline/outline-overflow-block-abspos.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<title>outline doesn't go around overflowing abspos descendants</title>
+<style>
+
+html, body { margin: 0; padding: 0; border: none }
+html { overflow:hidden /* avoid second reflow for scrollbars */ }
+
+body > div {
+ margin: 100px;
+ width: 50px; height: 50px;
+ outline: 2px solid blue;
+ position: relative;
+}
+
+body > div > div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+}
+
+</style>
+<body>
+<div><div></div></div>
diff --git a/layout/reftests/outline/outline-overflow-block-float.html b/layout/reftests/outline/outline-overflow-block-float.html
new file mode 100644
index 0000000000..f3f6db8b25
--- /dev/null
+++ b/layout/reftests/outline/outline-overflow-block-float.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>outline doesn't go around overflowing floats</title>
+<style>
+
+html, body { margin: 0; padding: 0; border: none }
+html { overflow:hidden /* avoid second reflow for scrollbars */ }
+
+body > div {
+ margin: 100px;
+ width: 50px; height: 50px;
+ outline: 2px solid blue;
+ position: relative;
+}
+
+body > div > div {
+ float: left;
+ width: 100px;
+ height: 100px;
+}
+
+</style>
+<body>
+<div><div></div></div>
diff --git a/layout/reftests/outline/outline-overflow-block-ref.html b/layout/reftests/outline/outline-overflow-block-ref.html
new file mode 100644
index 0000000000..204d02430e
--- /dev/null
+++ b/layout/reftests/outline/outline-overflow-block-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<title>reference</title>
+<style>
+
+html, body { margin: 0; padding: 0; border: none }
+html { overflow:hidden /* avoid second reflow for scrollbars */ }
+
+body > div {
+ margin: 98px;
+ border: 2px solid blue;
+ width: 50px;
+ height: 50px;
+}
+
+</style>
+<body>
+<div></div>
diff --git a/layout/reftests/outline/outline-overflow-inlineblock-abspos.html b/layout/reftests/outline/outline-overflow-inlineblock-abspos.html
new file mode 100644
index 0000000000..284b52370e
--- /dev/null
+++ b/layout/reftests/outline/outline-overflow-inlineblock-abspos.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<title>outline doesn't go around overflowing abspos descendants</title>
+<style>
+
+html, body { margin: 0; padding: 0; border: none }
+html { overflow:hidden /* avoid second reflow for scrollbars */ }
+
+body > div {
+ margin: 100px;
+ outline: 2px solid blue;
+ display: inline-block;
+ height: 50px;
+ width: 50px;
+ position: relative;
+}
+
+body > div > div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+}
+
+</style>
+<body>
+<div><div></div></div>
diff --git a/layout/reftests/outline/outline-overflow-inlineblock-float.html b/layout/reftests/outline/outline-overflow-inlineblock-float.html
new file mode 100644
index 0000000000..1c5c67c8e9
--- /dev/null
+++ b/layout/reftests/outline/outline-overflow-inlineblock-float.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<title>outline doesn't go around overflowing floats</title>
+<style>
+
+html, body { margin: 0; padding: 0; border: none }
+html { overflow:hidden /* avoid second reflow for scrollbars */ }
+
+body > div {
+ margin: 100px;
+ outline: 2px solid blue;
+ display: inline-block;
+ height: 50px;
+ width: 50px;
+}
+
+body > div > div {
+ float: left;
+ width: 100px;
+ height: 100px;
+}
+
+</style>
+<body>
+<div><div></div></div>
diff --git a/layout/reftests/outline/outline-overflow-inlineblock-ref.html b/layout/reftests/outline/outline-overflow-inlineblock-ref.html
new file mode 100644
index 0000000000..204d02430e
--- /dev/null
+++ b/layout/reftests/outline/outline-overflow-inlineblock-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<title>reference</title>
+<style>
+
+html, body { margin: 0; padding: 0; border: none }
+html { overflow:hidden /* avoid second reflow for scrollbars */ }
+
+body > div {
+ margin: 98px;
+ border: 2px solid blue;
+ width: 50px;
+ height: 50px;
+}
+
+</style>
+<body>
+<div></div>
diff --git a/layout/reftests/outline/outline-table-caption-invisible.html b/layout/reftests/outline/outline-table-caption-invisible.html
new file mode 100644
index 0000000000..bc0960e7b0
--- /dev/null
+++ b/layout/reftests/outline/outline-table-caption-invisible.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<style>
+table { outline: 1px solid red; visibility: hidden; }
+</style>
+<table>
+ <caption>Caption</caption>
+ <tr><td>Cell</td></tr>
+</table>
diff --git a/layout/reftests/outline/outline-table-caption-ref.html b/layout/reftests/outline/outline-table-caption-ref.html
new file mode 100644
index 0000000000..a6182a3f29
--- /dev/null
+++ b/layout/reftests/outline/outline-table-caption-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+table { outline: 1px solid blue; border-collapse: collapse; }
+.caption, .cell { width: 100px; height: 100px; padding: 0; text-align: left; vertical-align: top; }
+.caption { background-color: yellow; }
+.cell { background-color: lime; }
+</style>
+<table>
+ <tr><td class="caption">Caption</td></tr>
+ <tr><td class="cell">Cell</td></tr>
+</table>
diff --git a/layout/reftests/outline/outline-table-caption.html b/layout/reftests/outline/outline-table-caption.html
new file mode 100644
index 0000000000..55e6a6e9d5
--- /dev/null
+++ b/layout/reftests/outline/outline-table-caption.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+table { outline: 1px solid blue; border-collapse: collapse; }
+.caption, .cell { width: 100px; height: 100px; padding: 0; text-align: left; vertical-align: top; }
+.caption { background-color: yellow; }
+.cell { background-color: lime; }
+</style>
+<table>
+ <caption class="caption">Caption</caption>
+ <tr><td class="cell">Cell</td></tr>
+</table>
diff --git a/layout/reftests/outline/outline-wrapped-span-1-ref.html b/layout/reftests/outline/outline-wrapped-span-1-ref.html
new file mode 100644
index 0000000000..564f136e3b
--- /dev/null
+++ b/layout/reftests/outline/outline-wrapped-span-1-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+
+<style>
+html {
+ font-family: monospace;
+ font-size: 16px;
+}
+div {
+ margin: 1em;
+}
+a {
+ outline: 1px solid red;
+ background: #dddddd;
+}
+.test1 {
+ width: 19ch;
+}
+.test2 {
+ width: 20ch;
+}
+.test3 {
+ width: 21ch;
+}
+.test4 {
+ width: 22ch;
+}
+.test5 {
+ width: 23ch;
+}
+.test6 {
+ width: 24ch;
+}
+</style>
+
+<div class="test1">
+Is the red outline correct on <a href=".">this<br>link</a>&#x2060;...?
+</div>
+<div class="test2">
+Is the red outline correct on <a href=".">this<br>link</a>&#x2060;...?
+</div>
+<div class="test3">
+Is the red outline correct on <a href=".">this<br>link</a>&#x2060;...?
+</div>
+<div class="test4">
+Is the red outline correct on <a href=".">this<br>link</a>&#x2060;...?
+</div>
+<div class="test5">
+Is the red outline correct on <a href=".">this<br>link</a>&#x2060;...?
+</div>
+<div class="test6">
+Is the red outline correct on <a href=".">this link</a>&#x2060;...?
+</div>
diff --git a/layout/reftests/outline/outline-wrapped-span-1.html b/layout/reftests/outline/outline-wrapped-span-1.html
new file mode 100644
index 0000000000..393a6352bf
--- /dev/null
+++ b/layout/reftests/outline/outline-wrapped-span-1.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+
+<style>
+html {
+ font-family: monospace;
+ font-size: 16px;
+}
+div {
+ margin: 1em;
+}
+a {
+ outline: 1px solid red;
+ background: #dddddd;
+}
+a::after {
+ content: '\2060';
+}
+.test1 {
+ width: 19ch;
+}
+.test2 {
+ width: 20ch;
+}
+.test3 {
+ width: 21ch;
+}
+.test4 {
+ width: 22ch;
+}
+.test5 {
+ width: 23ch;
+}
+.test6 {
+ width: 24ch;
+}
+</style>
+
+<div class="test1">
+Is the red outline correct on <a href=".">this link</a>...?
+</div>
+<div class="test2">
+Is the red outline correct on <a href=".">this link</a>...?
+</div>
+<div class="test3">
+Is the red outline correct on <a href=".">this link</a>...?
+</div>
+<div class="test4">
+Is the red outline correct on <a href=".">this link</a>...?
+</div>
+<div class="test5">
+Is the red outline correct on <a href=".">this link</a>...?
+</div>
+<div class="test6">
+Is the red outline correct on <a href=".">this link</a>...?
+</div>
diff --git a/layout/reftests/outline/reftest.list b/layout/reftests/outline/reftest.list
new file mode 100644
index 0000000000..2de8cdfb3c
--- /dev/null
+++ b/layout/reftests/outline/reftest.list
@@ -0,0 +1,22 @@
+fuzzy(0-52,0-1452) == outline-and-box-shadow.html outline-and-box-shadow-ref.html
+pref(layout.outline.include-overflow,true) == outline-and-3d-transform-1a.html outline-and-3d-transform-1-ref.html
+pref(layout.outline.include-overflow,true) == outline-and-3d-transform-1b.html outline-and-3d-transform-1-ref.html
+fuzzy-if(gtkWidget,0-136,0-120) fuzzy-if(Android,0-255,0-356) fuzzy-if(d2d,0-16,0-96) fuzzy-if(cocoaWidget,0-255,0-120) fuzzy-if(winWidget,0-255,0-216) == outline-and-3d-transform-2.html outline-and-3d-transform-2-ref.html
+== outline-dynamic-change-1a.html outline-dynamic-change-1-ref.html
+== outline-dynamic-change-1b.html outline-dynamic-change-1-ref.html
+== outline-overflow-block-abspos.html outline-overflow-block-ref.html
+== outline-overflow-block-float.html outline-overflow-block-ref.html
+== outline-overflow-inlineblock-abspos.html outline-overflow-inlineblock-ref.html
+== outline-overflow-inlineblock-float.html outline-overflow-inlineblock-ref.html
+== outline-auto-001.html outline-auto-001-ref.html
+== outline-auto-002.html outline-auto-002-ref.html
+!= outline-auto-follows-border-radius-non-native.html outline-auto-follows-border-radius-non-native-notref.html
+== outline-auto-follows-border-radius-non-native-02.html outline-auto-follows-border-radius-non-native.html
+needs-focus == outline-auto-suppressed-native-widget.html outline-auto-suppressed-native-widget-ref.html
+needs-focus == outline-auto-explicit-native-widget.html outline-auto-explicit-native-widget-ref.html
+== outline-initial-1a.html outline-initial-1-ref.html
+== outline-initial-1b.html outline-initial-1-ref.html
+== outline-on-table.html outline-on-table-ref.html
+== outline-table-caption.html outline-table-caption-ref.html
+== outline-table-caption-invisible.html about:blank
+== outline-wrapped-span-1.html outline-wrapped-span-1-ref.html