diff options
Diffstat (limited to 'layout/reftests/css-gradients')
160 files changed, 1798 insertions, 0 deletions
diff --git a/layout/reftests/css-gradients/1224761-1-ref.html b/layout/reftests/css-gradients/1224761-1-ref.html new file mode 100644 index 0000000000..7b243c9a45 --- /dev/null +++ b/layout/reftests/css-gradients/1224761-1-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<style> +div { + border: 1px solid black; + width: 30px; + height: 30px; + margin: 1px; +} +.grad-5 { + background: yellow; +} +.grad0 { + background: yellow; +} +.grad30 { + /* not much of a test, but this isn't where the bug was anyway! */ + background: linear-gradient(to right, blue 30%, yellow 30%); +} +.grad100 { + background: blue; +} +.grad150 { + background: blue; +} +</style> +</head> +<body> + You shouldn't see a gradual gradient in any of the divs below. + <div class="grad-5"></div> + <div class="grad0"></div> + <div class="grad30"></div> + <div class="grad100"></div> + <div class="grad150"></div> +</body> +</html> diff --git a/layout/reftests/css-gradients/1224761-1.html b/layout/reftests/css-gradients/1224761-1.html new file mode 100644 index 0000000000..97e00f7dd6 --- /dev/null +++ b/layout/reftests/css-gradients/1224761-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<style> +div { + border: 1px solid black; + width: 30px; + height: 30px; + margin: 1px; +} +.grad-5 { + background: linear-gradient(to right, blue -5%, yellow -5%); +} +.grad0 { + background: linear-gradient(to right, blue 0%, yellow 0%); +} +.grad30 { + background: linear-gradient(to right, blue 30%, yellow 30%); +} +.grad100 { + background: linear-gradient(to right, blue 100%, yellow 100%); +} +.grad150 { + background: linear-gradient(to right, blue 150%, yellow 150%); +} +</style> +</head> +<body> + You shouldn't see a gradual gradient in any of the divs below. + <div class="grad-5"></div> + <div class="grad0"></div> + <div class="grad30"></div> + <div class="grad100"></div> + <div class="grad150"></div> +</body> +</html> diff --git a/layout/reftests/css-gradients/aja-linear-1-ref.html b/layout/reftests/css-gradients/aja-linear-1-ref.html new file mode 100644 index 0000000000..c96ed5e385 --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-1-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<html class="reftest-wait"> +<head> +<script> +function doDraw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + var grad = ctx.createLinearGradient(0,0,0,200); + grad.addColorStop(0, 'yellow'); + grad.addColorStop(1, 'blue'); + + ctx.fillStyle = grad; + ctx.fillRect(0,0,100,200); + + document.documentElement.removeAttribute('class'); +} +</script> +</head> +<body onload="doDraw();"> +<canvas id="canvas" width="100" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/css-gradients/aja-linear-1a.html b/layout/reftests/css-gradients/aja-linear-1a.html new file mode 100644 index 0000000000..8860679bf2 --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-1a.html @@ -0,0 +1,10 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<style> +div { + height: 200px; + width: 100px; + background: linear-gradient(to bottom, yellow, blue); +} +</style> +<div></div> diff --git a/layout/reftests/css-gradients/aja-linear-1b.html b/layout/reftests/css-gradients/aja-linear-1b.html new file mode 100644 index 0000000000..27a7ee4311 --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-1b.html @@ -0,0 +1,10 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<style> +div { + height: 200px; + width: 100px; + background: linear-gradient(to top, blue, yellow); +} +</style> +<div></div> diff --git a/layout/reftests/css-gradients/aja-linear-1c.html b/layout/reftests/css-gradients/aja-linear-1c.html new file mode 100644 index 0000000000..cb5977f8f1 --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-1c.html @@ -0,0 +1,10 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<style> +div { + height: 200px; + width: 100px; + background: linear-gradient(180deg, yellow, blue); +} +</style> +<div></div> diff --git a/layout/reftests/css-gradients/aja-linear-1d.html b/layout/reftests/css-gradients/aja-linear-1d.html new file mode 100644 index 0000000000..bfc70bce9d --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-1d.html @@ -0,0 +1,10 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<style> +div { + height: 200px; + width: 100px; + background: linear-gradient(-180deg, yellow, blue); +} +</style> +<div></div> diff --git a/layout/reftests/css-gradients/aja-linear-1e.html b/layout/reftests/css-gradients/aja-linear-1e.html new file mode 100644 index 0000000000..7d71c3462e --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-1e.html @@ -0,0 +1,10 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<style> +div { + height: 200px; + width: 100px; + background: linear-gradient(to bottom, yellow 0%, blue 100%); +} +</style> +<div></div> diff --git a/layout/reftests/css-gradients/aja-linear-1f.html b/layout/reftests/css-gradients/aja-linear-1f.html new file mode 100644 index 0000000000..57de342064 --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-1f.html @@ -0,0 +1,10 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<style> +div { + height: 200px; + width: 100px; + background: linear-gradient(yellow, blue); +} +</style> +<div></div> diff --git a/layout/reftests/css-gradients/aja-linear-2-ref.html b/layout/reftests/css-gradients/aja-linear-2-ref.html new file mode 100644 index 0000000000..81699da99b --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-2-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<html class="reftest-wait"> +<head> +<script> +function doDraw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + var grad = ctx.createLinearGradient(0,0,160,80); + grad.addColorStop(0, 'yellow'); + grad.addColorStop(1, 'blue'); + + ctx.fillStyle = grad; + ctx.fillRect(0,0,100,200); + + document.documentElement.removeAttribute('class'); +} +</script> +</head> +<body onload="doDraw();"> +<canvas id="canvas" width="100" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/css-gradients/aja-linear-2.html b/layout/reftests/css-gradients/aja-linear-2.html new file mode 100644 index 0000000000..84ed929120 --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-2.html @@ -0,0 +1,10 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<style> +div { + height: 200px; + width: 100px; + background: linear-gradient(to bottom right, yellow, blue); +} +</style> +<div></div> diff --git a/layout/reftests/css-gradients/aja-linear-3-ref.html b/layout/reftests/css-gradients/aja-linear-3-ref.html new file mode 100644 index 0000000000..75086eefcc --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-3-ref.html @@ -0,0 +1,25 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<html class="reftest-wait"> +<head> +<script> +function doDraw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + /* this gradient goes at an angle of -45deg through the center of + the box */ + var grad = ctx.createLinearGradient(-25,25,125,175); + grad.addColorStop(0, 'yellow'); + grad.addColorStop(1, 'blue'); + + ctx.fillStyle = grad; + ctx.fillRect(0,0,100,200); + + document.documentElement.removeAttribute('class'); +} +</script> +</head> +<body onload="doDraw();"> +<canvas id="canvas" width="100" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/css-gradients/aja-linear-3a.html b/layout/reftests/css-gradients/aja-linear-3a.html new file mode 100644 index 0000000000..e59acd9659 --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-3a.html @@ -0,0 +1,10 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<style> +div { + height: 200px; + width: 100px; + background: linear-gradient(135deg, yellow, blue); +} +</style> +<div></div> diff --git a/layout/reftests/css-gradients/aja-linear-3b.html b/layout/reftests/css-gradients/aja-linear-3b.html new file mode 100644 index 0000000000..3ad588f22c --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-3b.html @@ -0,0 +1,10 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<style> +div { + height: 200px; + width: 100px; + background: linear-gradient(-225deg, yellow, blue); +} +</style> +<div></div> diff --git a/layout/reftests/css-gradients/aja-linear-4-ref.html b/layout/reftests/css-gradients/aja-linear-4-ref.html new file mode 100644 index 0000000000..c26d0204fd --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-4-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<html class="reftest-wait"> +<head> +<script> +function doDraw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + var grad = ctx.createLinearGradient(50, 0, 50, 200); + grad.addColorStop(0, 'yellow'); + grad.addColorStop(0.5, 'blue'); + grad.addColorStop(1, '#0f0'); + + ctx.fillStyle = grad; + ctx.fillRect(0,0,100,200); + + document.documentElement.removeAttribute('class'); +} +</script> +</head> +<body onload="doDraw();"> +<canvas id="canvas" width="100" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/css-gradients/aja-linear-4a.html b/layout/reftests/css-gradients/aja-linear-4a.html new file mode 100644 index 0000000000..bbaf37e22f --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-4a.html @@ -0,0 +1,10 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<style> +div { + height: 200px; + width: 100px; + background: linear-gradient(yellow, blue, #0f0); +} +</style> +<div></div> diff --git a/layout/reftests/css-gradients/aja-linear-4b.html b/layout/reftests/css-gradients/aja-linear-4b.html new file mode 100644 index 0000000000..ae618512b8 --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-4b.html @@ -0,0 +1,10 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<style> +div { + height: 200px; + width: 100px; + background: linear-gradient(yellow, blue 50%, #0f0); +} +</style> +<div></div> diff --git a/layout/reftests/css-gradients/aja-linear-5-ref.html b/layout/reftests/css-gradients/aja-linear-5-ref.html new file mode 100644 index 0000000000..1a26fd96a1 --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-5-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<html class="reftest-wait"> +<head> +<script> +function doDraw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + var grad = ctx.createLinearGradient(50, 0, 50, 200); + grad.addColorStop(0, 'yellow'); + grad.addColorStop(0.2, 'blue'); + grad.addColorStop(1, '#0f0'); + + ctx.fillStyle = grad; + ctx.fillRect(0,0,100,200); + + document.documentElement.removeAttribute('class'); +} +</script> +</head> +<body onload="doDraw();"> +<canvas id="canvas" width="100" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/css-gradients/aja-linear-5a.html b/layout/reftests/css-gradients/aja-linear-5a.html new file mode 100644 index 0000000000..569b5827e6 --- /dev/null +++ b/layout/reftests/css-gradients/aja-linear-5a.html @@ -0,0 +1,10 @@ +<!doctype html> +<!-- Derived from http://a-ja.net/newgrad.html --> +<style> +div { + height: 200px; + width: 100px; + background: linear-gradient(yellow, blue 20%, #0f0); +} +</style> +<div></div> diff --git a/layout/reftests/css-gradients/bug-916535-background-repeat-linear-ref.html b/layout/reftests/css-gradients/bug-916535-background-repeat-linear-ref.html new file mode 100644 index 0000000000..c4c0a8b9cd --- /dev/null +++ b/layout/reftests/css-gradients/bug-916535-background-repeat-linear-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <title>Grid</title> + <style> + body { + background: #fff; + } + .r {background: red; width: 300px; height: 50px} + .g {background: green; width: 300px; height: 50px} + </style> +</head> + +<body> + <div class=r></div> + <div class=g></div> + <div class=r></div> + <div class=g></div> + <div class=r></div> + <div class=g></div> +</body> +</html> diff --git a/layout/reftests/css-gradients/bug-916535-background-repeat-linear.html b/layout/reftests/css-gradients/bug-916535-background-repeat-linear.html new file mode 100644 index 0000000000..995c9e0410 --- /dev/null +++ b/layout/reftests/css-gradients/bug-916535-background-repeat-linear.html @@ -0,0 +1,25 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <title>Grid</title> + <style> + body { + background: #fff; + } + div { + width: 300px; + height: 300px; + background-color: #269; + background-size: 100px 100px; + background-image: + linear-gradient( red 50px, green 50px); + } + </style> +</head> + +<body> + <div ></div> +</body> +</html> diff --git a/layout/reftests/css-gradients/color-stop-clamp-interpolation-ref.html b/layout/reftests/css-gradients/color-stop-clamp-interpolation-ref.html new file mode 100644 index 0000000000..ec3b0166b7 --- /dev/null +++ b/layout/reftests/css-gradients/color-stop-clamp-interpolation-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Bug 1274624: Clamped colour stop interpolation</title> + <style type="text/css"> + div { + background-image: linear-gradient(90deg, rgba(0, 0, 255, 0.6), rgba(0, 0, 255, 0.4)); + background-size: 100px 100px; + width: 400px; + height: 400px; + } + </style> + </head> + <body> + <div> + </div> + </body> +</html> diff --git a/layout/reftests/css-gradients/color-stop-clamp-interpolation.html b/layout/reftests/css-gradients/color-stop-clamp-interpolation.html new file mode 100644 index 0000000000..ce68135d5f --- /dev/null +++ b/layout/reftests/css-gradients/color-stop-clamp-interpolation.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Bug 1274624: Clamped colour stop interpolation</title> + <style type="text/css"> + div { + background: linear-gradient(90deg, rgba(0, 0, 255, 1) -200%, rgba(255, 255, 0, 0) 300%); + background-size: 100px 100px; + width: 400px; + height: 400px; + } + </style> + </head> + <body> + <div> + </div> + </body> +</html> diff --git a/layout/reftests/css-gradients/height-dependence-1-ref.html b/layout/reftests/css-gradients/height-dependence-1-ref.html new file mode 100644 index 0000000000..f56fe8f02d --- /dev/null +++ b/layout/reftests/css-gradients/height-dependence-1-ref.html @@ -0,0 +1,43 @@ +<!doctype html> +<html><head> +<style> +html { + background-image: linear-gradient(black, white 20%); + background-repeat: repeat-x; +} +body { + font-size: 1em; + padding: 2em; + margin: 50px auto; + width: 14em; + border: 1px solid black; + background-color: white; +} +</style> +</head><body> +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +</body> +</html> diff --git a/layout/reftests/css-gradients/height-dependence-1.html b/layout/reftests/css-gradients/height-dependence-1.html new file mode 100644 index 0000000000..58d8969b22 --- /dev/null +++ b/layout/reftests/css-gradients/height-dependence-1.html @@ -0,0 +1,49 @@ +<!doctype html> +<html class="reftest-wait"><head> +<style> +html { + background-image: linear-gradient(black, white 20%); + background-repeat: repeat-x; +} +body { + font-size: 1em; + padding: 2em; + margin: 50px auto; + width: 28em; + border: 1px solid black; + background-color: white; +} +</style> +<script> +window.addEventListener("MozReftestInvalidate", function() { + document.body.style.width = "14em"; + document.documentElement.removeAttribute("class"); +}); +</script> +</head><body> +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +</body> +</html> diff --git a/layout/reftests/css-gradients/height-dependence-2-ref.html b/layout/reftests/css-gradients/height-dependence-2-ref.html new file mode 100644 index 0000000000..c2e15f751f --- /dev/null +++ b/layout/reftests/css-gradients/height-dependence-2-ref.html @@ -0,0 +1,44 @@ +<!doctype html> +<html><head> +<style> +html { + background-image: linear-gradient(black, white 20%); + background-repeat: repeat-x; + background-size: 1px 400px; +} +body { + font-size: 1em; + padding: 2em; + margin: 50px auto; + width: 14em; + border: 1px solid black; + background-color: white; +} +</style> +</head><body> +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +</body> +</html> diff --git a/layout/reftests/css-gradients/height-dependence-2.html b/layout/reftests/css-gradients/height-dependence-2.html new file mode 100644 index 0000000000..4404a7d509 --- /dev/null +++ b/layout/reftests/css-gradients/height-dependence-2.html @@ -0,0 +1,50 @@ +<!doctype html> +<html class="reftest-wait"><head> +<style> +html { + background-image: linear-gradient(black, white 20%); + background-repeat: repeat-x; + background-size: 1px 400px; +} +body { + font-size: 1em; + padding: 2em; + margin: 50px auto; + width: 28em; + border: 1px solid black; + background-color: white; +} +</style> +<script> +window.addEventListener("MozReftestInvalidate", function() { + document.body.style.width = "14em"; + document.documentElement.removeAttribute("class"); +}); +</script> +</head><body> +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +</body> +</html> diff --git a/layout/reftests/css-gradients/height-dependence-3-ref.html b/layout/reftests/css-gradients/height-dependence-3-ref.html new file mode 100644 index 0000000000..9ee3a7aee8 --- /dev/null +++ b/layout/reftests/css-gradients/height-dependence-3-ref.html @@ -0,0 +1,44 @@ +<!doctype html> +<html><head> +<style> +html { + background-image: linear-gradient(black, white 20%); + background-repeat: repeat-x; + background-size: 1px 80%; +} +body { + font-size: 1em; + padding: 2em; + margin: 50px auto; + width: 14em; + border: 1px solid black; + background-color: white; +} +</style> +</head><body> +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +</body> +</html> diff --git a/layout/reftests/css-gradients/height-dependence-3.html b/layout/reftests/css-gradients/height-dependence-3.html new file mode 100644 index 0000000000..e4e4a7d238 --- /dev/null +++ b/layout/reftests/css-gradients/height-dependence-3.html @@ -0,0 +1,50 @@ +<!doctype html> +<html class="reftest-wait"><head> +<style> +html { + background-image: linear-gradient(black, white 20%); + background-repeat: repeat-x; + background-size: 1px 80%; +} +body { + font-size: 1em; + padding: 2em; + margin: 50px auto; + width: 28em; + border: 1px solid black; + background-color: white; +} +</style> +<script> +window.addEventListener("MozReftestInvalidate", function() { + document.body.style.width = "14em"; + document.documentElement.removeAttribute("class"); +}); +</script> +</head><body> +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +pad pad pad pad pad pad pad pad +</body> +</html> diff --git a/layout/reftests/css-gradients/large-gradient-1-ref.html b/layout/reftests/css-gradients/large-gradient-1-ref.html new file mode 100644 index 0000000000..ddd7651e6e --- /dev/null +++ b/layout/reftests/css-gradients/large-gradient-1-ref.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title> + +<style> + +html { + background: white; + overflow: hidden; +} + +body { + margin: 0; + height: 1000px; + background-image: linear-gradient(rgb(210,210,210) 0px, rgb(215,215,215) 1000px); +} + +</style> diff --git a/layout/reftests/css-gradients/large-gradient-1.html b/layout/reftests/css-gradients/large-gradient-1.html new file mode 100644 index 0000000000..bcba165a28 --- /dev/null +++ b/layout/reftests/css-gradients/large-gradient-1.html @@ -0,0 +1,40 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8"> +<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title> +<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1011166 --> + +<style> + +html { + background: white; + overflow: hidden; +} + +body { + margin: 0; + height: 51000px; /* = 255 * 200 */ + background-image: linear-gradient(rgb(0,0,0) 0px, rgb(255,255,255) 51000px); +} + +div { + height: 1000px; + background-color: red; +} + +</style> + +<div></div> + +<script> + +window.addEventListener("MozReftestInvalidate", function () { + document.documentElement.scrollTop = 210 * 200; // 42000 > 32768 + document.documentElement.removeAttribute("class"); +}); + +</script> diff --git a/layout/reftests/css-gradients/large-gradient-2-ref.html b/layout/reftests/css-gradients/large-gradient-2-ref.html new file mode 100644 index 0000000000..ee33eedf19 --- /dev/null +++ b/layout/reftests/css-gradients/large-gradient-2-ref.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title> + +<style> + +html { + background: lime; + overflow: hidden; +} + +</style> diff --git a/layout/reftests/css-gradients/large-gradient-2.html b/layout/reftests/css-gradients/large-gradient-2.html new file mode 100644 index 0000000000..17074baddd --- /dev/null +++ b/layout/reftests/css-gradients/large-gradient-2.html @@ -0,0 +1,40 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8"> +<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title> +<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1011166 --> + +<style> + +html { + background: white; + overflow: hidden; +} + +body { + margin: 0; + height: 51000px; + background-image: linear-gradient(black 0px, lime 2000px); +} + +div { + height: 1000px; + background-color: red; +} + +</style> + +<div></div> + +<script> + +window.addEventListener("MozReftestInvalidate", function () { + document.documentElement.scrollTop = 42000; // > 32768 + document.documentElement.removeAttribute("class"); +}); + +</script> diff --git a/layout/reftests/css-gradients/large-gradient-3-ref.html b/layout/reftests/css-gradients/large-gradient-3-ref.html new file mode 100644 index 0000000000..e13864ee66 --- /dev/null +++ b/layout/reftests/css-gradients/large-gradient-3-ref.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title> + +<style> + +html { + background: white; + overflow: hidden; +} + +body { + margin: 0; + height: 1000px; + background-image: linear-gradient(rgb(210,210,210) 0px, rgb(215,215,215) 4000px); +} + +</style> diff --git a/layout/reftests/css-gradients/large-gradient-3.html b/layout/reftests/css-gradients/large-gradient-3.html new file mode 100644 index 0000000000..0c859a89b7 --- /dev/null +++ b/layout/reftests/css-gradients/large-gradient-3.html @@ -0,0 +1,40 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8"> +<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title> +<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1011166 --> + +<style> + +html { + background: white; + overflow: hidden; +} + +body { + margin: 0; + height: 204000px; /* = 255 * 800 */ + background-image: linear-gradient(rgb(0,0,0) 0px, rgb(255,255,255) 204000px); +} + +div { + height: 1000px; + background-color: red; +} + +</style> + +<div></div> + +<script> + +window.addEventListener("MozReftestInvalidate", function () { + document.documentElement.scrollTop = 210 * 800; // 168000 > 131072 == 2^17 + document.documentElement.removeAttribute("class"); +}); + +</script> diff --git a/layout/reftests/css-gradients/large-gradient-4-ref.html b/layout/reftests/css-gradients/large-gradient-4-ref.html new file mode 100644 index 0000000000..ee33eedf19 --- /dev/null +++ b/layout/reftests/css-gradients/large-gradient-4-ref.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title> + +<style> + +html { + background: lime; + overflow: hidden; +} + +</style> diff --git a/layout/reftests/css-gradients/large-gradient-4.html b/layout/reftests/css-gradients/large-gradient-4.html new file mode 100644 index 0000000000..dc8f151022 --- /dev/null +++ b/layout/reftests/css-gradients/large-gradient-4.html @@ -0,0 +1,40 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8"> +<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title> +<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1011166 --> + +<style> + +html { + background: white; + overflow: hidden; +} + +body { + margin: 0; + height: 204000px; /* = 255 * 800 */; + background-image: linear-gradient(black 0px, lime 2000px); +} + +div { + height: 1000px; + background-color: red; +} + +</style> + +<div></div> + +<script> + +window.addEventListener("MozReftestInvalidate", function () { + document.documentElement.scrollTop = 210 * 800; // 168000 > 131072 == 2^17 + document.documentElement.removeAttribute("class"); +}); + +</script> diff --git a/layout/reftests/css-gradients/large-gradient-5-ref.html b/layout/reftests/css-gradients/large-gradient-5-ref.html new file mode 100644 index 0000000000..a0e9237568 --- /dev/null +++ b/layout/reftests/css-gradients/large-gradient-5-ref.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Reference for: Make sure that large gradient backgrounds are painted even at extreme scroll positions</title> +<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1271112 --> + +<style> + +html { + background-color: lime; +} + +</style> + +<body> diff --git a/layout/reftests/css-gradients/large-gradient-5.html b/layout/reftests/css-gradients/large-gradient-5.html new file mode 100644 index 0000000000..d254d461ed --- /dev/null +++ b/layout/reftests/css-gradients/large-gradient-5.html @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title> +<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1271112 --> + +<style> + +html, body { + overflow: hidden; +} + +body { + margin: 0; + height: 100000px; + /* a green gradient that is not opaque on top of a red background color */ + background: repeating-linear-gradient(45deg, rgba(0, 255, 0, 1.0) 0%, rgba(0, 255, 0, 0.99) 10%, rgba(0, 255, 0, 1.0) 20%) red; +} + +</style> + +<body> + +<script> +document.documentElement.scrollTop = 35000; +</script> diff --git a/layout/reftests/css-gradients/linear-1-ref.html b/layout/reftests/css-gradients/linear-1-ref.html new file mode 100644 index 0000000000..f4d209a3da --- /dev/null +++ b/layout/reftests/css-gradients/linear-1-ref.html @@ -0,0 +1,24 @@ +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> +<head> +<script> +function doDraw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + var grad = ctx.createLinearGradient(0,150,300,150); + grad.addColorStop(0, 'red'); + grad.addColorStop(1, 'rgb(100, 200, 0)'); + grad.addColorStop(0.5, '#7777FF'); + + ctx.fillStyle = grad; + ctx.fillRect(0,0,300,300); + + document.documentElement.removeAttribute('class'); +} +</script> +</head> +<body onload="doDraw();"> +<canvas id="canvas" width="300" height="300"/> +</body> +</html> + diff --git a/layout/reftests/css-gradients/linear-1a.html b/layout/reftests/css-gradients/linear-1a.html new file mode 100644 index 0000000000..0f633f0f3e --- /dev/null +++ b/layout/reftests/css-gradients/linear-1a.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(to right, red 0%, #7777FF 50%, rgb(100, 200, 0) 100%) no-repeat; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/linear-diagonal-1-ref.html b/layout/reftests/css-gradients/linear-diagonal-1-ref.html new file mode 100644 index 0000000000..4aa7d36492 --- /dev/null +++ b/layout/reftests/css-gradients/linear-diagonal-1-ref.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(to bottom right, white, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-diagonal-1a.html b/layout/reftests/css-gradients/linear-diagonal-1a.html new file mode 100644 index 0000000000..3828169184 --- /dev/null +++ b/layout/reftests/css-gradients/linear-diagonal-1a.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(135deg, white, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-diagonal-2-ref.html b/layout/reftests/css-gradients/linear-diagonal-2-ref.html new file mode 100644 index 0000000000..22cc0ab1e6 --- /dev/null +++ b/layout/reftests/css-gradients/linear-diagonal-2-ref.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(to bottom left, white, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-diagonal-2a.html b/layout/reftests/css-gradients/linear-diagonal-2a.html new file mode 100644 index 0000000000..670e25a4c3 --- /dev/null +++ b/layout/reftests/css-gradients/linear-diagonal-2a.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(-135deg, white, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-diagonal-3-ref.html b/layout/reftests/css-gradients/linear-diagonal-3-ref.html new file mode 100644 index 0000000000..6a06898de2 --- /dev/null +++ b/layout/reftests/css-gradients/linear-diagonal-3-ref.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(to top left, white, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-diagonal-3a.html b/layout/reftests/css-gradients/linear-diagonal-3a.html new file mode 100644 index 0000000000..dd61b284b8 --- /dev/null +++ b/layout/reftests/css-gradients/linear-diagonal-3a.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(-45deg, white, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-diagonal-4-ref.html b/layout/reftests/css-gradients/linear-diagonal-4-ref.html new file mode 100644 index 0000000000..0ff8802b0e --- /dev/null +++ b/layout/reftests/css-gradients/linear-diagonal-4-ref.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(to top right, white, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-diagonal-4a.html b/layout/reftests/css-gradients/linear-diagonal-4a.html new file mode 100644 index 0000000000..b51d4c885c --- /dev/null +++ b/layout/reftests/css-gradients/linear-diagonal-4a.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(45deg, white, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-flipped-1-ref.html b/layout/reftests/css-gradients/linear-flipped-1-ref.html new file mode 100644 index 0000000000..7193dcbd24 --- /dev/null +++ b/layout/reftests/css-gradients/linear-flipped-1-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE HTML> +<div style="height:100px; background:linear-gradient(to top, black, white);"></div> diff --git a/layout/reftests/css-gradients/linear-flipped-1.html b/layout/reftests/css-gradients/linear-flipped-1.html new file mode 100644 index 0000000000..4fb4ae28df --- /dev/null +++ b/layout/reftests/css-gradients/linear-flipped-1.html @@ -0,0 +1,2 @@ +<!DOCTYPE HTML>
+<div style="height:100px; background:linear-gradient(to bottom, black, white); transform:scale(1,-1);"></div>
diff --git a/layout/reftests/css-gradients/linear-gradient-repeated-ref.html b/layout/reftests/css-gradients/linear-gradient-repeated-ref.html new file mode 100644 index 0000000000..2c3f9f7151 --- /dev/null +++ b/layout/reftests/css-gradients/linear-gradient-repeated-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Bug 1274624: Repeating linear gradient</title> + <style type="text/css"> + div { + background: repeating-linear-gradient(to top, red, blue 100px); + background-position: 30px 30px; + width: 400px; + height: 400px; + } + </style> + </head> + <body> + <div> + </div> + </body> +</html> diff --git a/layout/reftests/css-gradients/linear-gradient-repeated.html b/layout/reftests/css-gradients/linear-gradient-repeated.html new file mode 100644 index 0000000000..7e6e14dd56 --- /dev/null +++ b/layout/reftests/css-gradients/linear-gradient-repeated.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Bug 1274624: Linear gradient, repeated</title> + <style type="text/css"> + div { + background: linear-gradient(to top, red, blue); + background-size: 100px 100px; + background-position: 30px 30px; + width: 400px; + height: 400px; + } + </style> + </head> + <body> + <div> + </div> + </body> +</html> diff --git a/layout/reftests/css-gradients/linear-keywords-1-ref.html b/layout/reftests/css-gradients/linear-keywords-1-ref.html new file mode 100644 index 0000000000..d311b3df12 --- /dev/null +++ b/layout/reftests/css-gradients/linear-keywords-1-ref.html @@ -0,0 +1,23 @@ +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> +<head> +<script> +function doDraw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + var grad = ctx.createLinearGradient(0,0,300,300); + grad.addColorStop(0, '#0000ff'); + grad.addColorStop(1, '#000000'); + + ctx.fillStyle = grad; + ctx.fillRect(0,0,300,300); + + document.documentElement.removeAttribute('class'); +} +</script> +</head> +<body onload="doDraw();"> +<canvas id="canvas" width="300" height="300"/> +</body> +</html> + diff --git a/layout/reftests/css-gradients/linear-keywords-1a.html b/layout/reftests/css-gradients/linear-keywords-1a.html new file mode 100644 index 0000000000..48cf46606f --- /dev/null +++ b/layout/reftests/css-gradients/linear-keywords-1a.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(to right bottom, #0000ff, #000000) no-repeat; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/linear-onestopposition-1-ref.html b/layout/reftests/css-gradients/linear-onestopposition-1-ref.html new file mode 100644 index 0000000000..c9fdca6b44 --- /dev/null +++ b/layout/reftests/css-gradients/linear-onestopposition-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<title>Test for linear-gradient() with all stops at the same position</title> +<style> + +div { + width: 200px; + height: 200px; + background-image: linear-gradient(to right, blue 0%, blue 25%, orange 25%, orange 100%); +} + +</style> +<div></div> diff --git a/layout/reftests/css-gradients/linear-onestopposition-1-ref2.html b/layout/reftests/css-gradients/linear-onestopposition-1-ref2.html new file mode 100644 index 0000000000..51f70bcd46 --- /dev/null +++ b/layout/reftests/css-gradients/linear-onestopposition-1-ref2.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<title>Test for linear-gradient() with all stops at the same position</title> +<style> + +#div1 { + float: left; + width: 50px; + height: 200px; + background: blue; +} + +#div2 { + float: left; + width: 150px; + height: 200px; + background: orange; +} + +</style> +<div id="div1"></div> +<div id="div2"></div> diff --git a/layout/reftests/css-gradients/linear-onestopposition-1.html b/layout/reftests/css-gradients/linear-onestopposition-1.html new file mode 100644 index 0000000000..0addaf8822 --- /dev/null +++ b/layout/reftests/css-gradients/linear-onestopposition-1.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<title>Test for linear-gradient() with all stops at the same position</title> +<style> + +div { + width: 200px; + height: 200px; + background-image: linear-gradient(to right, blue 25%, orange 25%); +} + +</style> +<div></div> diff --git a/layout/reftests/css-gradients/linear-position-1-ref.html b/layout/reftests/css-gradients/linear-position-1-ref.html new file mode 100644 index 0000000000..cd66e66812 --- /dev/null +++ b/layout/reftests/css-gradients/linear-position-1-ref.html @@ -0,0 +1,2 @@ +<body style="margin:0;"> +<div style="background: linear-gradient(to right, white, black) no-repeat; position:relative; left:-200px; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/linear-position-1a.html b/layout/reftests/css-gradients/linear-position-1a.html new file mode 100644 index 0000000000..235d0136ce --- /dev/null +++ b/layout/reftests/css-gradients/linear-position-1a.html @@ -0,0 +1,2 @@ +<body style="margin:0;"> +<div style="background: linear-gradient(to right, white, black) no-repeat; background-position:-200px 0; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/linear-premul-ref.html b/layout/reftests/css-gradients/linear-premul-ref.html new file mode 100644 index 0000000000..bf0b12c33f --- /dev/null +++ b/layout/reftests/css-gradients/linear-premul-ref.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(to right, rgba(255, 0, 0, .9) 0% , rgba(255, 0, 0, 0) 50%, rgba(0, 0, 255, 0) 50%, rgba(0, 0, 255, 1) 100%) no-repeat; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/linear-premul.html b/layout/reftests/css-gradients/linear-premul.html new file mode 100644 index 0000000000..20c7c276a2 --- /dev/null +++ b/layout/reftests/css-gradients/linear-premul.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(to right, rgba(255, 0, 0, .9) 0% , rgba(0, 255, 0, 0) 50%, rgba(0, 0, 255, 1) 100%) no-repeat; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/linear-repeat-1-ref.html b/layout/reftests/css-gradients/linear-repeat-1-ref.html new file mode 100644 index 0000000000..f9f42811f4 --- /dev/null +++ b/layout/reftests/css-gradients/linear-repeat-1-ref.html @@ -0,0 +1,6 @@ +<div style="background: black; width: 300px; height: 50px;"></div> +<div style="background: white; width: 300px; height: 50px;"></div> +<div style="background: black; width: 300px; height: 50px;"></div> +<div style="background: white; width: 300px; height: 50px;"></div> +<div style="background: black; width: 300px; height: 50px;"></div> +<div style="background: white; width: 300px; height: 50px;"></div> diff --git a/layout/reftests/css-gradients/linear-repeat-1a.html b/layout/reftests/css-gradients/linear-repeat-1a.html new file mode 100644 index 0000000000..524b09201d --- /dev/null +++ b/layout/reftests/css-gradients/linear-repeat-1a.html @@ -0,0 +1,2 @@ +<div style="background: linear-gradient(black, black 50%, white 50%, white); + background-size: 100px 100px; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-repeat-1b.html b/layout/reftests/css-gradients/linear-repeat-1b.html new file mode 100644 index 0000000000..72e47ce46a --- /dev/null +++ b/layout/reftests/css-gradients/linear-repeat-1b.html @@ -0,0 +1,2 @@ +<div style="background: linear-gradient(black, black 50px, white 50px, white 100px, black 100px, black 150px, white 150px, white 200px); + background-size: 100px 200px; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-repeat-1c.html b/layout/reftests/css-gradients/linear-repeat-1c.html new file mode 100644 index 0000000000..246a694ce8 --- /dev/null +++ b/layout/reftests/css-gradients/linear-repeat-1c.html @@ -0,0 +1,4 @@ +<div style="background: linear-gradient(white, white 50%, black 50%, black); + background-size: 100px 100px; + background-position: 0 -50px; + width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-repeat-1d.html b/layout/reftests/css-gradients/linear-repeat-1d.html new file mode 100644 index 0000000000..e087da805b --- /dev/null +++ b/layout/reftests/css-gradients/linear-repeat-1d.html @@ -0,0 +1,3 @@ +<div style="background: linear-gradient(white, white 50px, black 50px, black 100px, white 100px, white 150px, black 150px, black 200px); + background-size: 100px 200px; background-position: 0 -50px; + width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-repeat-1e.html b/layout/reftests/css-gradients/linear-repeat-1e.html new file mode 100644 index 0000000000..be4b600f21 --- /dev/null +++ b/layout/reftests/css-gradients/linear-repeat-1e.html @@ -0,0 +1,3 @@ +<div style="background: linear-gradient(black, black 50%, white 50%, white); + background-size: 300px 100px; background-repeat: repeat-y; + width: 500px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-repeat-1f.html b/layout/reftests/css-gradients/linear-repeat-1f.html new file mode 100644 index 0000000000..c0f4bdb82d --- /dev/null +++ b/layout/reftests/css-gradients/linear-repeat-1f.html @@ -0,0 +1,10 @@ +<div style="background: linear-gradient(black, black 50px, white 50px, white 100px, black 100px, black 150px, white 150px, white 200px); + background-size: 100px 200px; background-repeat: repeat-x; + width: 300px; height: 800px; + margin-bottom: -600px;"></div> +<!-- making the gradient actually be 300px high isn't reliable since + the stop positions cannot be exactly represented and rounding errors + creep in. So just let the gradient be 200px high and pad out to match + the reference. --> +<div style="background: black; width: 300px; height: 50px;"></div> +<div style="background: white; width: 300px; height: 50px;"></div> diff --git a/layout/reftests/css-gradients/linear-repeat-1g.html b/layout/reftests/css-gradients/linear-repeat-1g.html new file mode 100644 index 0000000000..9cdac22765 --- /dev/null +++ b/layout/reftests/css-gradients/linear-repeat-1g.html @@ -0,0 +1,12 @@ +<body style="overflow:hidden"> +<div style="background: linear-gradient(black, black 50px, white 50px, white 100px, black 100px, black 150px, white 150px, white 200px); + background-size: 300px 200px; background-repeat: no-repeat; + width: 800px; height: 800px; + margin-bottom: -600px;"></div> +<!-- making the gradient actually be 300px high isn't reliable since + the stop positions cannot be exactly represented and rounding errors + creep in. So just let the gradient be 200px high and pad out to match + the reference. --> +<div style="background: black; width: 300px; height: 50px;"></div> +<div style="background: white; width: 300px; height: 50px;"></div> +</body> diff --git a/layout/reftests/css-gradients/linear-rotated-1-ref.html b/layout/reftests/css-gradients/linear-rotated-1-ref.html new file mode 100644 index 0000000000..d22ca1bb74 --- /dev/null +++ b/layout/reftests/css-gradients/linear-rotated-1-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML>
+<html>
+<body>
+<div style="width:100px; height:100px; background:linear-gradient(to left, red, green);"></div>
+<div style="width:100px; height:100px; background:linear-gradient(to right, red, green);"></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-rotated-1.html b/layout/reftests/css-gradients/linear-rotated-1.html new file mode 100644 index 0000000000..b927d1db27 --- /dev/null +++ b/layout/reftests/css-gradients/linear-rotated-1.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML>
+<html>
+<body>
+<div style="width:100px; height:100px; transform:rotate(90deg); background:linear-gradient(red, green);"></div>
+<div style="width:100px; height:100px; transform:rotate(270deg); background:linear-gradient(red, green);"></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-size-1-ref.html b/layout/reftests/css-gradients/linear-size-1-ref.html new file mode 100644 index 0000000000..662048f40b --- /dev/null +++ b/layout/reftests/css-gradients/linear-size-1-ref.html @@ -0,0 +1,3 @@ +<div style="background: linear-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div> +<div style="background: linear-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div> +<div style="background: linear-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div> diff --git a/layout/reftests/css-gradients/linear-size-1a.html b/layout/reftests/css-gradients/linear-size-1a.html new file mode 100644 index 0000000000..30d133369f --- /dev/null +++ b/layout/reftests/css-gradients/linear-size-1a.html @@ -0,0 +1,2 @@ +<div style="background: linear-gradient(white, black); + background-size: 300px 100px; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-stops-1-ref.html b/layout/reftests/css-gradients/linear-stops-1-ref.html new file mode 100644 index 0000000000..7ef12c93ec --- /dev/null +++ b/layout/reftests/css-gradients/linear-stops-1-ref.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(white 0%, red 20%, green 40%, blue 60%, yellow 80%, black 100%) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-stops-1a.html b/layout/reftests/css-gradients/linear-stops-1a.html new file mode 100644 index 0000000000..4eed757f1a --- /dev/null +++ b/layout/reftests/css-gradients/linear-stops-1a.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(white, red, green, blue, yellow, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-stops-1b.html b/layout/reftests/css-gradients/linear-stops-1b.html new file mode 100644 index 0000000000..69f7260db5 --- /dev/null +++ b/layout/reftests/css-gradients/linear-stops-1b.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(white 0, red 60px, green 120px, blue 180px, yellow 240px, black 300px) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-stops-1c.html b/layout/reftests/css-gradients/linear-stops-1c.html new file mode 100644 index 0000000000..99fa88a746 --- /dev/null +++ b/layout/reftests/css-gradients/linear-stops-1c.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(white, red 20%, green, blue 60%, yellow, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-stops-1d.html b/layout/reftests/css-gradients/linear-stops-1d.html new file mode 100644 index 0000000000..005f4fdf5b --- /dev/null +++ b/layout/reftests/css-gradients/linear-stops-1d.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(white, red, green 40%, red 40%, green 40%, blue, yellow, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-stops-1e.html b/layout/reftests/css-gradients/linear-stops-1e.html new file mode 100644 index 0000000000..808ecd016e --- /dev/null +++ b/layout/reftests/css-gradients/linear-stops-1e.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(white, red, green 40%, red 20%, green 40%, blue, yellow, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-stops-1f.html b/layout/reftests/css-gradients/linear-stops-1f.html new file mode 100644 index 0000000000..79ce44928b --- /dev/null +++ b/layout/reftests/css-gradients/linear-stops-1f.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(white, red, green 40%, red 40%, green 20%, blue, yellow, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-vertical-1-ref.html b/layout/reftests/css-gradients/linear-vertical-1-ref.html new file mode 100644 index 0000000000..4de794ac61 --- /dev/null +++ b/layout/reftests/css-gradients/linear-vertical-1-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<html> +<body> +<canvas id="canvas" width="300" height="300"/> +<script> +var ctx = document.getElementById('canvas').getContext('2d'); + +var grad = ctx.createLinearGradient(150,0,150,300); +grad.addColorStop(0, 'white'); +grad.addColorStop(1, 'black'); + +ctx.fillStyle = grad; +ctx.fillRect(0,0,300,300); +</script> +</body> +</html> diff --git a/layout/reftests/css-gradients/linear-vertical-1a.html b/layout/reftests/css-gradients/linear-vertical-1a.html new file mode 100644 index 0000000000..fd2b62fbb2 --- /dev/null +++ b/layout/reftests/css-gradients/linear-vertical-1a.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(white, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-vertical-1b.html b/layout/reftests/css-gradients/linear-vertical-1b.html new file mode 100644 index 0000000000..4b9ffc5050 --- /dev/null +++ b/layout/reftests/css-gradients/linear-vertical-1b.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(to bottom, white, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-vertical-1c.html b/layout/reftests/css-gradients/linear-vertical-1c.html new file mode 100644 index 0000000000..f311e8ac47 --- /dev/null +++ b/layout/reftests/css-gradients/linear-vertical-1c.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(white 0%, white 0%, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-vertical-1d.html b/layout/reftests/css-gradients/linear-vertical-1d.html new file mode 100644 index 0000000000..aab3c104a9 --- /dev/null +++ b/layout/reftests/css-gradients/linear-vertical-1d.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(white 0%, white -20%, black) no-repeat; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/linear-vertical-subpixel-1-ref.html b/layout/reftests/css-gradients/linear-vertical-subpixel-1-ref.html new file mode 100644 index 0000000000..e60080125c --- /dev/null +++ b/layout/reftests/css-gradients/linear-vertical-subpixel-1-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+ margin-top: 21px;
+ height: 30px;
+ background-image: linear-gradient(black, white);
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-vertical-subpixel-1.html b/layout/reftests/css-gradients/linear-vertical-subpixel-1.html new file mode 100644 index 0000000000..0bca7bafb3 --- /dev/null +++ b/layout/reftests/css-gradients/linear-vertical-subpixel-1.html @@ -0,0 +1,15 @@ +<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+ margin-top: 20.7px;
+ height: 30px;
+ background-image: linear-gradient(black, white);
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-viewport-ref.html b/layout/reftests/css-gradients/linear-viewport-ref.html new file mode 100644 index 0000000000..36a51e521f --- /dev/null +++ b/layout/reftests/css-gradients/linear-viewport-ref.html @@ -0,0 +1 @@ +<body style="border: 0; margin: 0; padding: 0;"><div style="background: linear-gradient(blue, aqua) no-repeat; width: 100%; height: 100%;"> </div></body> diff --git a/layout/reftests/css-gradients/linear-viewport.html b/layout/reftests/css-gradients/linear-viewport.html new file mode 100644 index 0000000000..a6f2bf64ed --- /dev/null +++ b/layout/reftests/css-gradients/linear-viewport.html @@ -0,0 +1,2 @@ +<!-- bug 509681 --> +<body style="background: linear-gradient(blue, aqua) fixed no-repeat;"> diff --git a/layout/reftests/css-gradients/mask-gradient-translucent-end-color-1-ref.html b/layout/reftests/css-gradients/mask-gradient-translucent-end-color-1-ref.html new file mode 100644 index 0000000000..e5fdd1028f --- /dev/null +++ b/layout/reftests/css-gradients/mask-gradient-translucent-end-color-1-ref.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Make sure that gradient masks are painted correctly with translucent end-color</title> + +<style> + +html { + background: rgba(255, 0, 0, 0.5); + overflow: hidden; +} + +</style> diff --git a/layout/reftests/css-gradients/mask-gradient-translucent-end-color-1.html b/layout/reftests/css-gradients/mask-gradient-translucent-end-color-1.html new file mode 100644 index 0000000000..29c0b28313 --- /dev/null +++ b/layout/reftests/css-gradients/mask-gradient-translucent-end-color-1.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8"> +<title>Make sure that gradient masks are painted correctly with translucent end-color</title> +<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1329411 --> + +<style> + +html { + background: white; + overflow: hidden; +} + +div { + height: 5000px; + background-color: red; + mask-image: linear-gradient(transparent 0px, rgba(255, 0, 0, 0.5) 2000px); +} + +</style> +<body style="margin: 0px;"> + <div></div> + + <script> + window.addEventListener("MozReftestInvalidate", function () { + document.documentElement.scrollTop = 3000; // > 2000 + document.documentElement.removeAttribute("class"); + }); + </script> +</body> diff --git a/layout/reftests/css-gradients/nostops.html b/layout/reftests/css-gradients/nostops.html new file mode 100644 index 0000000000..9c40353658 --- /dev/null +++ b/layout/reftests/css-gradients/nostops.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(to right bottom) no-repeat; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/onestop.html b/layout/reftests/css-gradients/onestop.html new file mode 100644 index 0000000000..afa1ad6fb3 --- /dev/null +++ b/layout/reftests/css-gradients/onestop.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(to right bottom, #0000ff 50%) no-repeat; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/orange-square.html b/layout/reftests/css-gradients/orange-square.html new file mode 100644 index 0000000000..aa70b29fa6 --- /dev/null +++ b/layout/reftests/css-gradients/orange-square.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<title>orange square</title> +<style> + +div { + width: 200px; + height: 200px; + background: orange; +} + +</style> +<div></div> diff --git a/layout/reftests/css-gradients/radial-1-ref.html b/layout/reftests/css-gradients/radial-1-ref.html new file mode 100644 index 0000000000..b836c6c061 --- /dev/null +++ b/layout/reftests/css-gradients/radial-1-ref.html @@ -0,0 +1,22 @@ +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> +<head> +<script> +function doDraw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + var radgrad = ctx.createRadialGradient(100,100,25,100,100,50); + radgrad.addColorStop(0, '#FF0000'); + radgrad.addColorStop(1, '#0000FF'); + + ctx.fillStyle = radgrad; + ctx.fillRect(0,0,300,300); + + document.documentElement.removeAttribute('class'); +} +</script> +</head> +<body onload="doDraw();"> +<canvas id="canvas" width="300" height="300"/> +</body> +</html> diff --git a/layout/reftests/css-gradients/radial-1a.html b/layout/reftests/css-gradients/radial-1a.html new file mode 100644 index 0000000000..e42e1d1ca3 --- /dev/null +++ b/layout/reftests/css-gradients/radial-1a.html @@ -0,0 +1 @@ +<div style="background: radial-gradient(100px 100px at 100px 100px, #ff0000 25px, #0000ff 50px) no-repeat; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/radial-1b.html b/layout/reftests/css-gradients/radial-1b.html new file mode 100644 index 0000000000..450dbc9590 --- /dev/null +++ b/layout/reftests/css-gradients/radial-1b.html @@ -0,0 +1 @@ +<div style="background: radial-gradient(closest-side at 100px 100px, #ff0000 25px, #0000ff 50px) no-repeat; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/radial-2-ref.html b/layout/reftests/css-gradients/radial-2-ref.html new file mode 100644 index 0000000000..71ccb53eee --- /dev/null +++ b/layout/reftests/css-gradients/radial-2-ref.html @@ -0,0 +1,22 @@ +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> +<head> +<script> +function doDraw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + var radgrad = ctx.createRadialGradient(100,100,0,100,100,50); + radgrad.addColorStop(0, '#FF0000'); + radgrad.addColorStop(1, '#0000FF'); + + ctx.fillStyle = radgrad; + ctx.fillRect(0,0,300,300); + + document.documentElement.removeAttribute('class'); +} +</script> +</head> +<body onload="doDraw();"> +<canvas id="canvas" width="300" height="300"/> +</body> +</html> diff --git a/layout/reftests/css-gradients/radial-2a.html b/layout/reftests/css-gradients/radial-2a.html new file mode 100644 index 0000000000..b316e1c504 --- /dev/null +++ b/layout/reftests/css-gradients/radial-2a.html @@ -0,0 +1 @@ +<div style="background: radial-gradient(closest-side at 100px 100px, yellow -10px, #ff0000 0, #0000ff 50px); width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/radial-2b.html b/layout/reftests/css-gradients/radial-2b.html new file mode 100644 index 0000000000..675cb6ecd6 --- /dev/null +++ b/layout/reftests/css-gradients/radial-2b.html @@ -0,0 +1,3 @@ +<!-- This test checks that adjustment of stop positions to be non-negative + happens after the calculation of implied stop positions --> +<div style="background: radial-gradient(closest-side at 100px 100px, #ff0000 -50px, #ff0000, #0000ff 50px); width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/radial-2c.html b/layout/reftests/css-gradients/radial-2c.html new file mode 100644 index 0000000000..38bdcfd85c --- /dev/null +++ b/layout/reftests/css-gradients/radial-2c.html @@ -0,0 +1 @@ +<div style="background: radial-gradient(100px 100px at 100px 100px, yellow -10px, #ff0000 0, #0000ff 50px); width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/radial-2d.html b/layout/reftests/css-gradients/radial-2d.html new file mode 100644 index 0000000000..152ee771ba --- /dev/null +++ b/layout/reftests/css-gradients/radial-2d.html @@ -0,0 +1,3 @@ +<!-- This test checks that adjustment of stop positions to be non-negative + happens after the calculation of implied stop positions --> +<div style="background: radial-gradient(100px 100px at 100px 100px, #ff0000 -50px, #ff0000, #0000ff 50px); width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/radial-onestopposition-1-ref.html b/layout/reftests/css-gradients/radial-onestopposition-1-ref.html new file mode 100644 index 0000000000..439e50cbd5 --- /dev/null +++ b/layout/reftests/css-gradients/radial-onestopposition-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<title>Test for radial-gradient() with all stops at the same position</title> +<style> + +div { + width: 200px; + height: 200px; + background-image: radial-gradient(closest-side, blue 0%, blue 25%, orange 25%, orange 100%); +} + +</style> +<div></div> diff --git a/layout/reftests/css-gradients/radial-onestopposition-1a.html b/layout/reftests/css-gradients/radial-onestopposition-1a.html new file mode 100644 index 0000000000..60ad3e6a3d --- /dev/null +++ b/layout/reftests/css-gradients/radial-onestopposition-1a.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<title>Test for radial-gradient() with all stops at the same position</title> +<style> + +div { + width: 200px; + height: 200px; + background-image: radial-gradient(closest-side, blue 25%, orange 25%); +} + +</style> +<div></div> diff --git a/layout/reftests/css-gradients/radial-onestopposition-1b.html b/layout/reftests/css-gradients/radial-onestopposition-1b.html new file mode 100644 index 0000000000..22a00ff896 --- /dev/null +++ b/layout/reftests/css-gradients/radial-onestopposition-1b.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<title>Test for radial-gradient() with all stops at the same position</title> +<style> + +div { + width: 200px; + height: 200px; + background-image: radial-gradient(100px 100px at 100px, blue 25%, orange 25%); +} + +</style> +<div></div> diff --git a/layout/reftests/css-gradients/radial-position-1-ref.html b/layout/reftests/css-gradients/radial-position-1-ref.html new file mode 100644 index 0000000000..c94455ebe8 --- /dev/null +++ b/layout/reftests/css-gradients/radial-position-1-ref.html @@ -0,0 +1,2 @@ +<body style="margin:0;"> +<div style="background: radial-gradient(white, black) no-repeat; position:relative; left:-200px; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/radial-position-1a.html b/layout/reftests/css-gradients/radial-position-1a.html new file mode 100644 index 0000000000..ecd4b369f4 --- /dev/null +++ b/layout/reftests/css-gradients/radial-position-1a.html @@ -0,0 +1,2 @@ +<body style="margin:0;"> +<div style="background: radial-gradient(white, black) no-repeat; background-position:-200px 0; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/radial-position-1b.html b/layout/reftests/css-gradients/radial-position-1b.html new file mode 100644 index 0000000000..02d3ed0714 --- /dev/null +++ b/layout/reftests/css-gradients/radial-position-1b.html @@ -0,0 +1,2 @@ +<body style="margin:0;"> +<div style="background: radial-gradient(212.132034px 212.132034px at center, white, black) no-repeat; background-position:-200px 0; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/radial-premul-ref.html b/layout/reftests/css-gradients/radial-premul-ref.html new file mode 100644 index 0000000000..1424f4373c --- /dev/null +++ b/layout/reftests/css-gradients/radial-premul-ref.html @@ -0,0 +1 @@ +<div style="background: radial-gradient(rgba(255, 0, 0, .9) 0% , rgba(255, 0, 0, 0) 50%, rgba(0, 0, 255, 0) 50%, rgba(0, 0, 255, 1) 100%) no-repeat; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/radial-premul.html b/layout/reftests/css-gradients/radial-premul.html new file mode 100644 index 0000000000..33b89c72bc --- /dev/null +++ b/layout/reftests/css-gradients/radial-premul.html @@ -0,0 +1 @@ +<div style="background: radial-gradient(rgba(255, 0, 0, .9) 0% , rgba(0, 255, 0, 0) 50%, rgba(0, 0, 255, 1) 100%) no-repeat; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/radial-shape-closest-corner-1-ref.html b/layout/reftests/css-gradients/radial-shape-closest-corner-1-ref.html new file mode 100644 index 0000000000..b6835d759d --- /dev/null +++ b/layout/reftests/css-gradients/radial-shape-closest-corner-1-ref.html @@ -0,0 +1,9 @@ +<style>div { position:absolute; width:200px; height:200px; }</style> +<div style="background: radial-gradient(closest-side circle at 60px 80px, white, black 100px); top:10px; left:10px;"></div> +<div style="background: radial-gradient(closest-side circle at 140px 80px, white, black 100px); top:10px; left:220px;"></div> +<div style="background: radial-gradient(closest-side circle at 80px 60px, white, black 100px); top:220px; left:10px;"></div> +<div style="background: radial-gradient(closest-side circle at 80px 140px, white, black 100px); top:220px; left:220px;"></div> +<div style="background: radial-gradient(closest-corner at 60px 80px, white, black 60px); top:430px; left:10px;"></div> +<div style="background: radial-gradient(closest-corner at 140px 80px, white, black 60px); top:430px; left:220px;"></div> +<div style="background: radial-gradient(ellipse closest-corner at 80px 60px, white, black 80px); top:640px; left:10px;"></div> +<div style="background: radial-gradient(ellipse closest-corner at 80px 140px, white, black 80px); top:640px; left:220px;"></div> diff --git a/layout/reftests/css-gradients/radial-shape-closest-corner-1a.html b/layout/reftests/css-gradients/radial-shape-closest-corner-1a.html new file mode 100644 index 0000000000..508b002670 --- /dev/null +++ b/layout/reftests/css-gradients/radial-shape-closest-corner-1a.html @@ -0,0 +1,9 @@ +<style>div { position:absolute; width:200px; height:200px; }</style> +<div style="background: radial-gradient(circle closest-corner at 60px 80px, white, black); top:10px; left:10px;"></div> +<div style="background: radial-gradient(closest-corner circle at 140px 80px, white, black); top:10px; left:220px;"></div> +<div style="background: radial-gradient(circle closest-corner at 80px 60px, white, black); top:220px; left:10px;"></div> +<div style="background: radial-gradient(closest-corner circle at 80px 140px, white, black); top:220px; left:220px;"></div> +<div style="background: radial-gradient(ellipse closest-corner at 60px 80px, white, black 60px); top:430px; left:10px;"></div> +<div style="background: radial-gradient(closest-corner ellipse at 140px 80px, white, black 60px); top:430px; left:220px;"></div> +<div style="background: radial-gradient(closest-corner at 80px 60px, white, black 80px); top:640px; left:10px;"></div> +<div style="background: radial-gradient(closest-corner at 80px 140px, white, black 80px); top:640px; left:220px;"></div> diff --git a/layout/reftests/css-gradients/radial-shape-closest-corner-1b.html b/layout/reftests/css-gradients/radial-shape-closest-corner-1b.html new file mode 100644 index 0000000000..e5d3dc5ee6 --- /dev/null +++ b/layout/reftests/css-gradients/radial-shape-closest-corner-1b.html @@ -0,0 +1,9 @@ +<style>div { position:absolute; width:200px; height:200px; }</style> +<div style="background: radial-gradient(100px 100px at 60px 80px, white, black); top:10px; left:10px;"></div> +<div style="background: radial-gradient(100px at 140px 80px, white, black); top:10px; left:220px;"></div> +<div style="background: radial-gradient(100px 100px at 80px 60px, white, black); top:220px; left:10px;"></div> +<div style="background: radial-gradient(100px at 80px 140px, white, black); top:220px; left:220px;"></div> +<div style="background: radial-gradient(84.8528137px 113.137084px at 60px 80px, white, black 60px); top:430px; left:10px;"></div> +<div style="background: radial-gradient(84.8528137px 113.137084px at 140px 80px, white, black 60px); top:430px; left:220px;"></div> +<div style="background: radial-gradient(113.137084px 84.8528137px at 80px 60px, white, black 80px); top:640px; left:10px;"></div> +<div style="background: radial-gradient(113.137084px 84.8528137px at 80px 140px, white, black 80px); top:640px; left:220px;"></div> diff --git a/layout/reftests/css-gradients/radial-shape-closest-side-1-ref.html b/layout/reftests/css-gradients/radial-shape-closest-side-1-ref.html new file mode 100644 index 0000000000..284cf85855 --- /dev/null +++ b/layout/reftests/css-gradients/radial-shape-closest-side-1-ref.html @@ -0,0 +1,9 @@ +<style>div { position:absolute; width:200px; height:200px; }</style> +<div style="background: radial-gradient(circle closest-side at 50px 80px, white, black 50px); top:10px; left:10px;"></div> +<div style="background: radial-gradient(circle closest-side at 150px 80px, white, black 50px); top:10px; left:220px;"></div> +<div style="background: radial-gradient(circle closest-side at 80px 50px, white, black 50px); top:220px; left:10px;"></div> +<div style="background: radial-gradient(circle closest-side at 80px 150px, white, black 50px); top:220px; left:220px;"></div> +<div style="background: radial-gradient(circle closest-side at 20px 20px, white, black 20px); height:100px; transform-origin:0 0; transform:scale(1.0, 2.0); top:430px; left:10px;"></div> +<div style="background: radial-gradient(circle closest-side at 180px 20px, white, black 20px); height:100px; transform-origin:0 0; transform:scale(1.0, 2.0); top:430px; left:220px;"></div> +<div style="background: radial-gradient(circle closest-side at 20px 20px, white, black 20px); width:100px; transform-origin:0 0; transform:scale(2.0, 1.0); top:640px; left:10px;"></div> +<div style="background: radial-gradient(circle closest-side at 20px 180px, white, black 20px); width:100px; transform-origin:0 0; transform:scale(2.0, 1.0); top:640px; left:220px;"></div> diff --git a/layout/reftests/css-gradients/radial-shape-closest-side-1a.html b/layout/reftests/css-gradients/radial-shape-closest-side-1a.html new file mode 100644 index 0000000000..a689ab0365 --- /dev/null +++ b/layout/reftests/css-gradients/radial-shape-closest-side-1a.html @@ -0,0 +1,9 @@ +<style>div { position:absolute; width:200px; height:200px; }</style> +<div style="background: radial-gradient(circle closest-side at 50px 80px, white, black); top:10px; left:10px;"></div> +<div style="background: radial-gradient(closest-side circle at 150px 80px, white, black); top:10px; left:220px;"></div> +<div style="background: radial-gradient(circle closest-side at 80px 50px, white, black); top:220px; left:10px;"></div> +<div style="background: radial-gradient(closest-side circle at 80px 150px, white, black); top:220px; left:220px;"></div> +<div style="background: radial-gradient(ellipse closest-side at 20px 40px, white, black); top:430px; left:10px;"></div> +<div style="background: radial-gradient(closest-side ellipse at 180px 40px, white, black); top:430px; left:220px;"></div> +<div style="background: radial-gradient(closest-side at 40px 20px, white, black); top:640px; left:10px;"></div> +<div style="background: radial-gradient(closest-side at 40px 180px, white, black); top:640px; left:220px;"></div> diff --git a/layout/reftests/css-gradients/radial-shape-closest-side-1b.html b/layout/reftests/css-gradients/radial-shape-closest-side-1b.html new file mode 100644 index 0000000000..8290b6ad11 --- /dev/null +++ b/layout/reftests/css-gradients/radial-shape-closest-side-1b.html @@ -0,0 +1,9 @@ +<style>div { position:absolute; width:200px; height:200px; }</style> +<div style="background: radial-gradient(50px 50px at 50px 80px, white, black); top:10px; left:10px;"></div> +<div style="background: radial-gradient(50px at 150px 80px, white, black); top:10px; left:220px;"></div> +<div style="background: radial-gradient(50px 50px at 80px 50px, white, black); top:220px; left:10px;"></div> +<div style="background: radial-gradient(50px at 80px 150px, white, black); top:220px; left:220px;"></div> +<div style="background: radial-gradient(20px 40px at 20px 40px, white, black); top:430px; left:10px;"></div> +<div style="background: radial-gradient(20px 40px at 180px 40px, white, black); top:430px; left:220px;"></div> +<div style="background: radial-gradient(40px 20px at 40px 20px, white, black); top:640px; left:10px;"></div> +<div style="background: radial-gradient(40px 20px at 40px 180px, white, black); top:640px; left:220px;"></div> diff --git a/layout/reftests/css-gradients/radial-shape-farthest-corner-1-ref.html b/layout/reftests/css-gradients/radial-shape-farthest-corner-1-ref.html new file mode 100644 index 0000000000..e8fc7ff5ef --- /dev/null +++ b/layout/reftests/css-gradients/radial-shape-farthest-corner-1-ref.html @@ -0,0 +1,9 @@ +<style>div { position:absolute; width:200px; height:200px; }</style> +<div style="background: radial-gradient(circle farthest-side at 40px 80px, white, black 200px); top:10px; left:10px;"></div> +<div style="background: radial-gradient(farthest-side circle at 160px 80px, white, black 200px); top:10px; left:220px;"></div> +<div style="background: radial-gradient(circle farthest-side at 80px 40px, white, black 200px); top:220px; left:10px;"></div> +<div style="background: radial-gradient(farthest-side circle at 80px 160px, white, black 200px); top:220px; left:220px;"></div> +<div style="background: radial-gradient(farthest-corner at 60px 80px, white, black 140px); top:430px; left:10px;"></div> +<div style="background: radial-gradient(farthest-corner at 140px 80px, white, black 140px); top:430px; left:220px;"></div> +<div style="background: radial-gradient(ellipse farthest-corner at 80px 60px, white, black 120px); top:640px; left:10px;"></div> +<div style="background: radial-gradient(ellipse farthest-corner at 80px 140px, white, black 120px); top:640px; left:220px;"></div> diff --git a/layout/reftests/css-gradients/radial-shape-farthest-corner-1a.html b/layout/reftests/css-gradients/radial-shape-farthest-corner-1a.html new file mode 100644 index 0000000000..6ee7b27c88 --- /dev/null +++ b/layout/reftests/css-gradients/radial-shape-farthest-corner-1a.html @@ -0,0 +1,9 @@ +<style>div { position:absolute; width:200px; height:200px; }</style> +<div style="background: radial-gradient(circle farthest-corner at 40px 80px, white, black); top:10px; left:10px;"></div> +<div style="background: radial-gradient(farthest-corner circle at 160px 80px, white, black); top:10px; left:220px;"></div> +<div style="background: radial-gradient(circle farthest-corner at 80px 40px, white, black); top:220px; left:10px;"></div> +<div style="background: radial-gradient(farthest-corner circle at 80px 160px, white, black); top:220px; left:220px;"></div> +<div style="background: radial-gradient(ellipse farthest-corner at 60px 80px, white, black 140px); top:430px; left:10px;"></div> +<div style="background: radial-gradient(farthest-corner ellipse at 140px 80px, white, black 140px); top:430px; left:220px;"></div> +<div style="background: radial-gradient(farthest-corner at 80px 60px, white, black 120px); top:640px; left:10px;"></div> +<div style="background: radial-gradient(farthest-corner at 80px 140px, white, black 120px); top:640px; left:220px;"></div> diff --git a/layout/reftests/css-gradients/radial-shape-farthest-corner-1b.html b/layout/reftests/css-gradients/radial-shape-farthest-corner-1b.html new file mode 100644 index 0000000000..b095575f00 --- /dev/null +++ b/layout/reftests/css-gradients/radial-shape-farthest-corner-1b.html @@ -0,0 +1,9 @@ +<style>div { position:absolute; width:200px; height:200px; }</style> +<div style="background: radial-gradient(200px 200px at 40px 80px, white, black); top:10px; left:10px;"></div> +<div style="background: radial-gradient(200px at 160px 80px, white, black); top:10px; left:220px;"></div> +<div style="background: radial-gradient(200px 200px at 80px 40px, white, black); top:220px; left:10px;"></div> +<div style="background: radial-gradient(200px at 80px 160px, white, black); top:220px; left:220px;"></div> +<div style="background: radial-gradient(197.989898px 169.705627px at 60px 80px, white, black 140px); top:430px; left:10px;"></div> +<div style="background: radial-gradient(197.989898px 169.705627px at 140px 80px, white, black 140px); top:430px; left:220px;"></div> +<div style="background: radial-gradient(169.705627px 197.989898px at 80px 60px, white, black 120px); top:640px; left:10px;"></div> +<div style="background: radial-gradient(169.705627px 197.989898px at 80px 140px, white, black 120px); top:640px; left:220px;"></div> diff --git a/layout/reftests/css-gradients/radial-shape-farthest-side-1-ref.html b/layout/reftests/css-gradients/radial-shape-farthest-side-1-ref.html new file mode 100644 index 0000000000..d2a04d803d --- /dev/null +++ b/layout/reftests/css-gradients/radial-shape-farthest-side-1-ref.html @@ -0,0 +1,9 @@ +<style>div { position:absolute; width:200px; height:200px; }</style> +<div style="background: radial-gradient(circle farthest-side at 50px 80px, white, black 150px); top:10px; left:10px;"></div> +<div style="background: radial-gradient(farthest-side circle at 150px 80px, white, black 150px); top:10px; left:220px;"></div> +<div style="background: radial-gradient(circle farthest-side at 80px 50px, white, black 150px); top:220px; left:10px;"></div> +<div style="background: radial-gradient(farthest-side circle at 80px 150px, white, black 150px); top:220px; left:220px;"></div> +<div style="background: radial-gradient(circle farthest-side at 80px 80px, white, black 120px); transform-origin:0 0; transform:scale(1.0, 0.5); top:430px; left:10px;"></div> +<div style="background: radial-gradient(farthest-side circle at 120px 120px, white, black 120px); transform-origin:0 0; transform:scale(1.0, 0.5); top:430px; left:220px;"></div> +<div style="background: radial-gradient(circle farthest-side at 80px 80px, white, black 120px); transform-origin:0 0; transform:scale(0.5, 1.0); top:640px; left:10px;"></div> +<div style="background: radial-gradient(farthest-side circle at 120px 120px, white, black 120px); transform-origin:0 0; transform:scale(0.5, 1.0); top:640px; left:220px;"></div> diff --git a/layout/reftests/css-gradients/radial-shape-farthest-side-1a.html b/layout/reftests/css-gradients/radial-shape-farthest-side-1a.html new file mode 100644 index 0000000000..802280dd6b --- /dev/null +++ b/layout/reftests/css-gradients/radial-shape-farthest-side-1a.html @@ -0,0 +1,9 @@ +<style>div { position:absolute; width:200px; height:200px; }</style> +<div style="background: radial-gradient(circle farthest-side at 50px 80px, white, black); top:10px; left:10px;"></div> +<div style="background: radial-gradient(farthest-side circle at 150px 80px, white, black); top:10px; left:220px;"></div> +<div style="background: radial-gradient(circle farthest-side at 80px 50px, white, black); top:220px; left:10px;"></div> +<div style="background: radial-gradient(farthest-side circle at 80px 150px, white, black); top:220px; left:220px;"></div> +<div style="background: radial-gradient(farthest-side at 80px 40px, white, black); height:100px; top:430px; left:10px;"></div> +<div style="background: radial-gradient(farthest-side at 120px 60px, white, black); height:100px; top:430px; left:220px;"></div> +<div style="background: radial-gradient(ellipse farthest-side at 40px 80px, white, black); width:100px; top:640px; left:10px;"></div> +<div style="background: radial-gradient(farthest-side ellipse at 60px 120px, white, black); width:100px; top:640px; left:220px;"></div> diff --git a/layout/reftests/css-gradients/radial-shape-farthest-side-1b.html b/layout/reftests/css-gradients/radial-shape-farthest-side-1b.html new file mode 100644 index 0000000000..4ff7974762 --- /dev/null +++ b/layout/reftests/css-gradients/radial-shape-farthest-side-1b.html @@ -0,0 +1,9 @@ +<style>div { position:absolute; width:200px; height:200px; }</style> +<div style="background: radial-gradient(150px 150px at 50px 80px, white, black); top:10px; left:10px;"></div> +<div style="background: radial-gradient(150px at 150px 80px, white, black); top:10px; left:220px;"></div> +<div style="background: radial-gradient(150px 150px at 80px 50px, white, black); top:220px; left:10px;"></div> +<div style="background: radial-gradient(150px at 80px 150px, white, black); top:220px; left:220px;"></div> +<div style="background: radial-gradient(120px 60px at 80px 40px, white, black); height:100px; top:430px; left:10px;"></div> +<div style="background: radial-gradient(120px 60px at 120px 60px, white, black); height:100px; top:430px; left:220px;"></div> +<div style="background: radial-gradient(60px 120px at 40px 80px, white, black); width:100px; top:640px; left:10px;"></div> +<div style="background: radial-gradient(60px 120px at 60px 120px, white, black); width:100px; top:640px; left:220px;"></div> diff --git a/layout/reftests/css-gradients/radial-size-1-ref.html b/layout/reftests/css-gradients/radial-size-1-ref.html new file mode 100644 index 0000000000..bb0cc963fe --- /dev/null +++ b/layout/reftests/css-gradients/radial-size-1-ref.html @@ -0,0 +1,3 @@ +<div style="background: radial-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div> +<div style="background: radial-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div> +<div style="background: radial-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div> diff --git a/layout/reftests/css-gradients/radial-size-1a.html b/layout/reftests/css-gradients/radial-size-1a.html new file mode 100644 index 0000000000..7c4fa66c7f --- /dev/null +++ b/layout/reftests/css-gradients/radial-size-1a.html @@ -0,0 +1,2 @@ +<div style="background: radial-gradient(white, black); + background-size: 300px 100px; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/radial-size-1b.html b/layout/reftests/css-gradients/radial-size-1b.html new file mode 100644 index 0000000000..6095144d3d --- /dev/null +++ b/layout/reftests/css-gradients/radial-size-1b.html @@ -0,0 +1,2 @@ +<div style="background: radial-gradient(70.7106781% 70.7106781% at center, white, black); + background-size: 300px 100px; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/radial-zero-length-1-ref.html b/layout/reftests/css-gradients/radial-zero-length-1-ref.html new file mode 100644 index 0000000000..0379d19246 --- /dev/null +++ b/layout/reftests/css-gradients/radial-zero-length-1-ref.html @@ -0,0 +1,2 @@ +<div style="background: black; width: 300px; height: 300px;"></div> +<div style="background: black; width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/radial-zero-length-1a.html b/layout/reftests/css-gradients/radial-zero-length-1a.html new file mode 100644 index 0000000000..e1a2faee28 --- /dev/null +++ b/layout/reftests/css-gradients/radial-zero-length-1a.html @@ -0,0 +1,2 @@ +<div style="background: radial-gradient(circle closest-side at left, white, black); width: 300px; height: 300px;"></div> +<div style="background: repeating-radial-gradient(closest-side circle at left, white, black); width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/radial-zero-length-1b.html b/layout/reftests/css-gradients/radial-zero-length-1b.html new file mode 100644 index 0000000000..85aa9b4730 --- /dev/null +++ b/layout/reftests/css-gradients/radial-zero-length-1b.html @@ -0,0 +1,2 @@ +<div style="background: radial-gradient(circle closest-side at left, red, white 100px, black); width: 300px; height: 300px;"></div> +<div style="background: repeating-radial-gradient(closest-side circle at left, red, white 100px, black); width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/radial-zero-length-1c.html b/layout/reftests/css-gradients/radial-zero-length-1c.html new file mode 100644 index 0000000000..2113caae10 --- /dev/null +++ b/layout/reftests/css-gradients/radial-zero-length-1c.html @@ -0,0 +1,2 @@ +<div style="background: radial-gradient(0 0 at left, red, white 100px, black); width: 300px; height: 300px;"></div> +<div style="background: repeating-radial-gradient(0 0 at left, red, white 100px, black); width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/radial-zero-length-1d.html b/layout/reftests/css-gradients/radial-zero-length-1d.html new file mode 100644 index 0000000000..fc078321df --- /dev/null +++ b/layout/reftests/css-gradients/radial-zero-length-1d.html @@ -0,0 +1,2 @@ +<div style="background: radial-gradient(ellipse closest-side at left, red, white 100px, black); width: 300px; height: 300px;"></div> +<div style="background: repeating-radial-gradient(closest-side ellipse at left, red, white 100px, black); width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/radial-zero-length-1e.html b/layout/reftests/css-gradients/radial-zero-length-1e.html new file mode 100644 index 0000000000..52341674a7 --- /dev/null +++ b/layout/reftests/css-gradients/radial-zero-length-1e.html @@ -0,0 +1,2 @@ +<div style="background: radial-gradient(0 150px at left, red, white 100px, black); width: 300px; height: 300px;"></div> +<div style="background: repeating-radial-gradient(0 150px at left, red, white 100px, black); width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/radial-zero-length-1f.html b/layout/reftests/css-gradients/radial-zero-length-1f.html new file mode 100644 index 0000000000..64d0fafd75 --- /dev/null +++ b/layout/reftests/css-gradients/radial-zero-length-1f.html @@ -0,0 +1,2 @@ +<div style="background: radial-gradient(ellipse closest-side at top, red, white 100px, black); width: 300px; height: 300px;"></div> +<div style="background: repeating-radial-gradient(closest-side ellipse at top, red, white 100px, black); width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/reftest.list b/layout/reftests/css-gradients/reftest.list new file mode 100644 index 0000000000..cb22973622 --- /dev/null +++ b/layout/reftests/css-gradients/reftest.list @@ -0,0 +1,111 @@ +fuzzy(0-4,0-89700) == linear-1a.html linear-1-ref.html +fuzzy(0-2,0-23918) == linear-keywords-1a.html linear-keywords-1-ref.html +== linear-diagonal-1a.html linear-diagonal-1-ref.html +== linear-diagonal-2a.html linear-diagonal-2-ref.html +== linear-diagonal-3a.html linear-diagonal-3-ref.html +== linear-diagonal-4a.html linear-diagonal-4-ref.html +fuzzy(0-3,0-43000) == linear-premul.html linear-premul-ref.html + +fuzzy(0-1,0-800000) == linear-flipped-1.html linear-flipped-1-ref.html +== linear-position-1a.html linear-position-1-ref.html +== linear-repeat-1a.html linear-repeat-1-ref.html +== linear-repeat-1b.html linear-repeat-1-ref.html +== linear-repeat-1c.html linear-repeat-1-ref.html +== linear-repeat-1d.html linear-repeat-1-ref.html +== linear-repeat-1e.html linear-repeat-1-ref.html +== linear-repeat-1f.html linear-repeat-1-ref.html +== linear-repeat-1g.html linear-repeat-1-ref.html # bug 582236 +fuzzy(0-1,0-500) fuzzy-if(winWidget,0-2,0-100) == linear-rotated-1.html linear-rotated-1-ref.html +fuzzy(0-1,0-45000) == linear-size-1a.html linear-size-1-ref.html +== linear-stops-1a.html linear-stops-1-ref.html +== linear-stops-1b.html linear-stops-1-ref.html +== linear-stops-1c.html linear-stops-1-ref.html +# these gradients will be cached (in WebRender) and thus exhibit off-by-1 texture interpolation differences: +fuzzy(0-1,0-35400) == linear-stops-1d.html linear-stops-1-ref.html +fuzzy(0-1,0-35400) == linear-stops-1e.html linear-stops-1-ref.html +fuzzy(0-1,0-35400) == linear-stops-1f.html linear-stops-1-ref.html +fuzzy(0-3,0-89700) == linear-vertical-1a.html linear-vertical-1-ref.html +fuzzy(0-3,0-89700) == linear-vertical-1b.html linear-vertical-1-ref.html +fuzzy(0-3,0-89700) == linear-vertical-1c.html linear-vertical-1-ref.html +fuzzy(0-3,0-89700) == linear-vertical-1d.html linear-vertical-1-ref.html +fuzzy(0-3,0-21070) == linear-vertical-subpixel-1.html linear-vertical-subpixel-1-ref.html +== linear-viewport.html linear-viewport-ref.html +== nostops.html about:blank +== onestop.html about:blank +random-if(d2d) fuzzy(0-4,0-6000) == radial-1a.html radial-1-ref.html +random-if(d2d) fuzzy(0-4,0-6000) == radial-1b.html radial-1-ref.html +fuzzy(0-3,0-7860) fuzzy-if(cocoaWidget,0-5,0-89041) fuzzy-if(azureSkiaGL,0-4,0-90000) == radial-2a.html radial-2-ref.html +fuzzy(0-3,0-7860) fuzzy-if(cocoaWidget,0-5,0-89041) fuzzy-if(azureSkiaGL,0-4,0-90000) == radial-2b.html radial-2-ref.html +fuzzy(0-3,0-7860) fuzzy-if(cocoaWidget,0-5,0-89041) fuzzy-if(azureSkiaGL,0-4,0-90000) == radial-2c.html radial-2-ref.html +fuzzy(0-3,0-7860) fuzzy-if(cocoaWidget,0-5,0-89041) fuzzy-if(azureSkiaGL,0-4,0-90000) == radial-2d.html radial-2-ref.html +fuzzy(0-1,0-50) == radial-position-1b.html radial-position-1-ref.html +fuzzy-if(cocoaWidget,0-4,0-22317) fuzzy-if(Android,0-8,0-771) == radial-shape-closest-corner-1a.html radial-shape-closest-corner-1-ref.html +fuzzy(0-2,0-300) == radial-shape-closest-corner-1b.html radial-shape-closest-corner-1-ref.html +fuzzy(0-5,0-30000) fuzzy-if(Android,0-17,0-5000) == radial-shape-closest-side-1a.html radial-shape-closest-side-1-ref.html +fuzzy(0-5,0-30000) fuzzy-if(Android,0-17,0-5000) == radial-shape-closest-side-1b.html radial-shape-closest-side-1-ref.html +fuzzy-if(Android,0-8,0-771) == radial-shape-farthest-corner-1a.html radial-shape-farthest-corner-1-ref.html +fails-if(gtkWidget&&/x86_64-/.test(xulRuntime.XPCOMABI)) fuzzy(0-2,0-500) == radial-shape-farthest-corner-1b.html radial-shape-farthest-corner-1-ref.html +fuzzy(0-2,0-15000) fuzzy-if(Android,0-17,0-13320) == radial-shape-farthest-side-1a.html radial-shape-farthest-side-1-ref.html +fuzzy(0-2,0-15000) fuzzy-if(Android,0-17,0-13320) == radial-shape-farthest-side-1b.html radial-shape-farthest-side-1-ref.html +== radial-size-1a.html radial-size-1-ref.html +== radial-size-1b.html radial-size-1-ref.html +fuzzy-if(Android,0-4,0-248) == radial-zero-length-1a.html radial-zero-length-1-ref.html +fuzzy-if(Android,0-4,0-248) == radial-zero-length-1b.html radial-zero-length-1-ref.html +fuzzy-if(Android,0-4,0-248) == radial-zero-length-1c.html radial-zero-length-1-ref.html +fuzzy-if(Android,0-4,0-248) == radial-zero-length-1d.html radial-zero-length-1-ref.html +fuzzy-if(Android,0-4,0-248) == radial-zero-length-1e.html radial-zero-length-1-ref.html +fuzzy-if(Android,0-4,0-248) == radial-zero-length-1f.html radial-zero-length-1-ref.html +fuzzy(0-1,0-40) == radial-premul.html radial-premul-ref.html +== repeated-final-stop-1.html repeated-final-stop-1-ref.html +== repeating-linear-1a.html repeating-linear-1-ref.html +== repeating-linear-1b.html repeating-linear-1-ref.html +== repeating-linear-2a.html repeating-linear-2-ref.html +fuzzy-if(d2d,0-127,0-2612) == repeating-radial-1a.html repeating-radial-1-ref.html +== repeating-radial-1b.html repeating-radial-1-ref.html +fuzzy-if(d2d,0-127,0-2612) == repeating-radial-1c.html repeating-radial-1-ref.html +== repeating-radial-1d.html repeating-radial-1-ref.html +== repeating-radial-2a.html repeating-radial-2-ref.html +== repeating-radial-2b.html repeating-radial-2-ref.html +fuzzy(0-18,0-600) == twostops-1a.html twostops-1-ref.html +fuzzy(0-18,0-600) == twostops-1b.html twostops-1-ref.html +fuzzy(0-226,0-600) == twostops-1c.html twostops-1-ref.html +fuzzy(0-141,0-300) == twostops-1d.html twostops-1-ref.html +fuzzy(0-73,0-900) == twostops-1e.html twostops-1-ref.html + +# from http://www.xanthir.com/:4bhipd by way of http://a-ja.net/newgrad.html +fuzzy-if(!contentSameGfxBackendAsCanvas,0-3,0-20000) fuzzy-if(azureSkiaGL||layersGPUAccelerated,0-8,0-20000) == aja-linear-1a.html aja-linear-1-ref.html +fuzzy(0-1,0-20000) == aja-linear-1b.html aja-linear-1-ref.html # bug 526694 +fuzzy(0-8,0-20000) == aja-linear-1c.html aja-linear-1-ref.html +fuzzy(0-8,0-20000) == aja-linear-1d.html aja-linear-1-ref.html +fuzzy(0-8,0-20000) == aja-linear-1e.html aja-linear-1-ref.html +fuzzy(0-8,0-20000) == aja-linear-1f.html aja-linear-1-ref.html +fuzzy(0-8,0-20000) == aja-linear-2.html aja-linear-2-ref.html +fuzzy(0-8,0-20000) == aja-linear-3a.html aja-linear-3-ref.html +fuzzy(0-8,0-20000) == aja-linear-3b.html aja-linear-3-ref.html +fuzzy(0-8,0-20000) == aja-linear-4a.html aja-linear-4-ref.html +fuzzy(0-8,0-20000) == aja-linear-4b.html aja-linear-4-ref.html +fuzzy(0-8,0-20000) fuzzy-if(winWidget,1-5,5600-20000) == aja-linear-5a.html aja-linear-5-ref.html +fuzzy-if(Android,0-6,0-10576) == height-dependence-1.html height-dependence-1-ref.html +fuzzy-if(cocoaWidget,0-1,0-40000) fuzzy-if(Android,0-6,0-10576) == height-dependence-2.html height-dependence-2-ref.html +fuzzy-if(Android,0-6,0-10576) == height-dependence-3.html height-dependence-3-ref.html + +== linear-onestopposition-1.html linear-onestopposition-1-ref.html +fuzzy-if(d2d,0-47,0-400) fuzzy-if(winWidget,0-1,0-1375) == linear-onestopposition-1.html linear-onestopposition-1-ref2.html # d2d interpolates the hard stop +== radial-onestopposition-1a.html radial-onestopposition-1-ref.html +== radial-onestopposition-1b.html radial-onestopposition-1-ref.html +fuzzy-if(winWidget,0-1,0-1875) == repeating-linear-onestopposition-1.html orange-square.html +fuzzy-if(winWidget,0-1,0-1875) == repeating-radial-onestopposition-1a.html orange-square.html +fuzzy-if(winWidget,0-1,0-1875) == repeating-radial-onestopposition-1b.html orange-square.html +fuzzy-if(winWidget,0-1,0-2925) == bug-916535-background-repeat-linear.html bug-916535-background-repeat-linear-ref.html +fuzzy(0-1,0-800000) fails-if(useDrawSnapshot) == large-gradient-1.html large-gradient-1-ref.html +fuzzy-if(Android,0-4,0-1) fails-if(useDrawSnapshot) == large-gradient-2.html large-gradient-2-ref.html # Bug 1182082 +fuzzy(0-1,0-800000) fails-if(useDrawSnapshot) == large-gradient-3.html large-gradient-3-ref.html +fails-if(useDrawSnapshot) == large-gradient-4.html large-gradient-4-ref.html +fuzzy(0-2,0-800000) == large-gradient-5.html large-gradient-5-ref.html +== 1224761-1.html 1224761-1-ref.html + +fuzzy(0-4,0-800000) fails-if(useDrawSnapshot) == mask-gradient-translucent-end-color-1.html mask-gradient-translucent-end-color-1-ref.html + +== scaled-color-stop-position.html scaled-color-stop-position-ref.html +fuzzy(0-1,0-40000) == color-stop-clamp-interpolation.html color-stop-clamp-interpolation-ref.html +fuzzy-if(swgl,0-2,0-81000) == linear-gradient-repeated.html linear-gradient-repeated-ref.html diff --git a/layout/reftests/css-gradients/repeated-final-stop-1-ref.html b/layout/reftests/css-gradients/repeated-final-stop-1-ref.html new file mode 100644 index 0000000000..31bad474e1 --- /dev/null +++ b/layout/reftests/css-gradients/repeated-final-stop-1-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> +<style> +html { + background: white; +} +div { + background: linear-gradient(to rigtht, 0 white, 100% orange); + height: 100px; + width: 50%; +} +</style> +</head> +<body> +<div></div> +</body> +</html> diff --git a/layout/reftests/css-gradients/repeated-final-stop-1.html b/layout/reftests/css-gradients/repeated-final-stop-1.html new file mode 100644 index 0000000000..84c13aad29 --- /dev/null +++ b/layout/reftests/css-gradients/repeated-final-stop-1.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<style> +html { + background: white; +} +div { + background: linear-gradient(to rigtht, 0 white, 50% orange, 50% white); + height: 100px; +} +</style> +</head> +<body> +<div></div> +</body> +</html> diff --git a/layout/reftests/css-gradients/repeating-linear-1-ref.html b/layout/reftests/css-gradients/repeating-linear-1-ref.html new file mode 100644 index 0000000000..74f2dcebd6 --- /dev/null +++ b/layout/reftests/css-gradients/repeating-linear-1-ref.html @@ -0,0 +1,8 @@ +<div style="background: black; width: 400px; height: 50px;"></div> +<div style="background: white; width: 400px; height: 50px;"></div> +<div style="background: black; width: 400px; height: 50px;"></div> +<div style="background: white; width: 400px; height: 50px;"></div> +<div style="background: black; width: 400px; height: 50px;"></div> +<div style="background: white; width: 400px; height: 50px;"></div> +<div style="background: black; width: 400px; height: 50px;"></div> +<div style="background: white; width: 400px; height: 50px;"></div> diff --git a/layout/reftests/css-gradients/repeating-linear-1a.html b/layout/reftests/css-gradients/repeating-linear-1a.html new file mode 100644 index 0000000000..b5a4301119 --- /dev/null +++ b/layout/reftests/css-gradients/repeating-linear-1a.html @@ -0,0 +1 @@ +<div style="background: repeating-linear-gradient(black 0, black 50px, white 50px, white 100px); width: 400px; height: 400px;"></div> diff --git a/layout/reftests/css-gradients/repeating-linear-1b.html b/layout/reftests/css-gradients/repeating-linear-1b.html new file mode 100644 index 0000000000..8c0a51256f --- /dev/null +++ b/layout/reftests/css-gradients/repeating-linear-1b.html @@ -0,0 +1 @@ +<div style="background: repeating-linear-gradient(black 100px, black 150px, white 150px, white 200px); width: 400px; height: 400px;"></div> diff --git a/layout/reftests/css-gradients/repeating-linear-2-ref.html b/layout/reftests/css-gradients/repeating-linear-2-ref.html new file mode 100644 index 0000000000..50dd2d8c29 --- /dev/null +++ b/layout/reftests/css-gradients/repeating-linear-2-ref.html @@ -0,0 +1 @@ +<div style="width:300px; height:300px; background:blue;"></div>
\ No newline at end of file diff --git a/layout/reftests/css-gradients/repeating-linear-2a.html b/layout/reftests/css-gradients/repeating-linear-2a.html new file mode 100644 index 0000000000..fc9d44fe99 --- /dev/null +++ b/layout/reftests/css-gradients/repeating-linear-2a.html @@ -0,0 +1 @@ +<div style="background: repeating-linear-gradient(red 20px, blue 20px); width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/repeating-linear-onestopposition-1.html b/layout/reftests/css-gradients/repeating-linear-onestopposition-1.html new file mode 100644 index 0000000000..47963778fd --- /dev/null +++ b/layout/reftests/css-gradients/repeating-linear-onestopposition-1.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<title>Test for repeating-linear-gradient() with all stops at the same position</title> +<style> + +div { + width: 200px; + height: 200px; + background-image: repeating-linear-gradient(to right, blue 25%, orange 25%); +} + +</style> +<div></div> diff --git a/layout/reftests/css-gradients/repeating-radial-1-ref.html b/layout/reftests/css-gradients/repeating-radial-1-ref.html new file mode 100644 index 0000000000..6064a9edae --- /dev/null +++ b/layout/reftests/css-gradients/repeating-radial-1-ref.html @@ -0,0 +1 @@ +<div style="background: repeating-radial-gradient(closest-side, black 0, black 50px, white 50px, white 100px); width: 400px; height: 400px;"></div> diff --git a/layout/reftests/css-gradients/repeating-radial-1a.html b/layout/reftests/css-gradients/repeating-radial-1a.html new file mode 100644 index 0000000000..4237891348 --- /dev/null +++ b/layout/reftests/css-gradients/repeating-radial-1a.html @@ -0,0 +1 @@ +<div style="background: repeating-radial-gradient(closest-side, black 100px, black 150px, white 150px, white 200px); width: 400px; height: 400px;"></div> diff --git a/layout/reftests/css-gradients/repeating-radial-1b.html b/layout/reftests/css-gradients/repeating-radial-1b.html new file mode 100644 index 0000000000..b123651617 --- /dev/null +++ b/layout/reftests/css-gradients/repeating-radial-1b.html @@ -0,0 +1,4 @@ +<!-- Test adjustment of negative stop positions in a repeating radial gradient. + We should still get a repeating pattern, i.e., the stops cannot + naively be mapped to 0. --> +<div style="background: repeating-radial-gradient(closest-side, black -100px, black -50px, white -50px, white 0); width: 400px; height: 400px;"></div> diff --git a/layout/reftests/css-gradients/repeating-radial-1c.html b/layout/reftests/css-gradients/repeating-radial-1c.html new file mode 100644 index 0000000000..c78a4d6780 --- /dev/null +++ b/layout/reftests/css-gradients/repeating-radial-1c.html @@ -0,0 +1 @@ +<div style="background: repeating-radial-gradient(200px 200px at center, black 100px, black 150px, white 150px, white 200px); width: 400px; height: 400px;"></div> diff --git a/layout/reftests/css-gradients/repeating-radial-1d.html b/layout/reftests/css-gradients/repeating-radial-1d.html new file mode 100644 index 0000000000..b91ac6bb31 --- /dev/null +++ b/layout/reftests/css-gradients/repeating-radial-1d.html @@ -0,0 +1,4 @@ +<!-- Test adjustment of negative stop positions in a repeating radial gradient. + We should still get a repeating pattern, i.e., the stops cannot + naively be mapped to 0. --> +<div style="background: repeating-radial-gradient(200px 200px at center, black -100px, black -50px, white -50px, white 0); width: 400px; height: 400px;"></div> diff --git a/layout/reftests/css-gradients/repeating-radial-2-ref.html b/layout/reftests/css-gradients/repeating-radial-2-ref.html new file mode 100644 index 0000000000..9620cead22 --- /dev/null +++ b/layout/reftests/css-gradients/repeating-radial-2-ref.html @@ -0,0 +1 @@ +<div style="width:300px; height:300px; background:blue;"></div> diff --git a/layout/reftests/css-gradients/repeating-radial-2a.html b/layout/reftests/css-gradients/repeating-radial-2a.html new file mode 100644 index 0000000000..a29371a2b8 --- /dev/null +++ b/layout/reftests/css-gradients/repeating-radial-2a.html @@ -0,0 +1 @@ +<div style="background: repeating-radial-gradient(red 20px, blue 20px); width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/repeating-radial-2b.html b/layout/reftests/css-gradients/repeating-radial-2b.html new file mode 100644 index 0000000000..560132bdf5 --- /dev/null +++ b/layout/reftests/css-gradients/repeating-radial-2b.html @@ -0,0 +1 @@ +<div style="background: repeating-radial-gradient(212.1320343px 212.1320343px at center, red 20px, blue 20px); width: 300px; height: 300px;"></div> diff --git a/layout/reftests/css-gradients/repeating-radial-onestopposition-1a.html b/layout/reftests/css-gradients/repeating-radial-onestopposition-1a.html new file mode 100644 index 0000000000..fab13595f7 --- /dev/null +++ b/layout/reftests/css-gradients/repeating-radial-onestopposition-1a.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<title>Test for repeating-radial-gradient() with all stops at the same position</title> +<style> + +div { + width: 200px; + height: 200px; + background-image: repeating-radial-gradient(closest-side, blue 25%, orange 25%); +} + +</style> +<div></div> diff --git a/layout/reftests/css-gradients/repeating-radial-onestopposition-1b.html b/layout/reftests/css-gradients/repeating-radial-onestopposition-1b.html new file mode 100644 index 0000000000..8a7993451a --- /dev/null +++ b/layout/reftests/css-gradients/repeating-radial-onestopposition-1b.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<title>Test for repeating-radial-gradient() with all stops at the same position</title> +<style> + +div { + width: 200px; + height: 200px; + background-image: repeating-radial-gradient(50% 50% at 50% 50%, blue 25%, orange 25%); +} + +</style> +<div></div> diff --git a/layout/reftests/css-gradients/scaled-color-stop-position-ref.html b/layout/reftests/css-gradients/scaled-color-stop-position-ref.html new file mode 100644 index 0000000000..ce080931f4 --- /dev/null +++ b/layout/reftests/css-gradients/scaled-color-stop-position-ref.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>Color stop positioning for scaled gradients as backgrounds reference</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 600px; height: 300px; +} +#inner +{ + width: 400px; height: 300px; + /* 250px stop is halfway along 500px diagonal */ + background-image: linear-gradient(to bottom right, lime 0%, teal 250px, black 100%); +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/css-gradients/scaled-color-stop-position.html b/layout/reftests/css-gradients/scaled-color-stop-position.html new file mode 100644 index 0000000000..897d909898 --- /dev/null +++ b/layout/reftests/css-gradients/scaled-color-stop-position.html @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>Color stop positioning for scaled gradients as backgrounds</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 600px; height: 300px; + /* 250px stop is halfway along 500px diagonal */ + background-image: linear-gradient(to bottom right, lime 0%, teal 250px, black 100%); + background-size: 400px auto; + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"></div> +</body> +</html> diff --git a/layout/reftests/css-gradients/twostops-1-ref.html b/layout/reftests/css-gradients/twostops-1-ref.html new file mode 100644 index 0000000000..26ab00cf24 --- /dev/null +++ b/layout/reftests/css-gradients/twostops-1-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body> +<div style="background:#0000ff; width:300px; height:150px;"></div> +<div style="background:#ff0000; width:300px; height:150px;"></div> +</body> +</html> diff --git a/layout/reftests/css-gradients/twostops-1a.html b/layout/reftests/css-gradients/twostops-1a.html new file mode 100644 index 0000000000..8965d63633 --- /dev/null +++ b/layout/reftests/css-gradients/twostops-1a.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(to bottom, #0000ff 50%, #ff0000 50%) no-repeat; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/twostops-1b.html b/layout/reftests/css-gradients/twostops-1b.html new file mode 100644 index 0000000000..f6102065b2 --- /dev/null +++ b/layout/reftests/css-gradients/twostops-1b.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(to top, #ff0000 50%, #0000ff 50%) no-repeat; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/twostops-1c.html b/layout/reftests/css-gradients/twostops-1c.html new file mode 100644 index 0000000000..edd7e1543d --- /dev/null +++ b/layout/reftests/css-gradients/twostops-1c.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(yellow -50%, #0000ff 0, #0000ff 50%, #ff0000 50%) no-repeat; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/twostops-1d.html b/layout/reftests/css-gradients/twostops-1d.html new file mode 100644 index 0000000000..60ed5ec212 --- /dev/null +++ b/layout/reftests/css-gradients/twostops-1d.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(#0000ff 50%, #ff0000 50%, #ff0000 100%, yellow 150%) no-repeat; width: 300px; height: 300px;"><br></div> diff --git a/layout/reftests/css-gradients/twostops-1e.html b/layout/reftests/css-gradients/twostops-1e.html new file mode 100644 index 0000000000..79d7545259 --- /dev/null +++ b/layout/reftests/css-gradients/twostops-1e.html @@ -0,0 +1 @@ +<div style="background: linear-gradient(yellow -50%, #0000ff 0, #0000ff 50%, #ff0000 50%, #ff0000 100%, yellow 150%) no-repeat; width: 300px; height: 300px;"><br></div> |