diff options
Diffstat (limited to 'layout/reftests/border-dotted')
35 files changed, 878 insertions, 0 deletions
diff --git a/layout/reftests/border-dotted/1752624-ref.html b/layout/reftests/border-dotted/1752624-ref.html new file mode 100644 index 0000000000..7d465c930b --- /dev/null +++ b/layout/reftests/border-dotted/1752624-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<style> +#offset { + position: absolute; + left: 10px; + top: -150px; + width: 100px; + height: 100px; + border: 1px solid red; +} +#outline-box { + width: 100px; + height: 100px; + position: relative; +} +#overflow-box { + border: 4px solid blue; + width: 10px; + height: 400px; + left: 10px; + top: 100px; + position: absolute; +} +</style> +<body> +<div id="offset"> +<div id="outline-box"> +<div id="overflow-box"> +</div> +</div> +</div> +</body> +</html> diff --git a/layout/reftests/border-dotted/1752624.html b/layout/reftests/border-dotted/1752624.html new file mode 100644 index 0000000000..116c34b2cd --- /dev/null +++ b/layout/reftests/border-dotted/1752624.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<style> +/* + * The rendering of the dotted border should be skipped if the border's box + * don't intersect with the dirty rect, even if the child node overflows from + * the border's box and the child node intersect with the dirty rect. + */ + +/* Moves the outline-box out of the visible area. */ +#offset { + position: absolute; + left: 10px; + top: -150px; + width: 100px; + height: 100px; + border: 1px solid red; +} +#outline-box { + outline: 4px dotted; + width: 100px; + height: 100px; + position: relative; +} +/* Overflows from the parent outline-box, and this is visible. */ +#overflow-box { + border: 4px solid blue; + width: 10px; + height: 400px; + left: 10px; + top: 100px; + position: absolute; +} +</style> +<body> +<div id="offset"> +<div id="outline-box"> +<div id="overflow-box"> +</div> +</div> +</div> +</body> +</html> diff --git a/layout/reftests/border-dotted/1761756-ref.html b/layout/reftests/border-dotted/1761756-ref.html new file mode 100644 index 0000000000..1c5fd402a1 --- /dev/null +++ b/layout/reftests/border-dotted/1761756-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> +<style> +big { + border-block-end-style: dotted; +} +</style> +</head> +<body> +<big id="big" dir="rtl"></big> +<script> +const big = document.getElementById("big"); +big.innerText = "\nA"; +</script> +</body> +</html> diff --git a/layout/reftests/border-dotted/1761756.html b/layout/reftests/border-dotted/1761756.html new file mode 100644 index 0000000000..efdf2b6219 --- /dev/null +++ b/layout/reftests/border-dotted/1761756.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<style> +big { + background-color: red; + background-clip: text !important; + border-block-end-style: dotted; +} +</style> +</head> +<body> +<big id="big" dir="rtl"></big> +<script> +const big = document.getElementById("big"); +big.innerText = "\nA"; +</script> +</body> +</html> diff --git a/layout/reftests/border-dotted/border-dashed-no-radius-filled-mask.png b/layout/reftests/border-dotted/border-dashed-no-radius-filled-mask.png Binary files differnew file mode 100644 index 0000000000..aa70120afa --- /dev/null +++ b/layout/reftests/border-dotted/border-dashed-no-radius-filled-mask.png diff --git a/layout/reftests/border-dotted/border-dashed-no-radius-unfilled-mask.png b/layout/reftests/border-dotted/border-dashed-no-radius-unfilled-mask.png Binary files differnew file mode 100644 index 0000000000..34534e9f73 --- /dev/null +++ b/layout/reftests/border-dotted/border-dashed-no-radius-unfilled-mask.png diff --git a/layout/reftests/border-dotted/border-dashed-no-radius.html b/layout/reftests/border-dotted/border-dashed-no-radius.html new file mode 100644 index 0000000000..20a6722370 --- /dev/null +++ b/layout/reftests/border-dotted/border-dashed-no-radius.html @@ -0,0 +1,79 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>dashed border with no radius</title> + <style> +.box { + position: relative; + width: 420px; + height: 420px; +} +.mask { + position: absolute; + top: 0px; + left: 0px; +} + +table { + border-collapse: separate; + border-spacing: 10px; + empty-cells: show; +} +td { + border-style: dashed; + border-color: black; + height: 120px; + width: 120px; + box-sizing: border-box; +} + +.A { + border-width: 1px; +} +.B { + border-width: 2px; +} +.C { + border-width: 6px; +} +.D { + border-width: 8px; +} +.E { + border-width: 16px; +} +.F { + border-width: 24px; +} +.G { + border-width: 32px; +} +.H { + border-width: 48px; +} +.I { + border-width: 60px; +} + </style> + </head> + <body> + <div class="box"> + <table> + <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr> + <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr> + <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr> + </table> + <img class="mask" src="border-dashed-no-radius-filled-mask.png"> + </div> + <div class="box"> + <table> + <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr> + <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr> + <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr> + </table> + <img class="mask" src="border-dashed-no-radius-unfilled-mask.png"> + </div> + </body> +</html> + diff --git a/layout/reftests/border-dotted/border-dashed-non-integer.html b/layout/reftests/border-dotted/border-dashed-non-integer.html new file mode 100644 index 0000000000..96e1d47538 --- /dev/null +++ b/layout/reftests/border-dotted/border-dashed-non-integer.html @@ -0,0 +1,80 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>dashed border with non-integer radius</title> + <style> +.box { + position: relative; + width: 420px; + height: 420px; +} +.mask { + position: absolute; + top: 0px; + left: 0px; +} + +table { + border-collapse: separate; + border-spacing: 10px; + empty-cells: show; +} +td { + border-style: dashed; + border-radius: 24.01px; + border-color: black; + height: 120px; + width: 120px; + box-sizing: border-box; +} + +.A { + border-width: 1px; +} +.B { + border-width: 2px; +} +.C { + border-width: 6px; +} +.D { + border-width: 8px; +} +.E { + border-width: 16px; +} +.F { + border-width: 24px; +} +.G { + border-width: 32px; +} +.H { + border-width: 48px; +} +.I { + border-width: 60px; +} + </style> + </head> + <body> + <div class="box"> + <table> + <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr> + <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr> + <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr> + </table> + <img class="mask" src="border-dashed-radius-non-integer-filled-mask.png"> + </div> + <div class="box"> + <table> + <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr> + <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr> + <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr> + </table> + <img class="mask" src="border-dashed-radius-non-integer-unfilled-mask.png"> + </div> + </body> +</html> + diff --git a/layout/reftests/border-dotted/border-dashed-radius-filled-mask.png b/layout/reftests/border-dotted/border-dashed-radius-filled-mask.png Binary files differnew file mode 100644 index 0000000000..7c2bd791ba --- /dev/null +++ b/layout/reftests/border-dotted/border-dashed-radius-filled-mask.png diff --git a/layout/reftests/border-dotted/border-dashed-radius-non-integer-filled-mask.png b/layout/reftests/border-dotted/border-dashed-radius-non-integer-filled-mask.png Binary files differnew file mode 100644 index 0000000000..8f0e74e6ac --- /dev/null +++ b/layout/reftests/border-dotted/border-dashed-radius-non-integer-filled-mask.png diff --git a/layout/reftests/border-dotted/border-dashed-radius-non-integer-unfilled-mask.png b/layout/reftests/border-dotted/border-dashed-radius-non-integer-unfilled-mask.png Binary files differnew file mode 100644 index 0000000000..08de9bc493 --- /dev/null +++ b/layout/reftests/border-dotted/border-dashed-radius-non-integer-unfilled-mask.png diff --git a/layout/reftests/border-dotted/border-dashed-radius-unfilled-mask.png b/layout/reftests/border-dotted/border-dashed-radius-unfilled-mask.png Binary files differnew file mode 100644 index 0000000000..c930c18d85 --- /dev/null +++ b/layout/reftests/border-dotted/border-dashed-radius-unfilled-mask.png diff --git a/layout/reftests/border-dotted/border-dashed-radius-zoom-filled-mask.png b/layout/reftests/border-dotted/border-dashed-radius-zoom-filled-mask.png Binary files differnew file mode 100644 index 0000000000..7773c0d651 --- /dev/null +++ b/layout/reftests/border-dotted/border-dashed-radius-zoom-filled-mask.png diff --git a/layout/reftests/border-dotted/border-dashed-radius-zoom-unfilled-mask.png b/layout/reftests/border-dotted/border-dashed-radius-zoom-unfilled-mask.png Binary files differnew file mode 100644 index 0000000000..30fc499470 --- /dev/null +++ b/layout/reftests/border-dotted/border-dashed-radius-zoom-unfilled-mask.png diff --git a/layout/reftests/border-dotted/border-dashed-radius-zoom.html b/layout/reftests/border-dotted/border-dashed-radius-zoom.html new file mode 100644 index 0000000000..c6bce82f85 --- /dev/null +++ b/layout/reftests/border-dotted/border-dashed-radius-zoom.html @@ -0,0 +1,88 @@ +<!DOCTYPE HTML> +<html reftest-zoom="1.3300000429153442" class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>dashed border with radius</title> + <style> +.box { + position: relative; + width: 420px; + height: 420px; +} +.mask { + position: absolute; + top: 0px; + left: 0px; + width: 420px; + height: 420px; +} + +table { + border-collapse: separate; + border-spacing: 10px; + empty-cells: show; +} +td { + border-style: dashed; + border-radius: 24px; + border-color: black; + height: 120px; + width: 120px; + box-sizing: border-box; +} + +.A { + border-width: 1px; +} +.B { + border-width: 2px; +} +.C { + border-width: 6px; +} +.D { + border-width: 8px; +} +.E { + border-width: 16px; +} +.F { + border-width: 24px; +} +.G { + border-width: 32px; +} +.H { + border-width: 48px; +} +.I { + border-width: 60px; +} + </style> + <script> + function doTest() { + document.documentElement.className=''; + } + window.addEventListener("MozReftestInvalidate", doTest); + </script> + </head> + <body> + <div class="box"> + <table> + <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr> + <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr> + <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr> + </table> + <img class="mask" src="border-dashed-radius-zoom-filled-mask.png"> + </div> + <div class="box"> + <table> + <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr> + <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr> + <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr> + </table> + <img class="mask" src="border-dashed-radius-zoom-unfilled-mask.png"> + </div> + </body> +</html> + diff --git a/layout/reftests/border-dotted/border-dashed-radius.html b/layout/reftests/border-dotted/border-dashed-radius.html new file mode 100644 index 0000000000..cc818709d6 --- /dev/null +++ b/layout/reftests/border-dotted/border-dashed-radius.html @@ -0,0 +1,80 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>dashed border with radius</title> + <style> +.box { + position: relative; + width: 420px; + height: 420px; +} +.mask { + position: absolute; + top: 0px; + left: 0px; +} + +table { + border-collapse: separate; + border-spacing: 10px; + empty-cells: show; +} +td { + border-style: dashed; + border-radius: 24px; + border-color: black; + height: 120px; + width: 120px; + box-sizing: border-box; +} + +.A { + border-width: 1px; +} +.B { + border-width: 2px; +} +.C { + border-width: 6px; +} +.D { + border-width: 8px; +} +.E { + border-width: 16px; +} +.F { + border-width: 24px; +} +.G { + border-width: 32px; +} +.H { + border-width: 48px; +} +.I { + border-width: 60px; +} + </style> + </head> + <body> + <div class="box"> + <table> + <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr> + <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr> + <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr> + </table> + <img class="mask" src="border-dashed-radius-filled-mask.png"> + </div> + <div class="box"> + <table> + <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr> + <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr> + <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr> + </table> + <img class="mask" src="border-dashed-radius-unfilled-mask.png"> + </div> + </body> +</html> + diff --git a/layout/reftests/border-dotted/border-dotted-interaction-filled-mask.png b/layout/reftests/border-dotted/border-dotted-interaction-filled-mask.png Binary files differnew file mode 100644 index 0000000000..1ef3ce778b --- /dev/null +++ b/layout/reftests/border-dotted/border-dotted-interaction-filled-mask.png diff --git a/layout/reftests/border-dotted/border-dotted-interaction-unfilled-mask.png b/layout/reftests/border-dotted/border-dotted-interaction-unfilled-mask.png Binary files differnew file mode 100644 index 0000000000..ed3ffbbf80 --- /dev/null +++ b/layout/reftests/border-dotted/border-dotted-interaction-unfilled-mask.png diff --git a/layout/reftests/border-dotted/border-dotted-interaction.html b/layout/reftests/border-dotted/border-dotted-interaction.html new file mode 100644 index 0000000000..4ea3c0224d --- /dev/null +++ b/layout/reftests/border-dotted/border-dotted-interaction.html @@ -0,0 +1,67 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>Corner interaction with dotted and other border</title> + <style> +.box { + position: relative; + width: 420px; + height: 420px; +} +.mask { + position: absolute; + top: 0px; + left: 0px; +} + +table { + border-collapse: separate; + border-spacing: 10px; + empty-cells: show; + margin: 0px; +} +td { + border-color: black; + border-width: 10px; + height: 60px; + width: 60px; + box-sizing: border-box; +} + +table .a { border-top-style: none; border-right-style: none; } +table .A { border-bottom-style: none; border-left-style: none; } +table .b { border-top-style: solid; border-right-style: solid; } +table .B { border-bottom-style: solid; border-left-style: solid; } +table .c { border-top-style: double; border-right-style: double; } +table .C { border-bottom-style: double; border-left-style: double; } +table .d { border-top-style: dashed; border-right-style: dashed; } +table .D { border-bottom-style: dashed; border-left-style: dashed; } +table .e { border-top-style: dotted; border-right-style: dotted; } +table .E { border-bottom-style: dotted; border-left-style: dotted; } + </style> + </head> + <body> + <div class="box"> + <table> + <tr><td class="A a"></td><td class="A b"></td><td class="A c"></td><td class="A d"></td><td class="A e"></td></tr> + <tr><td class="B a"></td><td class="B b"></td><td class="B c"></td><td class="B d"></td><td class="B e"></td></tr> + <tr><td class="C a"></td><td class="C b"></td><td class="C c"></td><td class="C d"></td><td class="C e"></td></tr> + <tr><td class="D a"></td><td class="D b"></td><td class="D c"></td><td class="D d"></td><td class="D e"></td></tr> + <tr><td class="E a"></td><td class="E b"></td><td class="E c"></td><td class="E d"></td><td class="E e"></td></tr> + </table> + <img class="mask" src="border-dotted-interaction-filled-mask.png"> + </div> + <div class="box"> + <table> + <tr><td class="A a"></td><td class="A b"></td><td class="A c"></td><td class="A d"></td><td class="A e"></td></tr> + <tr><td class="B a"></td><td class="B b"></td><td class="B c"></td><td class="B d"></td><td class="B e"></td></tr> + <tr><td class="C a"></td><td class="C b"></td><td class="C c"></td><td class="C d"></td><td class="C e"></td></tr> + <tr><td class="D a"></td><td class="D b"></td><td class="D c"></td><td class="D d"></td><td class="D e"></td></tr> + <tr><td class="E a"></td><td class="E b"></td><td class="E c"></td><td class="E d"></td><td class="E e"></td></tr> + </table> + <img class="mask" src="border-dotted-interaction-unfilled-mask.png"> + </div> + </body> +</html> + diff --git a/layout/reftests/border-dotted/border-dotted-no-radius-filled-mask.png b/layout/reftests/border-dotted/border-dotted-no-radius-filled-mask.png Binary files differnew file mode 100644 index 0000000000..243052f66c --- /dev/null +++ b/layout/reftests/border-dotted/border-dotted-no-radius-filled-mask.png diff --git a/layout/reftests/border-dotted/border-dotted-no-radius-unfilled-mask.png b/layout/reftests/border-dotted/border-dotted-no-radius-unfilled-mask.png Binary files differnew file mode 100644 index 0000000000..ebf49c48fa --- /dev/null +++ b/layout/reftests/border-dotted/border-dotted-no-radius-unfilled-mask.png diff --git a/layout/reftests/border-dotted/border-dotted-no-radius.html b/layout/reftests/border-dotted/border-dotted-no-radius.html new file mode 100644 index 0000000000..3bf244ea20 --- /dev/null +++ b/layout/reftests/border-dotted/border-dotted-no-radius.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>dotted border with no radius</title> + <style> +.box { + position: relative; + width: 420px; + height: 420px; +} +.mask { + position: absolute; + top: 0px; + left: 0px; +} + +table { + border-collapse: separate; + border-spacing: 10px; + empty-cells: show; +} +td { + border-style: dotted; + border-color: black; + height: 120px; + width: 120px; + box-sizing: border-box; +} + +.A { + /* Rendering with 1px depends on OS due to optimization */ + border-width: 0px; +} +.B { + /* Rendering with 2px depends on OS due to optimization */ + border-width: 0px; +} +.C { + border-width: 6px; +} +.D { + border-width: 8px; +} +.E { + border-width: 16px; +} +.F { + border-width: 24px; +} +.G { + border-width: 32px; +} +.H { + border-width: 48px; +} +.I { + border-width: 60px; +} + </style> + </head> + <body> + <div class="box"> + <table> + <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr> + <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr> + <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr> + </table> + <img class="mask" src="border-dotted-no-radius-filled-mask.png"> + </div> + <div class="box"> + <table> + <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr> + <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr> + <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr> + </table> + <img class="mask" src="border-dotted-no-radius-unfilled-mask.png"> + </div> + </body> +</html> + diff --git a/layout/reftests/border-dotted/border-dotted-radius-filled-mask.png b/layout/reftests/border-dotted/border-dotted-radius-filled-mask.png Binary files differnew file mode 100644 index 0000000000..401c6e3d1e --- /dev/null +++ b/layout/reftests/border-dotted/border-dotted-radius-filled-mask.png diff --git a/layout/reftests/border-dotted/border-dotted-radius-unfilled-mask.png b/layout/reftests/border-dotted/border-dotted-radius-unfilled-mask.png Binary files differnew file mode 100644 index 0000000000..a35d2f3678 --- /dev/null +++ b/layout/reftests/border-dotted/border-dotted-radius-unfilled-mask.png diff --git a/layout/reftests/border-dotted/border-dotted-radius-zero-filled-mask.png b/layout/reftests/border-dotted/border-dotted-radius-zero-filled-mask.png Binary files differnew file mode 100644 index 0000000000..193f5f2dae --- /dev/null +++ b/layout/reftests/border-dotted/border-dotted-radius-zero-filled-mask.png diff --git a/layout/reftests/border-dotted/border-dotted-radius-zero-unfilled-mask.png b/layout/reftests/border-dotted/border-dotted-radius-zero-unfilled-mask.png Binary files differnew file mode 100644 index 0000000000..5b20585fb0 --- /dev/null +++ b/layout/reftests/border-dotted/border-dotted-radius-zero-unfilled-mask.png diff --git a/layout/reftests/border-dotted/border-dotted-radius-zero.html b/layout/reftests/border-dotted/border-dotted-radius-zero.html new file mode 100644 index 0000000000..8b8980ac4c --- /dev/null +++ b/layout/reftests/border-dotted/border-dotted-radius-zero.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>dashed border with radius</title> + <style> +.box { + position: relative; + width: 220px; + height: 220px; +} +.mask { + position: absolute; + top: 0px; + left: 0px; + width: 220px; + height: 220px; +} + +div.border { + border-style: dotted; + border-width: 4px 0 4px 0px; + width: 200px; + height: 200px; + border-top-right-radius: 40px 200px; +} + </style> + </head> + <body> + <div class="box"> + <div class="border"> + </div> + <img class="mask" src="border-dotted-radius-zero-filled-mask.png"> + </div> + <div class="box"> + <div class="border"> + </div> + <img class="mask" src="border-dotted-radius-zero-unfilled-mask.png"> + </div> + </body> +</html> + diff --git a/layout/reftests/border-dotted/border-dotted-radius.html b/layout/reftests/border-dotted/border-dotted-radius.html new file mode 100644 index 0000000000..a303e70145 --- /dev/null +++ b/layout/reftests/border-dotted/border-dotted-radius.html @@ -0,0 +1,87 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>dotted border with radius</title> + <style> +.box { + position: relative; + width: 420px; + height: 420px; +} +.mask { + position: absolute; + top: 0px; + left: 0px; +} + +table { + border-collapse: separate; + border-spacing: 10px; + empty-cells: show; +} +td { + border-style: dotted; + border-radius: 24px; + border-color: black; + height: 120px; + width: 120px; + box-sizing: border-box; +} + +/* Bug 1303094 - Disable unreliable 1px and 2px tests. */ +.no-fill { + border-style: solid; +} +.no-unfill { + border-style: none; +} +.A { + border-width: 1px; +} +.B { + border-width: 2px; +} +.C { + border-width: 6px; +} +.D { + border-width: 8px; +} +.E { + border-width: 16px; +} +.F { + border-width: 24px; +} +.G { + border-width: 32px; +} +.H { + border-width: 48px; +} +.I { + border-width: 60px; +} + </style> + </head> + <body> + <div class="box"> + <table> + <tr><td class="A no-fill"></td><td class="B no-fill"></td><td class="C"></td></tr> + <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr> + <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr> + </table> + <img class="mask" src="border-dotted-radius-filled-mask.png"> + </div> + <div class="box"> + <table> + <tr><td class="A no-unfill"></td><td class="B no-unfill"></td><td class="C"></td></tr> + <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr> + <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr> + </table> + <img class="mask" src="border-dotted-radius-unfilled-mask.png"> + </div> + </body> +</html> + diff --git a/layout/reftests/border-dotted/border-mixed-filled-mask.png b/layout/reftests/border-dotted/border-mixed-filled-mask.png Binary files differnew file mode 100644 index 0000000000..b36fec5371 --- /dev/null +++ b/layout/reftests/border-dotted/border-mixed-filled-mask.png diff --git a/layout/reftests/border-dotted/border-mixed-unfilled-mask.png b/layout/reftests/border-dotted/border-mixed-unfilled-mask.png Binary files differnew file mode 100644 index 0000000000..dab78f742e --- /dev/null +++ b/layout/reftests/border-dotted/border-mixed-unfilled-mask.png diff --git a/layout/reftests/border-dotted/border-mixed.html b/layout/reftests/border-dotted/border-mixed.html new file mode 100644 index 0000000000..145759e9f0 --- /dev/null +++ b/layout/reftests/border-dotted/border-mixed.html @@ -0,0 +1,79 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>mixed border with mixed radius</title> + <style> +.box { + position: relative; + width: 420px; + height: 420px; +} +.mask { + position: absolute; + top: 0px; + left: 0px; +} + +table { + border-collapse: separate; + border-spacing: 10px; + empty-cells: show; +} +td { + border-color: black; + border-width: 12px 18px 8px 24px; + border-style: dotted dotted dashed double; + height: 120px; + width: 120px; + box-sizing: border-box; +} + +.A { +} +.B { + border-radius: 8px; +} +.C { + border-radius: 16px; +} +.D { + border-radius: 32px; +} +.E { + border-radius: 48px; +} +.F { + border-radius: 60px; +} +.G { + border-radius: 60px/24px; +} +.H { + border-radius: 0px 60px; +} +.I { + border-radius: 60px 0px; +} + </style> + </head> + <body> + <div class="box"> + <table> + <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr> + <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr> + <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr> + </table> + <img class="mask" src="border-mixed-filled-mask.png"> + </div> + <div class="box"> + <table> + <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr> + <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr> + <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr> + </table> + <img class="mask" src="border-mixed-unfilled-mask.png"> + </div> + </body> +</html> + diff --git a/layout/reftests/border-dotted/masked-small.html b/layout/reftests/border-dotted/masked-small.html new file mode 100644 index 0000000000..b5869f4d64 --- /dev/null +++ b/layout/reftests/border-dotted/masked-small.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>Correctly masked page</title> + <style> +.box { + position: relative; + width: 220px; + height: 220px; +} + </style> + </head> + <body> + <div class="box" style="background-color: black;"> + </div> + <div class="box" style="background-color: white;"> + </div> + </body> +</html> + diff --git a/layout/reftests/border-dotted/masked-zoom.html b/layout/reftests/border-dotted/masked-zoom.html new file mode 100644 index 0000000000..afe936b876 --- /dev/null +++ b/layout/reftests/border-dotted/masked-zoom.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html reftest-zoom="1.3300000429153442"> + <head> + <meta charset="utf-8"> + <title>Correctly masked page</title> + <style> +.box { + position: relative; + width: 420px; + height: 420px; +} + </style> + </head> + <body> + <div class="box" style="background-color: black;"> + </div> + <div class="box" style="background-color: white;"> + </div> + </body> +</html> + diff --git a/layout/reftests/border-dotted/masked.html b/layout/reftests/border-dotted/masked.html new file mode 100644 index 0000000000..80599fb013 --- /dev/null +++ b/layout/reftests/border-dotted/masked.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>Correctly masked page</title> + <style> +.box { + position: relative; + width: 420px; + height: 420px; +} + </style> + </head> + <body> + <div class="box" style="background-color: black;"> + </div> + <div class="box" style="background-color: white;"> + </div> + </body> +</html> + diff --git a/layout/reftests/border-dotted/reftest.list b/layout/reftests/border-dotted/reftest.list new file mode 100644 index 0000000000..329775b20f --- /dev/null +++ b/layout/reftests/border-dotted/reftest.list @@ -0,0 +1,19 @@ +# Composing dotted/dashed border rendering and not-filled or not-unfilled mask +# matches to full-filled box, using fuzzyy because of anti-aliasing. +# These check filled and unfilled regions with solid opaque color, +# so difference less than 80 is ignorable. + +# XXX: We mark fails-if to these tests for now to enable styled border in WR. +# We should remove them after Bug 1399485 is fixed. +fuzzy(0-80,0-1500) fails-if(!useDrawSnapshot) == border-dotted-interaction.html masked.html +fuzzy(0-80,0-1500) fails == border-dotted-no-radius.html masked.html +fuzzy(0-80,0-1500) fails == border-dotted-radius.html masked.html +fuzzy(0-80,0-1500) fails-if(!useDrawSnapshot) == border-dashed-no-radius.html masked.html +fuzzy(0-80,0-1500) fails == border-dashed-radius.html masked.html +fuzzy(0-80,0-1500) fails == border-mixed.html masked.html +fuzzy(0-80,0-1500) fails == border-dashed-non-integer.html masked.html +fuzzy(0-80,0-1500) fails fails-if(useDrawSnapshot) == border-dashed-radius-zoom.html masked-zoom.html +fuzzy(0-80,0-1500) fails-if(!useDrawSnapshot) == border-dotted-radius-zero.html masked-small.html +== 1752624.html 1752624-ref.html +# 1761756.html uses the fallback rendering and the result is slightly different +fuzzy(0-200,0-200) == 1761756.html 1761756-ref.html |
