diff options
Diffstat (limited to 'layout/reftests/backgrounds/gradient')
8 files changed, 132 insertions, 0 deletions
diff --git a/layout/reftests/backgrounds/gradient/color-stop-clamp-interpolation-ref.html b/layout/reftests/backgrounds/gradient/color-stop-clamp-interpolation-ref.html new file mode 100644 index 000000000..ec3b0166b --- /dev/null +++ b/layout/reftests/backgrounds/gradient/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/backgrounds/gradient/color-stop-clamp-interpolation.html b/layout/reftests/backgrounds/gradient/color-stop-clamp-interpolation.html new file mode 100644 index 000000000..ce68135d5 --- /dev/null +++ b/layout/reftests/backgrounds/gradient/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/backgrounds/gradient/linear-gradient-repeated-ref.html b/layout/reftests/backgrounds/gradient/linear-gradient-repeated-ref.html new file mode 100644 index 000000000..2c3f9f715 --- /dev/null +++ b/layout/reftests/backgrounds/gradient/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/backgrounds/gradient/linear-gradient-repeated.html b/layout/reftests/backgrounds/gradient/linear-gradient-repeated.html new file mode 100644 index 000000000..7e6e14dd5 --- /dev/null +++ b/layout/reftests/backgrounds/gradient/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/backgrounds/gradient/reftest-stylo.list b/layout/reftests/backgrounds/gradient/reftest-stylo.list new file mode 100644 index 000000000..bd0a664dd --- /dev/null +++ b/layout/reftests/backgrounds/gradient/reftest-stylo.list @@ -0,0 +1,4 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== scaled-color-stop-position.html scaled-color-stop-position.html +== color-stop-clamp-interpolation.html color-stop-clamp-interpolation.html +== linear-gradient-repeated.html linear-gradient-repeated.html diff --git a/layout/reftests/backgrounds/gradient/reftest.list b/layout/reftests/backgrounds/gradient/reftest.list new file mode 100644 index 000000000..cdc389c62 --- /dev/null +++ b/layout/reftests/backgrounds/gradient/reftest.list @@ -0,0 +1,3 @@ +== scaled-color-stop-position.html scaled-color-stop-position-ref.html +== color-stop-clamp-interpolation.html color-stop-clamp-interpolation-ref.html +== linear-gradient-repeated.html linear-gradient-repeated-ref.html diff --git a/layout/reftests/backgrounds/gradient/scaled-color-stop-position-ref.html b/layout/reftests/backgrounds/gradient/scaled-color-stop-position-ref.html new file mode 100644 index 000000000..07ddedefe --- /dev/null +++ b/layout/reftests/backgrounds/gradient/scaled-color-stop-position-ref.html @@ -0,0 +1,27 @@ +<!-- + 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: -moz-linear-gradient(top left, lime 0%, teal 250px, black 100%); + background-image: linear-gradient(top left, lime 0%, teal 250px, black 100%); +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/gradient/scaled-color-stop-position.html b/layout/reftests/backgrounds/gradient/scaled-color-stop-position.html new file mode 100644 index 000000000..3b11fca9d --- /dev/null +++ b/layout/reftests/backgrounds/gradient/scaled-color-stop-position.html @@ -0,0 +1,25 @@ +<!-- + 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: -moz-linear-gradient(top left, lime 0%, teal 250px, black 100%); + background-image: linear-gradient(top left, lime 0%, teal 250px, black 100%); + background-size: 400px auto; + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"></div> +</body> +</html> |