diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /layout/reftests/outline | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
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>⁠...? +</div> +<div class="test2"> +Is the red outline correct on <a href=".">this<br>link</a>⁠...? +</div> +<div class="test3"> +Is the red outline correct on <a href=".">this<br>link</a>⁠...? +</div> +<div class="test4"> +Is the red outline correct on <a href=".">this<br>link</a>⁠...? +</div> +<div class="test5"> +Is the red outline correct on <a href=".">this<br>link</a>⁠...? +</div> +<div class="test6"> +Is the red outline correct on <a href=".">this link</a>⁠...? +</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 |