diff options
Diffstat (limited to 'layout/reftests/box-shadow')
85 files changed, 1951 insertions, 0 deletions
diff --git a/layout/reftests/box-shadow/1178575-2-ref.html b/layout/reftests/box-shadow/1178575-2-ref.html new file mode 100644 index 0000000000..2e2b09a57c --- /dev/null +++ b/layout/reftests/box-shadow/1178575-2-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase #2 for bug 1178575</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:20px; + } + + div { + position: absolute; + left: 0; + right: 0; + box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5); + margin-top: 10px; + height: 40px; + } + + span { + position: relative; + display: block; + overflow: hidden; + height: 100px; + } + + </style> +</head> +<body><span><div></div><span></body></html> diff --git a/layout/reftests/box-shadow/1178575-2.html b/layout/reftests/box-shadow/1178575-2.html new file mode 100644 index 0000000000..7bcdadcb8e --- /dev/null +++ b/layout/reftests/box-shadow/1178575-2.html @@ -0,0 +1,35 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>Testcase #2 for bug 1178575</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:20px; + } + + div { + position: absolute; + left: 0; + right: 0; + box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5); + margin-top: 10px; + } + + span { + position: relative; + display: block; + overflow: hidden; + height: 200px; + } + + </style> +<script> +function tweak() { + document.querySelector('div').style.height = "40px"; + document.documentElement.removeAttribute("class"); +} +window.addEventListener("MozReftestInvalidate", tweak); +</script> +</head> +<body><span><div></div><span></body></html> diff --git a/layout/reftests/box-shadow/1178575-ref.html b/layout/reftests/box-shadow/1178575-ref.html new file mode 100644 index 0000000000..3a6442dddb --- /dev/null +++ b/layout/reftests/box-shadow/1178575-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1178575</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + div { + position: absolute; + left: 0; + right: 0; + box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5); + margin-top: 10px; + height: 3em; + } + + </style> +</head> +<body><div></div></body></html> diff --git a/layout/reftests/box-shadow/1178575.html b/layout/reftests/box-shadow/1178575.html new file mode 100644 index 0000000000..8b54c1c7e7 --- /dev/null +++ b/layout/reftests/box-shadow/1178575.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>Testcase for bug 1178575</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + div { + position: absolute; + left: 0; + right: 0; + box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5); + margin-top: 10px; + } + + </style> +<script> +function tweak() { + document.querySelector('div').style.height = "3em"; + document.documentElement.removeAttribute("class"); +} +window.addEventListener("MozReftestInvalidate", tweak); +</script> +</head> +<body><div></div></body></html> diff --git a/layout/reftests/box-shadow/1212823-1-ref.html b/layout/reftests/box-shadow/1212823-1-ref.html new file mode 100644 index 0000000000..91cf26d3cc --- /dev/null +++ b/layout/reftests/box-shadow/1212823-1-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body> +<div style="width:314px; height:16px; top:10px; position:absolute; left:200px; background-color:red; z-index:-1"></div> +<input style="width:300px; height:10px;"></input> +</body> +</html> diff --git a/layout/reftests/box-shadow/1212823-1.html b/layout/reftests/box-shadow/1212823-1.html new file mode 100644 index 0000000000..2337ddf75f --- /dev/null +++ b/layout/reftests/box-shadow/1212823-1.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body> +<input style="width:300px; height:10px; box-shadow: 200px 0px 0px 0px red;"></input> +</body> +</html> diff --git a/layout/reftests/box-shadow/1212823-2-ref.html b/layout/reftests/box-shadow/1212823-2-ref.html new file mode 100644 index 0000000000..531d868bca --- /dev/null +++ b/layout/reftests/box-shadow/1212823-2-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<!-- This relies on the precise widget etc values. Feel free to adjust this as + needed as long as the bug itself doesn't regress. font-size: 0 and + vertical-align: top avoids depending on font metrics --> +<div style="width: 316px; height: 6px; position: absolute; left: 200px; border-radius: 2px; background-color: red; z-index:-1"></div> +<input style="width: 300px; font-size: 0; vertical-align: top"></input> diff --git a/layout/reftests/box-shadow/1212823-2.html b/layout/reftests/box-shadow/1212823-2.html new file mode 100644 index 0000000000..2736787d5f --- /dev/null +++ b/layout/reftests/box-shadow/1212823-2.html @@ -0,0 +1,2 @@ +<!DOCTYPE HTML> +<input style="width: 300px; box-shadow: 200px 0px 0px 0px red; font-size: 0; vertical-align: top"></input> diff --git a/layout/reftests/box-shadow/611574-1-ref.html b/layout/reftests/box-shadow/611574-1-ref.html new file mode 100644 index 0000000000..53fce85e47 --- /dev/null +++ b/layout/reftests/box-shadow/611574-1-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<html><head><style> +button,span,fieldset { background-color: #0F0; break-inside:avoid; } +body { font-size:12px; } +</style></head> +<body> +<div style="column-count:3;height:600px;column-fill:auto"> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> + +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> + +<p><span>No Blur Radius</span> +<p><span>No Blur Radius</span> +<p><span style="box-sizing:border-box;">No Blur Radius</span> +<p><span>No Blur Radius</span> +<p><span>No Blur Radius</span> + +<p><span>2px Blur Radius</span> +<p><span>2px Blur Radius</span> +<p><span style="box-sizing:border-box;">2px Blur Radius</span> +<p><span>2px Blur Radius</span> +<p><span>2px Blur Radius</span> + +<p><fieldset>No Blur Radius</fieldset> +<p><fieldset><legend>No</legend> Blur Radius</fieldset> +<p><fieldset>No Blur Radius</fieldset> +<p><fieldset style="box-sizing:border-box;">No Blur Radius</fieldset> +<p><fieldset>No Blur Radius</fieldset> +<p><fieldset>No Blur Radius</fieldset> + +<p><fieldset>2px Blur Radius</fieldset> +<p><fieldset><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset>2px Blur Radius</fieldset> +<p><fieldset style="box-sizing:border-box;">2px Blur Radius</fieldset> +<p><fieldset>2px Blur Radius</fieldset> +<p><fieldset>2px Blur Radius</fieldset> + +<p><fieldset style="display:inline;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;"><legend>No</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline;">No Blur Radius</fieldset> +<p><fieldset style="display:inline; box-sizing:border-box;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;">No Blur Radius</fieldset> + +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;"><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline; box-sizing:border-box;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> + +</div> +</body> +</html> diff --git a/layout/reftests/box-shadow/611574-1.html b/layout/reftests/box-shadow/611574-1.html new file mode 100644 index 0000000000..b155f5a414 --- /dev/null +++ b/layout/reftests/box-shadow/611574-1.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<html><head><style> +button,span,fieldset { background-color: #0F0; break-inside:avoid; } +body { font-size:12px; } +</style></head> +<body> +<div style="column-count:3;height:600px;column-fill:auto"> +<p><button style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</button> + +<p><button style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</button> + +<p><span style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</span> +<p><span style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</span> +<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</span> +<p><span style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</span> +<p><span style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</span> + +<p><span style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</span> +<p><span style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</span> +<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</span> +<p><span style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</span> +<p><span style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</span> + +<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset> + +<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset> + +<p><fieldset style="display:inline; box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline; box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset> + +<p><fieldset style="display:inline; box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline; box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset> + +</div> +</body> +</html> diff --git a/layout/reftests/box-shadow/611574-2-ref.html b/layout/reftests/box-shadow/611574-2-ref.html new file mode 100644 index 0000000000..b6f50300d9 --- /dev/null +++ b/layout/reftests/box-shadow/611574-2-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE HTML> +<html> +<head><style> +button,span,fieldset { border-radius: 7px 3px; background-color: #0F0; } +button { border: none; outline: 3px solid black; outline-offset: -2px; } +</style></head> +<body style="margin:30px"> +<div style="column-count:3; column-fill:auto; height:600px"> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> + +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> + +<!-- XXX TODO: SPAN does not work due to differences in anti-aliasing with the test +<p><span>No Blur Radius</span> +<p><span>No Blur Radius</span> +<p><span style="box-sizing:border-box;">No Blur Radius</span> +<p><span>No Blur Radius</span> +<p><span>No Blur Radius</span> + +<p><span>2px Blur Radius</span> +<p><span>2px Blur Radius</span> +<p><span style="box-sizing:border-box;">2px Blur Radius</span> +<p><span>2px Blur Radius</span> +<p><span>2px Blur Radius</span> +--> + +<p><fieldset>No Blur Radius</fieldset> +<p><fieldset><legend>No</legend> Blur Radius</fieldset> +<p><fieldset>No Blur Radius</fieldset> +<p><fieldset style="box-sizing:border-box;">No Blur Radius</fieldset> +<p><fieldset>No Blur Radius</fieldset> +<p><fieldset>No Blur Radius</fieldset> + +<p><fieldset>2px Blur Radius</fieldset> +<p><fieldset><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset>2px Blur Radius</fieldset> +<p><fieldset style="box-sizing:border-box;">2px Blur Radius</fieldset> +<p><fieldset>2px Blur Radius</fieldset> +<p><fieldset>2px Blur Radius</fieldset> + +<p><fieldset style="display:inline;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;"><legend>No</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline;">No Blur Radius</fieldset> +<p><fieldset style="display:inline; box-sizing:border-box;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;">No Blur Radius</fieldset> + +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;"><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline; box-sizing:border-box;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> + +</div> +</body> +</html> diff --git a/layout/reftests/box-shadow/611574-2.html b/layout/reftests/box-shadow/611574-2.html new file mode 100644 index 0000000000..db9c2df899 --- /dev/null +++ b/layout/reftests/box-shadow/611574-2.html @@ -0,0 +1,67 @@ +<!DOCTYPE HTML> +<html> +<head><style> +button,span,fieldset { border-radius: 7px 3px; background-color: #0F0; } +button { border: none; outline: 3px solid black; outline-offset: -2px; } +</style></head> +<body style="margin:30px"> +<div style="column-count:3; column-fill:auto; height:600px"> +<p><button style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</button> + +<p><button style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</button> + +<!-- XXX TODO: SPAN does not work due to differences in anti-aliasing with the reference +<p><span style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</span> +<p><span style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</span> +<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</span> +<p><span style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</span> +<p><span style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</span> + +<p><span style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</span> +<p><span style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</span> +<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</span> +<p><span style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</span> +<p><span style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</span> +--> + +<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset> + +<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset> + +<p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset> + +<p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset> + +</div> + + +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-basic-ref.html b/layout/reftests/box-shadow/boxshadow-basic-ref.html new file mode 100644 index 0000000000..0a4639491b --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-basic-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + background-color: green; + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + z-index: 2; +} + +#theshadow { + background-color: black; + width: 300px; + height: 100px; + position: absolute; + top: 23px; + left: 23px; + z-index: 1; +} +</style> + +<div id="theshadow"> </div><div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-basic.html b/layout/reftests/box-shadow/boxshadow-basic.html new file mode 100644 index 0000000000..0870136d3d --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-basic.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + box-shadow: 3px 3px black; +} +</style> + +<div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-blur-2-notref.html b/layout/reftests/box-shadow/boxshadow-blur-2-notref.html new file mode 100644 index 0000000000..130d921585 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-blur-2-notref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +body { margin: 0 } +p { +height: 1200px; +width: 100px; +box-shadow: 0px -100px 100px black; +} +</style> +<p> +<div style="position:absolute; background: white; top: 100px; left: 212px; height: 2px; width: 2px"></div> diff --git a/layout/reftests/box-shadow/boxshadow-blur-2-ref.html b/layout/reftests/box-shadow/boxshadow-blur-2-ref.html new file mode 100644 index 0000000000..73d192a7ee --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-blur-2-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +body { margin: 0 } +p { +height: 1200px; +width: 100px; +box-shadow: 0px -100px 100px black; +} +</style> +<p> +<div style="position:absolute; background: white; top: 100px; left: 215px; height: 2px; width: 2px"></div> diff --git a/layout/reftests/box-shadow/boxshadow-blur-2.html b/layout/reftests/box-shadow/boxshadow-blur-2.html new file mode 100644 index 0000000000..173e724de3 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-blur-2.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +body { margin: 0 } +p { +height: 1200px; +width: 100px; +box-shadow: 0px -100px 100px black; +} +</style> +<p> diff --git a/layout/reftests/box-shadow/boxshadow-blur-notref.html b/layout/reftests/box-shadow/boxshadow-blur-notref.html new file mode 100644 index 0000000000..890c8e39ca --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-blur-notref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + box-shadow: 3px 3px red; +} +</style> + +<div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-blur-notref2.html b/layout/reftests/box-shadow/boxshadow-blur-notref2.html new file mode 100644 index 0000000000..fdfdc48f5f --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-blur-notref2.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; +} +</style> + +<div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-blur.html b/layout/reftests/box-shadow/boxshadow-blur.html new file mode 100644 index 0000000000..f70c1cd1c0 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-blur.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + box-shadow: 3px 3px 2px red; +} +</style> + +<div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-border-radius-int-ref.html b/layout/reftests/box-shadow/boxshadow-border-radius-int-ref.html new file mode 100644 index 0000000000..e797c61a26 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-border-radius-int-ref.html @@ -0,0 +1,31 @@ +<html> +<style> +#boxShadow { + height: 210px; + width: 290px; + box-shadow: 0px 0px 2px graytext inset; +} + +#leftCover { + width: 30px; + height: 300px; + background-color: white; + position: absolute; + left: 0px; + top: 0px; +} + +#rightCover { + width: 20px; + height: 300px; + background-color: white; + position: absolute; + top: 0px; + left: 280px; +} +</style> +<body> +<div id="boxShadow">test</div> +<div id="leftCover"></div> +<div id="rightCover"></div> +</body> diff --git a/layout/reftests/box-shadow/boxshadow-border-radius-int.html b/layout/reftests/box-shadow/boxshadow-border-radius-int.html new file mode 100644 index 0000000000..737641576a --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-border-radius-int.html @@ -0,0 +1,32 @@ +<html> +<style> +#boxShadow { + height: 210px; + width: 290px; + border-radius: 11px; + box-shadow: 0px 0px 2px graytext inset; +} + +#leftCover { + width: 30px; + height: 300px; + background-color: white; + position: absolute; + left: 0px; + top: 0px; +} + +#rightCover { + width: 20px; + height: 300px; + background-color: white; + position: absolute; + top: 0px; + left: 280px; +} +</style> +<body> +<div id="boxShadow">test</div> +<div id="leftCover"></div> +<div id="rightCover"></div> +</body> diff --git a/layout/reftests/box-shadow/boxshadow-button-ref.html b/layout/reftests/box-shadow/boxshadow-button-ref.html new file mode 100644 index 0000000000..9d026129d4 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-button-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<style> +#a, #b { + width: 100px; + height: 100px; + background-color: grey; + -moz-appearance: none; + box-shadow: 4px 4px 3px black; + border: none !important; + position: absolute; +} + +#a { + top: 20px; + left: 20px; +} + +#b { + top: 170px; + left: 20px; +</style> + +<div id="a"> </div> +<div id="b"> </div> diff --git a/layout/reftests/box-shadow/boxshadow-button.html b/layout/reftests/box-shadow/boxshadow-button.html new file mode 100644 index 0000000000..f1522536db --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-button.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<style> +#a, #b { + width: 100px; + height: 100px; + background-color: grey; + -moz-appearance: none; + box-shadow: 4px 4px 3px black; + border: none !important; + position: absolute; +} + +#a { + top: 20px; + left: 20px; +} + +#b { + top: 170px; + left: 20px; +</style> + +<input type="button" id="a" value=""></input> +<button id="b"></button> diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding-middle-ref.html b/layout/reftests/box-shadow/boxshadow-color-rounding-middle-ref.html new file mode 100644 index 0000000000..aa2a57e81d --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-color-rounding-middle-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<style> +#outerDiv { + width: 500px; + height: 500px; + background: lime; + position: absolute; +} + +#middleBlur { + width: 300px; + height: 300px; + margin-left: 100px; + margin-top: 100px; + background: black; + box-shadow: inset 0 0 20px 100px lime; +} +</style> + +<div id="outerDiv"> + <div id="middleBlur"> + </div> +</div> diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding-middle.html b/layout/reftests/box-shadow/boxshadow-color-rounding-middle.html new file mode 100644 index 0000000000..1693fb9a3d --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-color-rounding-middle.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +#thediv { + width: 500px; + height: 500px; + background: black; + box-shadow: inset 0 0 20px 200px lime; +} +</style> + +<div id="thediv"></div> diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding-ref.html b/layout/reftests/box-shadow/boxshadow-color-rounding-ref.html new file mode 100644 index 0000000000..95fa9075ed --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-color-rounding-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +#thediv { + width: 300px; + height: 300px; + background: lime; +} +</style> + +<div id="thediv"></div> diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding.html b/layout/reftests/box-shadow/boxshadow-color-rounding.html new file mode 100644 index 0000000000..057c077eb6 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-color-rounding.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +#thediv { + width: 300px; + height: 300px; + background: black; + box-shadow: inset 0 0 20px 200px lime; +} +</style> + +<div id="thediv"></div> diff --git a/layout/reftests/box-shadow/boxshadow-dynamic-ref.xhtml b/layout/reftests/box-shadow/boxshadow-dynamic-ref.xhtml new file mode 100644 index 0000000000..0aaddc1a18 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-dynamic-ref.xhtml @@ -0,0 +1,7 @@ +<?xml version="1.0"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> +<hbox flex="1" + style="margin:50px; background:yellow; + box-shadow: 1px 2px 2px black, 0 0 7px white, 0 0 14px rgb(50, 170, 255), 0 0 21px rgb(50, 170, 255); + border-radius: 10px;"/> +</window> diff --git a/layout/reftests/box-shadow/boxshadow-dynamic.xhtml b/layout/reftests/box-shadow/boxshadow-dynamic.xhtml new file mode 100644 index 0000000000..97ad1c57ea --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-dynamic.xhtml @@ -0,0 +1,33 @@ +<?xml version="1.0"?> +<?xml-stylesheet type="text/css" href="data:text/css, + +hbox { + margin: 50px; + background: yellow; +} + +hbox[x] { + box-shadow: 1px 2px 2px black, 0 0 7px white, 0 0 14px rgb(50, 170, 255), 0 0 21px rgb(50, 170, 255); + border-radius: 10px; +} + +"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + class="reftest-wait"> + + <script> + <![CDATA[ + + document.documentElement.addEventListener("MozReftestInvalidate", + doTest, false); + + function doTest() { + document.getElementById("hbox1").setAttribute("x",1); + document.documentElement.removeAttribute("class"); + } + + ]]> + </script> + + <hbox id="hbox1" flex="1"/> +</window> diff --git a/layout/reftests/box-shadow/boxshadow-fileupload-ref.html b/layout/reftests/box-shadow/boxshadow-fileupload-ref.html new file mode 100644 index 0000000000..ab36e2af5c --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-fileupload-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<html><head> + +<style> +#s { + position: absolute; + top: 20px; + left: 20px; + display: block; + width: 400px; + height: 150px; +} + +#p { + background-color: black; + width: 400px; + height: 150px; + position: absolute; + top: 270px; + left: 20px; +} +</style> + +</head> +<body> + +<input type="file" id="s" /> +<div id="p"> </div> + +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-fileupload.html b/layout/reftests/box-shadow/boxshadow-fileupload.html new file mode 100644 index 0000000000..28ca6ea4e4 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-fileupload.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html><head> + +<style> +#s { + position: absolute; + top: 20px; + left: 20px; + display: block; + width: 400px; + height: 150px; + box-shadow: 0px 250px black; +} +</style> + +</head> +<body> + +<input type="file" id="s" /> + +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-inner-basic-ref.svg b/layout/reftests/box-shadow/boxshadow-inner-basic-ref.svg new file mode 100644 index 0000000000..ed63f9a9ae --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inner-basic-ref.svg @@ -0,0 +1,41 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> +<!-- This reference SVG must perform *exactly* the same path construction, + clipping, and filling operations that PaintBoxShadowInner does for + the HTML test file. If it doesn't match perfectly, antialiased + pixels at the curved edges will not agree. + + PaintBoxShadowInner defines both its second (nonrectangular) + clipping path and its fill path as the even-odd-rule compositions + of two rectangles, one with nonzero corner radius. It is + impossible to express "the path consisting of the even-odd-rule + composition of two |rect| elements" in SVG. This is a minor + nuisance because we have to write everything out using |path|, + plus a major nuisance because Gecko uses the same ellipse-to- + Bezier conversion for rounded rectangles in SVG and HTML, but the + SVG 'A' operator uses a different one. Therefore we cannot use 'A'. + The 'C' parameters here were obtained by dumping out the cairo + operations used to draw the HTML, using cairo-trace. --> + <defs> + <clipPath id="outer"> + <rect x="16" y="16" width="240" height="240"/> + </clipPath> + <clipPath id="inner"> + <path clip-rule="evenodd" + d="M 248 16 + H 24 C 19.58468 16 16 19.58468 16 24 + V 248 C 16 252.41532 19.58468 256 24 256 + H 248 C 252.41532 256 256 252.41532 256 248 + V 24 C 256 19.58468 252.41532 16 248 16 Z + M 48 56 H 272 V 296 H 48 Z"/> + </clipPath> + </defs> + <g clip-path="url(#outer)"> + <path fill="grey" fill-rule="evenodd" clip-path="url(#inner)" + d="M 16 16 H 256 V 256 H 16 Z + M 280 48 + H 56 C 51.58468 48 48 51.58468 48 56 + V 280 C 48 284.41532 51.58468 288 56 288 + H 280 C 284.41532 288 288 284.41532 288 280 + V 56 C 288 51.58468 284.41532 48 280 48 Z"/> + </g> +</svg> diff --git a/layout/reftests/box-shadow/boxshadow-inner-basic.html b/layout/reftests/box-shadow/boxshadow-inner-basic.html new file mode 100644 index 0000000000..8ba6109657 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inner-basic.html @@ -0,0 +1,8 @@ +<!doctype html> +<div style=" + width: 240px; height: 240px; + border-radius: 8px; + box-shadow: 32px 32px grey inset; + position: absolute; + top: 16px; left: 16px; +"></div> diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-border-radius-ref.html b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius-ref.html new file mode 100644 index 0000000000..77c8d299b6 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> +<style> +#ref { + background: black; + width: 575px; + height: 5px; + margin-left: 125px; +} + +</style> +</head> +<body> +<div id="ref"> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-border-radius.html b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius.html new file mode 100644 index 0000000000..87ce0f01c6 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<style> +#boxShadow { + background: gray; + width: 700px; + height: 20px; + box-shadow: 15px 15px 3px black inset; + border-radius: 100px 0px 0px 0px; +} + +#cutLeft { + background: white; + width: 125px; + height: 20px; + position: absolute; +} + +#cutAcross { + background: white; + width: 700px; + height: 15px; + position: absolute; + margin-top: 5px; +} + +</style> +</head> +<body> +<div id="cutLeft"></div> +<div id="cutAcross"></div> +<div id="boxShadow"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-offset-ref.html b/layout/reftests/box-shadow/boxshadow-inset-large-offset-ref.html new file mode 100644 index 0000000000..f117b53ed9 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inset-large-offset-ref.html @@ -0,0 +1,23 @@ +<html> +<head> +<style> +div.test { + width: 530px; + height: 500px; + background-color: black; +} + +div.cover { + width: 500px; + height: 500px; + background-color: black; + position: absolute; + margin-top: 0px; + margin-left: 30px; +} +</style> +<body> +<div class="test"> +</div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-offset.html b/layout/reftests/box-shadow/boxshadow-inset-large-offset.html new file mode 100644 index 0000000000..fe8db9f07a --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inset-large-offset.html @@ -0,0 +1,26 @@ +<html> +<head> +<style> +div.test { + width: 500px; + height: 500px; + box-shadow: inset 70px 70px 50px 0px black; + position: absolute; +} + +div.cover { + width: 500px; + height: 500px; + background-color: black; + position: absolute; + margin-top: 0px; + margin-left: 30px; +} +</style> +<body> +<div class="test"> +</div> +<div class="cover"> +</div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-inset-neg-spread.html b/layout/reftests/box-shadow/boxshadow-inset-neg-spread.html new file mode 100644 index 0000000000..b018ea062e --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inset-neg-spread.html @@ -0,0 +1,17 @@ +<html> +<head> +<style> +div.neg +{ + margin: 35px auto 95px auto; + width: 200px; + height: 200px; + box-shadow: 0px 0px 15px -20px #808080 inset; +} +</style> +</head> + +<body> +<div class="neg"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-inset-neg-spread2-ref.html b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2-ref.html new file mode 100644 index 0000000000..b6b1a3dfc2 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2-ref.html @@ -0,0 +1,16 @@ +<html> +<head> +<style> +.test { + background-color: #fec; + display: inline-block; + width: 5em; + height: 5em; +} +</style> +</head> + +<body> +<div class="test"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-inset-neg-spread2.html b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2.html new file mode 100644 index 0000000000..b846f25aba --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2.html @@ -0,0 +1,20 @@ +<html> +<head> +<style> +.test { + background-color: #fec; + display: inline-block; + width: 5em; + height: 5em; +} + +.first { + box-shadow: inset 0 0 1px -3px rgba(0,0,10,0.25); +} +</style> +</head> + +<body> +<div class="first test"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-large-border-radius-ref.html b/layout/reftests/box-shadow/boxshadow-large-border-radius-ref.html new file mode 100644 index 0000000000..d914fb7abc --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-large-border-radius-ref.html @@ -0,0 +1,37 @@ +<html> +<head> +<style> + #leftCover { + width: 30px; + height: 50px; + background-color: white; + position: absolute; + left: 0px; + top: 0px; + } + + #rightCover { + width: 20px; + height: 120px; + background-color: white; + position: absolute; + top: 0px; + left: 150px; + } + + #boxShadowRegular { + width: 152px; + height: 19.5px; + box-shadow: 0px 0px 1px #3b99FC inset, + 0px 0px 4px 1px #3B99FC, + 0px 0px 1.5px 1px #3B99FC; + position: absolute; + } + +</style> +</head> +<html> + <div id="boxShadowRegular"></div> + <div id="leftCover"></div> + <div id="rightCover"></div> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-large-border-radius.html b/layout/reftests/box-shadow/boxshadow-large-border-radius.html new file mode 100644 index 0000000000..90eee1db36 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-large-border-radius.html @@ -0,0 +1,37 @@ +<html> +<head> +<style> + #boxShadow { + width: 152px; + height: 19.5px; + box-shadow: 0px 0px 1px #3b99FC inset, + 0px 0px 4px 1px #3B99FC, + 0px 0px 1.5px 1px #3B99FC; + border-radius: 10000px 0px 0px 10000px; + position: absolute; + } + + #leftCover { + width: 30px; + height: 50px; + background-color: white; + position: absolute; + left: 0px; + top: 0px; + } + + #rightCover { + width: 20px; + height: 120px; + background-color: white; + position: absolute; + top: 0px; + left: 150px; + } +</style> +</head> +<html> + <div id="boxShadow"></div> + <div id="leftCover"></div> + <div id="rightCover"></div> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-large-offset-ref.html b/layout/reftests/box-shadow/boxshadow-large-offset-ref.html new file mode 100644 index 0000000000..2160b81479 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-large-offset-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<style> +.top { + background-color: red; + width: 800px; + height: 400px; +} + +.bottom { + background-color: #fec; + width: 800px; + height: 400px; +} + +.leftCut { + position: absolute; + margin-left: 0px; + margin-top: 0px; + width: 10px; + height: 800px; + background-color: black; +} + +.rightCut { + position: absolute; + margin-left: 790px; + margin-top: 0px; + width: 10px; + height: 800px; + background-color: black; +} + +.centerCut { + position: absolute; + margin-top: 395px; + width: 800px; + height: 20px; + background-color: black; +} +</style> + +<body> +<div class="leftCut"></div> +<div class="rightCut"></div> +<div class="centerCut"></div> +<div class="top"></div> +<div class="bottom"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-large-offset.html b/layout/reftests/box-shadow/boxshadow-large-offset.html new file mode 100644 index 0000000000..5df87c368b --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-large-offset.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<style> +.test { + background-color: #fec; + display: inline-block; + width: 800px; + height: 800px; +} + +.second { + box-shadow: inset 0 400px 1px 0px red; +} + +.leftCut { + position: absolute; + margin-left: 0px; + margin-top: 0px; + width: 10px; + height: 800px; + background-color: black; +} + +.rightCut { + position: absolute; + margin-left: 790px; + margin-top: 0px; + width: 10px; + height: 800px; + background-color: black; +} + +.centerCut { + position: absolute; + margin-top: 395px; + width: 800px; + height: 20px; + background-color: black; +} + +</style> + +<body> +<div class="leftCut"></div> +<div class="rightCut"></div> +<div class="centerCut"></div> +<div class="test second"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-mixed-2-ref.html b/layout/reftests/box-shadow/boxshadow-mixed-2-ref.html new file mode 100644 index 0000000000..3b57608a23 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-mixed-2-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<title>Reference, bug 1402060</title> +<style> + +.blackAtTop { + width: 100px; + height: 90px; + border-top: 10px solid black; +} + +.blue { + width: 100px; + height: 100px; + background: blue; + margin-left: 10px; +} + +.white { + width: 90px; + height: 90px; + background: white; +} + +</style> + +<div class="blackAtTop"><div class="blue"><div class="white"></div></div></div> diff --git a/layout/reftests/box-shadow/boxshadow-mixed-2.html b/layout/reftests/box-shadow/boxshadow-mixed-2.html new file mode 100644 index 0000000000..5e109524f1 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-mixed-2.html @@ -0,0 +1,13 @@ +<!DOCTYPE HTML> +<title>Testcase, bug 1402060</title> +<style> + +div { + width: 100px; + height: 100px; + box-shadow: inset 0 10px black, 10px 10px blue; +} + +</style> + +<div></div> diff --git a/layout/reftests/box-shadow/boxshadow-mixed-ref.html b/layout/reftests/box-shadow/boxshadow-mixed-ref.html new file mode 100644 index 0000000000..3c71b12e20 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-mixed-ref.html @@ -0,0 +1 @@ +<div style="background: blue padding-box; border: 2px solid red; border-radius: 10px; width: 300px; height: 300px; position: absolute; top: 10px; left: 10px;">inset and outset</div><div style="border-radius: 10px; background-color: green; width: 304px; height: 304px; position: absolute; top: 10px; left: 360px;"> </div> diff --git a/layout/reftests/box-shadow/boxshadow-mixed.html b/layout/reftests/box-shadow/boxshadow-mixed.html new file mode 100644 index 0000000000..796fd409e4 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-mixed.html @@ -0,0 +1 @@ +<div style="border: 2px red solid; border-radius: 10px; width: 300px; height: 300px; box-shadow: 500px 500px 0px 20px blue inset, 350px 0px green; position: absolute; top: 10px; left: 10px;">inset and outset</div> diff --git a/layout/reftests/box-shadow/boxshadow-multiple-ref.html b/layout/reftests/box-shadow/boxshadow-multiple-ref.html new file mode 100644 index 0000000000..9eefe7e746 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-multiple-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + background-color: green; + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + z-index: 4; +} + +#theshadow { + background-color: black; + width: 300px; + height: 100px; + position: absolute; + top: 29px; + left: 29px; + z-index: 1; +} + +#theshadow2 { + background-color: blue; + width: 300px; + height: 100px; + position: absolute; + top: 26px; + left: 26px; + z-index: 2; +} + +#theshadow3 { + background-color: red; + width: 300px; + height: 100px; + position: absolute; + top: 23px; + left: 23px; + z-index: 3; +} +</style> + +<div id="theshadow"> </div><div id="theshadow2"> </div><div id="theshadow3"> </div><div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-multiple.html b/layout/reftests/box-shadow/boxshadow-multiple.html new file mode 100644 index 0000000000..6307c1020d --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-multiple.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + box-shadow: 3px 3px red, 6px 6px blue, 9px 9px black; +} +</style> + +<div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-onecorner-ref.html b/layout/reftests/box-shadow/boxshadow-onecorner-ref.html new file mode 100644 index 0000000000..5a92e99517 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-onecorner-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE HTML> +<div style="position: absolute; top: 300px; left: 70px; width: 360px; height: 160px; border-top-right-radius: 40px; background: red;"> </div> +<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-top-right-radius: 10px; background: yellow;">Test</div> diff --git a/layout/reftests/box-shadow/boxshadow-onecorner.html b/layout/reftests/box-shadow/boxshadow-onecorner.html new file mode 100644 index 0000000000..1f0805b3bd --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-onecorner.html @@ -0,0 +1,2 @@ +<!DOCTYPE HTML> +<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-top-right-radius: 10px; box-shadow: 0 300px 0 30px red; background: yellow;">Test</div> diff --git a/layout/reftests/box-shadow/boxshadow-opacity-ref.html b/layout/reftests/box-shadow/boxshadow-opacity-ref.html new file mode 100644 index 0000000000..4ff7d22395 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-opacity-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + opacity: 0.6; + box-shadow: 3px 3px 2px rgb(255,0,0); +} +</style> + +<div id="thediv"></div> diff --git a/layout/reftests/box-shadow/boxshadow-opacity.html b/layout/reftests/box-shadow/boxshadow-opacity.html new file mode 100644 index 0000000000..585c3081fd --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-opacity.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + box-shadow: 3px 3px 2px rgba(255,0,0,0.6); +} +</style> + +<div id="thediv"></div> diff --git a/layout/reftests/box-shadow/boxshadow-rotated-ref.html b/layout/reftests/box-shadow/boxshadow-rotated-ref.html new file mode 100644 index 0000000000..9888d71f2b --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-rotated-ref.html @@ -0,0 +1,15 @@ +<html> +<head> +<style> +div.second { + margin: 35px auto 95px auto; + box-shadow: 0px 0px 15px 0px #808080; + width: 100; + height: 116.36px; +} +</style> +</head> +<body> +<div class="second"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-rotated.html b/layout/reftests/box-shadow/boxshadow-rotated.html new file mode 100644 index 0000000000..7cc8451f8a --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-rotated.html @@ -0,0 +1,16 @@ +<html> +<head> +<style> +div.first { + margin: 35px auto 95px auto; + box-shadow: 0px 0px 15px 0px #808080; + transform: rotate(-180deg); + width: 100; + height: 116.36px; +} +</style> +</head> +<body> +<div class="first"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-rounded-spread-ref.html b/layout/reftests/box-shadow/boxshadow-rounded-spread-ref.html new file mode 100644 index 0000000000..3b2e5a949c --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-rounded-spread-ref.html @@ -0,0 +1 @@ +<div style="width: 300px; height: 300px; border-radius: 100%; position: absolute; top: 20px; left: 20px;">shadow div</div><div style="border-radius: 100%; width: 320px; height: 320px; background-color: grey; position: absolute; top: 330px; left: 30px;"> </div> diff --git a/layout/reftests/box-shadow/boxshadow-rounded-spread.html b/layout/reftests/box-shadow/boxshadow-rounded-spread.html new file mode 100644 index 0000000000..a43810bca1 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-rounded-spread.html @@ -0,0 +1 @@ +<div style="box-shadow: 20px 320px 0 10px grey; width: 300px; height: 300px; border-radius: 100%; position: absolute; top: 20px; left: 20px;">shadow div</div> diff --git a/layout/reftests/box-shadow/boxshadow-rounding-ref.html b/layout/reftests/box-shadow/boxshadow-rounding-ref.html new file mode 100644 index 0000000000..8f785547ad --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-rounding-ref.html @@ -0,0 +1 @@ +<div style="width: 100px; height: 200px; box-shadow: 3px 3px 2px black; background-color: green;">Hello</div> diff --git a/layout/reftests/box-shadow/boxshadow-rounding.html b/layout/reftests/box-shadow/boxshadow-rounding.html new file mode 100644 index 0000000000..29d812a2cb --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-rounding.html @@ -0,0 +1 @@ +<div style="width: 100.2px; height: 200.2px; box-shadow: 3px 3px 2px black; background-color: green;">Hello</div> diff --git a/layout/reftests/box-shadow/boxshadow-skiprect-ref.html b/layout/reftests/box-shadow/boxshadow-skiprect-ref.html new file mode 100644 index 0000000000..ecebb4bd6f --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-skiprect-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<style> + +#thediv { + width: 400px; + height: 250px; + position: absolute; + top: -500px; + left: -500px; + box-shadow: 540px 540px 10.5px black; +} + +#blankdiv { + width: 400px; + height: 250px; + background-color: white; + position: absolute; + top: 40px; + left: 40px; +} +</style> + +<div id="thediv"> </div> +<div id="blankdiv"> </div> diff --git a/layout/reftests/box-shadow/boxshadow-skiprect.html b/layout/reftests/box-shadow/boxshadow-skiprect.html new file mode 100644 index 0000000000..f888f9d098 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-skiprect.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<style> + +#thediv { + width: 400px; + height: 250px; + position: absolute; + top: 40px; + left: 40px; + box-shadow: 0px 0px 10.5px black; +} +</style> + +<div id="thediv"> </div> diff --git a/layout/reftests/box-shadow/boxshadow-spread-ref.html b/layout/reftests/box-shadow/boxshadow-spread-ref.html new file mode 100644 index 0000000000..2636adc0b3 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-spread-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + background-color: green; + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + z-index: 2; +} + +#theshadow { + background-color: black; + width: 306px; + height: 106px; + position: absolute; + top: 20px; + left: 20px; + z-index: 1; +} +</style> + +<div id="theshadow"> </div><div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-spread.html b/layout/reftests/box-shadow/boxshadow-spread.html new file mode 100644 index 0000000000..a7c9a8c1df --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-spread.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + color: black; + box-shadow: 3px 3px 0px 3px; +} +</style> +<div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-threecorners-ref.html b/layout/reftests/box-shadow/boxshadow-threecorners-ref.html new file mode 100644 index 0000000000..cd9f383e1f --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-threecorners-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE HTML> +<div style="position: absolute; top: 300px; left: 70px; width: 360px; height: 160px; border-bottom-left-radius: 40px; border-top-left-radius: 40px; border-top-right-radius: 40px; background: red;"> </div> +<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; background: yellow;">Test</div> diff --git a/layout/reftests/box-shadow/boxshadow-threecorners.html b/layout/reftests/box-shadow/boxshadow-threecorners.html new file mode 100644 index 0000000000..f00135f959 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-threecorners.html @@ -0,0 +1,2 @@ +<!DOCTYPE HTML> +<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; box-shadow: 0 300px 0 30px red; background: yellow;">Test</div> diff --git a/layout/reftests/box-shadow/boxshadow-twocorners-ref.html b/layout/reftests/box-shadow/boxshadow-twocorners-ref.html new file mode 100644 index 0000000000..bc3263cdb1 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-twocorners-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE HTML> +<div style="position: absolute; top: 300px; left: 70px; width: 360px; height: 160px; border-bottom-left-radius: 40px; border-top-right-radius: 40px; background: red;"> </div> +<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; background: yellow;">Test</div> diff --git a/layout/reftests/box-shadow/boxshadow-twocorners.html b/layout/reftests/box-shadow/boxshadow-twocorners.html new file mode 100644 index 0000000000..e62c316f2b --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-twocorners.html @@ -0,0 +1,2 @@ +<!DOCTYPE HTML> +<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; box-shadow: 0 300px 0 30px red; background: yellow;">Test</div> diff --git a/layout/reftests/box-shadow/fieldset-inset-ref.html b/layout/reftests/box-shadow/fieldset-inset-ref.html new file mode 100644 index 0000000000..6d02c04c8b --- /dev/null +++ b/layout/reftests/box-shadow/fieldset-inset-ref.html @@ -0,0 +1,95 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase #2 for bug 485149</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + +body {padding:20px;} + +field { + display:block; + overflow:hidden; + background:yellow; + + box-shadow: inset 0 0 5px 5px #cccccc; + border:1px solid #000000; + border-radius:7px; + width:200px; + height:50px; + margin-left:5px; + margin-right:2px; + padding:10px; + border-box; +} + +.with-legend { + margin-top:8px; + height:42px; +} + +p { height:40px; margin:0; } + +#mask1 { + position:absolute; + left:0; + top:0; + background:black; + z-index:1; + width:150px; + height:700px; +} + +#mask2 { + position:absolute; + left:170px; + top:330px; + background:black; + z-index:1; + width:150px; + height:300px; +} + +#mask3 { + position:absolute; + left:0; + top:380px; + background:black; + z-index:1; + width:300px; + height:300px; +} + +</style> +</head> +<body> + +<field class="with-legend"> +1 +</field> + +<p></p> +<field class="with-legend" style="position:relative"> +2 +</field> + +<p></p> +<field> +3 +</field> + +<p></p> +<field class="with-legend" style="border-color:transparent"> +4 +</field> + +<div id="mask1"></div> +<div id="mask2"></div> +<div id="mask3"></div> + +</body> +</html> diff --git a/layout/reftests/box-shadow/fieldset-inset.html b/layout/reftests/box-shadow/fieldset-inset.html new file mode 100644 index 0000000000..d49e2411f9 --- /dev/null +++ b/layout/reftests/box-shadow/fieldset-inset.html @@ -0,0 +1,90 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase #2 for bug 485149</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + +body {padding:20px;} + +fieldset { + overflow:hidden; + background:yellow; + + box-shadow: inset 0 0 5px 5px #cccccc; + border:1px solid #000000; + border-radius:7px; + width:200px; + height:50px; + margin-left:5px; + margin-right:2px; + padding:10px; +} + +legend { height:16px; } + +p { height:40px; margin:0; } + +#mask1 { + position:absolute; + left:0; + top:0; + background:black; + z-index:1; + width:150px; + height:700px; +} + +#mask2 { + position:absolute; + left:170px; + top:330px; + background:black; + z-index:1; + width:150px; + height:300px; +} + +#mask3 { + position:absolute; + left:0; + top:380px; + background:black; + z-index:1; + width:300px; + height:300px; +} + +</style> +</head> +<body> + +<fieldset><legend>Legend</legend> +1 +</fieldset> + +<p></p> +<fieldset style="position:relative;"><legend>Legend</legend> +2 +</fieldset> + +<p></p> +<fieldset> +3 +</fieldset> + +<p></p> +<fieldset><legend style="width:150px;"></legend> +4 +</fieldset> + +<div id="mask1"></div> +<div id="mask2"></div> +<div id="mask3"></div> + +</body> +</html> diff --git a/layout/reftests/box-shadow/fieldset-ref.html b/layout/reftests/box-shadow/fieldset-ref.html new file mode 100644 index 0000000000..9196d50636 --- /dev/null +++ b/layout/reftests/box-shadow/fieldset-ref.html @@ -0,0 +1,95 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 485149</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + +body {padding:20px;} + +field { + display:block; + overflow:hidden; + background:yellow; + + box-shadow:0 0 5px 5px #cccccc; + border:1px solid #000000; + border-radius:7px; + width:200px; + height:50px; + margin-left:5px; + margin-right:2px; + padding:10px; + border-box; +} + +.with-legend { + margin-top:8px; + height:42px; +} + +p { height:40px; margin:0; } + +#mask1 { + position:absolute; + left:0; + top:0; + background:black; + z-index:1; + width:150px; + height:700px; +} + +#mask2 { + position:absolute; + left:170px; + top:330px; + background:black; + z-index:1; + width:150px; + height:300px; +} + +#mask3 { + position:absolute; + left:0; + top:380px; + background:black; + z-index:1; + width:300px; + height:300px; +} + +</style> +</head> +<body> + +<field class="with-legend"> +1 +</field> + +<p></p> +<field class="with-legend" style="position:relative"> +2 +</field> + +<p></p> +<field> +3 +</field> + +<p></p> +<field class="with-legend" style="border-color:transparent"> +4 +</field> + +<div id="mask1"></div> +<div id="mask2"></div> +<div id="mask3"></div> + +</body> +</html> diff --git a/layout/reftests/box-shadow/fieldset.html b/layout/reftests/box-shadow/fieldset.html new file mode 100644 index 0000000000..581633f54b --- /dev/null +++ b/layout/reftests/box-shadow/fieldset.html @@ -0,0 +1,90 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 485149</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + +body {padding:20px;} + +fieldset { + overflow:hidden; + background:yellow; + + box-shadow:0 0 5px 5px #cccccc; + border:1px solid #000000; + border-radius:7px; + width:200px; + height:50px; + margin-left:5px; + margin-right:2px; + padding:10px; +} + +legend { height:16px; } + +p { height:40px; margin:0; } + +#mask1 { + position:absolute; + left:0; + top:0; + background:black; + z-index:1; + width:150px; + height:700px; +} + +#mask2 { + position:absolute; + left:170px; + top:330px; + background:black; + z-index:1; + width:150px; + height:300px; +} + +#mask3 { + position:absolute; + left:0; + top:380px; + background:black; + z-index:1; + width:300px; + height:300px; +} + +</style> +</head> +<body> + +<fieldset><legend>Legend</legend> +1 +</fieldset> + +<p></p> +<fieldset style="position:relative;"><legend>Legend</legend> +2 +</fieldset> + +<p></p> +<fieldset> +3 +</fieldset> + +<p></p> +<fieldset><legend style="width:150px;"></legend> +4 +</fieldset> + +<div id="mask1"></div> +<div id="mask2"></div> +<div id="mask3"></div> + +</body> +</html> diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-1-ref.html b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref.html new file mode 100644 index 0000000000..89906bb1c0 --- /dev/null +++ b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<style type="text/css"> + +div { + height: 200px; width: 200px; overflow: hidden; + font-size: 50px; +} +span { + box-shadow: 210px 210px 2px gray; + + /* work around potential font overflow */ + margin-left: 5px; +} + +</style> +<div> +<span>text</span> +</div> diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-1-ref2.html b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref2.html new file mode 100644 index 0000000000..03d34afd9f --- /dev/null +++ b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref2.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style type="text/css"> + +div { + height: 200px; width: 200px; + font-size: 50px; +} + +span { + /* work around potential font overflow */ + margin-left: 5px; +} + +</style> +<div> +<span>text</span> +</div> diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-1.html b/layout/reftests/box-shadow/overflow-not-scrollable-1.html new file mode 100644 index 0000000000..94a4b7fe07 --- /dev/null +++ b/layout/reftests/box-shadow/overflow-not-scrollable-1.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<style type="text/css"> + +div { + height: 200px; width: 200px; overflow: auto; + font-size: 50px; +} +span { + box-shadow: 210px 210px 2px gray; + + /* work around potential font overflow */ + margin-left: 5px; +} + +</style> +<div> +<span>text</span> +</div> diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-2-ref.html b/layout/reftests/box-shadow/overflow-not-scrollable-2-ref.html new file mode 100644 index 0000000000..8bac681910 --- /dev/null +++ b/layout/reftests/box-shadow/overflow-not-scrollable-2-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<style type="text/css"> + +div { + height: 200px; width: 200px; overflow: hidden; + font-size: 50px; + font-weight: bold; +} +span { + box-shadow: 100px 100px 30px black; + + /* work around potential font overflow */ + margin-left: 5px; +} + +</style> +<div> +<span>text</span> +</div> diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-2.html b/layout/reftests/box-shadow/overflow-not-scrollable-2.html new file mode 100644 index 0000000000..66dba48daf --- /dev/null +++ b/layout/reftests/box-shadow/overflow-not-scrollable-2.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<style type="text/css"> + +div { + height: 200px; width: 200px; overflow: auto; + font-size: 50px; + font-weight: bold; +} +span { + box-shadow: 100px 100px 30px black; + + /* work around potential font overflow */ + margin-left: 5px; +} + +</style> +<div> +<span>text</span> +</div> diff --git a/layout/reftests/box-shadow/reftest.list b/layout/reftests/box-shadow/reftest.list new file mode 100644 index 0000000000..ed6baf7946 --- /dev/null +++ b/layout/reftests/box-shadow/reftest.list @@ -0,0 +1,49 @@ +== boxshadow-basic.html boxshadow-basic-ref.html +!= boxshadow-blur.html boxshadow-blur-notref.html +!= boxshadow-blur.html boxshadow-blur-notref2.html +random == boxshadow-blur-2.html boxshadow-blur-2-ref.html # fixedpoint division in blur code makes this fail +random != boxshadow-blur-2.html boxshadow-blur-2-notref.html # fixedpoint division in blur code makes this fail +== boxshadow-multiple.html boxshadow-multiple-ref.html +== boxshadow-spread.html boxshadow-spread-ref.html +== tableboxshadow-basic.html tableboxshadow-basic-ref.html +== tableboxshadow-trshadow.html tableboxshadow-trshadow-ref.html +== tableboxshadow-tdshadow.html tableboxshadow-tdshadow-ref.html +== boxshadow-rounding.html boxshadow-rounding-ref.html +# One uses old path, one uses WR box shadow. +== boxshadow-button.html boxshadow-button-ref.html +fuzzy(0-14,0-179) fuzzy-if(swgl&&!Android,0-1,0-952) fuzzy-if(useDrawSnapshot&&swgl,14-14,54-54) == boxshadow-large-border-radius.html boxshadow-large-border-radius-ref.html # Bug 1209649 + +== boxshadow-fileupload.html boxshadow-fileupload-ref.html +fuzzy(13-19,28-51) == boxshadow-inner-basic.html boxshadow-inner-basic-ref.svg +fuzzy(0-1,0-18) random-if(layersGPUAccelerated) == boxshadow-mixed.html boxshadow-mixed-ref.html +fuzzy(0-1,0-17) == boxshadow-mixed-2.html boxshadow-mixed-2-ref.html +random-if(d2d) fuzzy(0-127,0-3528) == boxshadow-rounded-spread.html boxshadow-rounded-spread-ref.html +fuzzy(0-1,0-50) == chrome://reftest/content/box-shadow/boxshadow-dynamic.xhtml chrome://reftest/content/box-shadow/boxshadow-dynamic-ref.xhtml +random-if(d2d) fuzzy(0-1,0-14) == boxshadow-onecorner.html boxshadow-onecorner-ref.html +random-if(d2d) fuzzy(0-1,0-22) == boxshadow-twocorners.html boxshadow-twocorners-ref.html +random-if(d2d) fuzzy(0-1,0-36) == boxshadow-threecorners.html boxshadow-threecorners-ref.html +fuzzy(0-2,0-440) == boxshadow-skiprect.html boxshadow-skiprect-ref.html +fuzzy-if(useDrawSnapshot,1-1,1197-2400) == boxshadow-opacity.html boxshadow-opacity-ref.html +== boxshadow-color-rounding.html boxshadow-color-rounding-ref.html +== boxshadow-color-rounding-middle.html boxshadow-color-rounding-middle-ref.html +fuzzy(0-3,0-500) fuzzy-if(d2d,0-2,0-1080) == boxshadow-border-radius-int.html boxshadow-border-radius-int-ref.html +== boxshadow-inset-neg-spread.html about:blank +== boxshadow-inset-neg-spread2.html boxshadow-inset-neg-spread2-ref.html +fuzzy(0-26,0-3610) fuzzy-if(d2d,0-26,0-5910) fuzzy-if(!(swgl&&Android),0-6,378-4500) == boxshadow-rotated.html boxshadow-rotated-ref.html # Bug 1211264 +== boxshadow-inset-large-border-radius.html boxshadow-inset-large-border-radius-ref.html + +# fuzzy due to blur going inside, but as long as it's essentially black instead of a light gray its ok. +fuzzy(12-15,9400-13267) == boxshadow-inset-large-offset.html boxshadow-inset-large-offset-ref.html + +== overflow-not-scrollable-1.html overflow-not-scrollable-1-ref.html +== overflow-not-scrollable-1.html overflow-not-scrollable-1-ref2.html +== overflow-not-scrollable-2.html overflow-not-scrollable-2-ref.html +fuzzy(0-1,0-655) == 611574-1.html 611574-1-ref.html +fuzzy(0-4,0-144) fuzzy-if(d2d,0-1,0-36) == 611574-2.html 611574-2-ref.html +fuzzy(0-16,0-10) == fieldset.html fieldset-ref.html # minor anti-aliasing problem on Windows +fuzzy(0-16,0-10) == fieldset-inset.html fieldset-inset-ref.html # minor anti-aliasing problem on Windows +== 1178575.html 1178575-ref.html +== 1178575-2.html 1178575-2-ref.html +fuzzy(0-159,0-2) fails == 1212823-1.html 1212823-1-ref.html +fuzzy(0-93,0-8) == 1212823-2.html 1212823-2-ref.html +== boxshadow-large-offset.html boxshadow-large-offset-ref.html diff --git a/layout/reftests/box-shadow/tableboxshadow-basic-ref.html b/layout/reftests/box-shadow/tableboxshadow-basic-ref.html new file mode 100644 index 0000000000..6a797820a2 --- /dev/null +++ b/layout/reftests/box-shadow/tableboxshadow-basic-ref.html @@ -0,0 +1 @@ +<div style="position: absolute; top: 33px; left: 33px; height: 300px; width: 600px; background-color: black;">s</div><table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 30px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table> diff --git a/layout/reftests/box-shadow/tableboxshadow-basic.html b/layout/reftests/box-shadow/tableboxshadow-basic.html new file mode 100644 index 0000000000..4601d636a8 --- /dev/null +++ b/layout/reftests/box-shadow/tableboxshadow-basic.html @@ -0,0 +1 @@ +<table border="0" cellpadding="0" cellspacing="0" style="box-shadow: 3px 3px black; position: absolute; top: 30px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table> diff --git a/layout/reftests/box-shadow/tableboxshadow-tdshadow-ref.html b/layout/reftests/box-shadow/tableboxshadow-tdshadow-ref.html new file mode 100644 index 0000000000..972d315ed5 --- /dev/null +++ b/layout/reftests/box-shadow/tableboxshadow-tdshadow-ref.html @@ -0,0 +1,5 @@ +<div style="width: 300px; height: 300px; position: absolute; top: 56px; left: 56px; background-color: rgba(0, 0, 0, 0.4);">s</div> + +<div style="width: 300px; height: 300px; position: absolute; top: 56px; left: 376px; background-color: rgba(0, 0, 0, 0.4);">s</div> + +<table border="0" cellpadding="0" cellspacing="20" style="position: absolute; top: 30px; left: 30px;"><tr><td style="background-color: green; width: 300px; height: 300px;">s</td><td style="background-color: green; width: 300px; height: 300px;">s</td></tr></table> diff --git a/layout/reftests/box-shadow/tableboxshadow-tdshadow.html b/layout/reftests/box-shadow/tableboxshadow-tdshadow.html new file mode 100644 index 0000000000..bc7abb8f0a --- /dev/null +++ b/layout/reftests/box-shadow/tableboxshadow-tdshadow.html @@ -0,0 +1 @@ +<table border="0" cellpadding="0" cellspacing="20" style="position: absolute; top: 30px; left: 30px;"><tr><td style="background-color: green; box-shadow: 6px 6px rgba(0, 0, 0, 0.4); width: 300px; height: 300px;">s</td><td style="background-color: green; box-shadow: 6px 6px rgba(0, 0, 0, 0.4); width: 300px; height: 300px;">s</td></tr></table> diff --git a/layout/reftests/box-shadow/tableboxshadow-trshadow-ref.html b/layout/reftests/box-shadow/tableboxshadow-trshadow-ref.html new file mode 100644 index 0000000000..d337519480 --- /dev/null +++ b/layout/reftests/box-shadow/tableboxshadow-trshadow-ref.html @@ -0,0 +1,5 @@ +<table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 330px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table> + +<div style="position: absolute; top: 33px; left: 33px; height: 300px; width: 600px; background-color: black;">s</div> + +<table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 30px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table> diff --git a/layout/reftests/box-shadow/tableboxshadow-trshadow.html b/layout/reftests/box-shadow/tableboxshadow-trshadow.html new file mode 100644 index 0000000000..c928402122 --- /dev/null +++ b/layout/reftests/box-shadow/tableboxshadow-trshadow.html @@ -0,0 +1 @@ +<table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 30px; left: 30px; background-color: green;"><tr style="box-shadow: 3px 3px black;"><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr><tr><td style="width: 300px; height: 300px;">s</td><td>s</td></tr></table> |
