diff options
Diffstat (limited to 'layout/reftests/webkit-gradient')
17 files changed, 1042 insertions, 0 deletions
diff --git a/layout/reftests/webkit-gradient/reftest.list b/layout/reftests/webkit-gradient/reftest.list new file mode 100644 index 0000000000..a0af805365 --- /dev/null +++ b/layout/reftests/webkit-gradient/reftest.list @@ -0,0 +1,21 @@ +# This directory contains tests for -webkit-gradient() expressions. + +# In this test, we don't render a "-webkit-gradient" exactly correctly. +# (It's just here to ensure that our approximate/do-something rendering doesn't +# change unexpectedly.) +== webkit-gradient-approx-radial-1.html webkit-gradient-approx-radial-1-ref.html + +# Tests for -webkit-gradient(linear, ...) +== webkit-gradient-linear-1a.html webkit-gradient-linear-1-ref.html +== webkit-gradient-linear-1b.html webkit-gradient-linear-1-ref.html +== webkit-gradient-linear-1c.html webkit-gradient-linear-1-ref.html +== webkit-gradient-linear-1d.html webkit-gradient-linear-1-ref.html +== webkit-gradient-linear-2.html webkit-gradient-linear-2-ref.html + +# Tests for -webkit-gradient(radial, ...) +== webkit-gradient-radial-1a.html webkit-gradient-radial-1-ref.html +== webkit-gradient-radial-1b.html webkit-gradient-radial-1-ref.html +== webkit-gradient-radial-2.html webkit-gradient-radial-2-ref.html + +# Tests for -webkit-linear-gradient +== webkit-linear-gradient-1.html webkit-linear-gradient-1-ref.html diff --git a/layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1-ref.html b/layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1-ref.html new file mode 100644 index 0000000000..274a466206 --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <style> + div { + border: 1px solid black; + width: 50px; + height: 40px; + margin: 1px; + float: left; + } + br { clear: both; } + </style> +</head> +<body> + <!-- Note: -webkit-gradient(radial, ...) expressions involve *two* circles, + with the gradient progressing between their edges. But, the standard + syntax (& hence our emulation) only supports *one* circle. + + So, in our reference renderings below, we ignore the smaller circle from + the testcase's gradient expression, and we use a gradient that progresses + from the outer circle's center to its edge. (Conceptually, we collapse + the smaller circle to a point at the center of the larger circle.) --> + + <!-- Inner circle has nonzero radius, in testcase: + (We ignore it here.) --> + <div style="background: radial-gradient(circle 40px at left top, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 50px at center center, + yellow, blue)"></div> + <br> + + <!-- Both circles have the same radius, in testcase: + (We pretend the first one is 0-sized.) --> + <div style="background: radial-gradient(circle 40px at center center, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 10px at 10px 10px, + blue, yellow)"></div> + <br> + + <!-- Inner circle has different center than outer circle, in testcase: + (We collapse it to center of outer circle.) --> + <div style="background: radial-gradient(circle 40px at left top, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 40px at 10px 20px, + yellow, blue)"></div> + <br> + + <!-- Inner circle and outer circle do not even intersect, in testcase: + (We collapse smaller circle to center of larger circle.) --> + <div style="background: radial-gradient(circle 10px at 30px 10px, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 30px at 150px 10px, + blue, yellow)"></div> + +</body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1.html b/layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1.html new file mode 100644 index 0000000000..4f0760560b --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-approx-radial-1.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: -webkit-gradient(radial, ...) expressions which we don't render + quite correctly because they can't easily be represented with modern syntax. + </title> + <style> + div { + border: 1px solid black; + width: 50px; + height: 40px; + margin: 1px; + float: left; + + /* We include a fallback background, to easily distinguish failures at + * parse time (which fall back to this value) vs. something later on. */ + background: red; + } + br { clear: both; } + </style> +</head> +<body> + <!-- Inner circle has nonzero radius: --> + <div style="background: -webkit-gradient(radial, + left top, 10, left top, 40, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + center center, 50, center center, 40, + from(blue), to(yellow))"></div> + <br> + + <!-- Both circles have the same radius: --> + <div style="background: -webkit-gradient(radial, + center center, 40, center center, 40, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + 10 10, 10, 10 10, 10, + from(blue), to(yellow))"></div> + <br> + + <!-- Inner circle has different center than outer circle: --> + <div style="background: -webkit-gradient(radial, + left bottom, 0, left top, 40, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + 10 20, 40, 30 10, 5, + from(blue), to(yellow))"></div> + <br> + + <!-- Inner circle and outer circle do not even intersect: --> + <div style="background: -webkit-gradient(radial, + 10 10, 5, 30 10, 10, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + -50 10, 5, 150 10, 30, + from(blue), to(yellow))"></div> + +</body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-gradient-linear-1-ref.html b/layout/reftests/webkit-gradient/webkit-gradient-linear-1-ref.html new file mode 100644 index 0000000000..d86354584e --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-linear-1-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <style> + div { + border: 1px solid black; + width: 100px; + height: 50px; + margin: 1px; + float: left; + } + br { clear: both; } + </style> +</head> +<body> + <!-- Left to right gradients: --> + <div style="background: linear-gradient(to right, + blue, yellow)"></div> + + <div style="background: linear-gradient(to right, + blue, pink 30%, yellow"></div> + <br> + + <!-- Right to left gradients: --> + <div style="background: linear-gradient(to left, + blue, yellow)"></div> + <div style="background: linear-gradient(to left, + blue, pink 30%, yellow"></div> + <br> + + <!-- Top to bottom gradients: --> + <div style="background: linear-gradient(to bottom, + blue, yellow)"></div> + + <div style="background: linear-gradient(to bottom, + blue, pink 30%, yellow"></div> + <br> + + <!-- Bottom to top gradients: --> + <div style="background: linear-gradient(to top, + blue, yellow)"></div> + + <div style="background: linear-gradient(to top, + blue, pink 30%, yellow"></div> +</body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-gradient-linear-1a.html b/layout/reftests/webkit-gradient/webkit-gradient-linear-1a.html new file mode 100644 index 0000000000..1a6fe1650b --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-linear-1a.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: -webkit-gradient(linear, ...) expressions, + from center of each side to center of opposite side. + </title> + <style> + div { + border: 1px solid black; + width: 100px; + height: 50px; + margin: 1px; + float: left; + + /* We include a fallback background, to easily distinguish failures at + * parse time (which fall back to this value) vs. something later on. */ + background: red; + } + br { clear: both; } + </style> +</head> +<body> + <!-- Left to right gradients: --> + <div style="background: -webkit-gradient(linear, left center, right center, + from(blue), to(yellow))"></div> + + + <div style="background: -webkit-gradient(linear, left center, right center, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <br> + + <!-- Right to left gradients: --> + <div style="background: -webkit-gradient(linear, right center, left center, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(linear, right center, left center, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <br> + + <!-- Top to bottom gradients: --> + <div style="background: -webkit-gradient(linear, center top, center bottom, + from(blue), to(yellow))"></div> + + <div style="background: -webkit-gradient(linear, center top, center bottom, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <br> + + <!-- Bottom to top gradients: --> + <div style="background: -webkit-gradient(linear, center bottom, center top, + from(blue), to(yellow))"></div> + + <div style="background: -webkit-gradient(linear, center bottom, center top, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> +</body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-gradient-linear-1b.html b/layout/reftests/webkit-gradient/webkit-gradient-linear-1b.html new file mode 100644 index 0000000000..ae03d777ab --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-linear-1b.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: -webkit-gradient(linear, ...) expressions, + from the top-left-most end of each side to the + top-left-most end of opposite side. + </title> + <style> + div { + border: 1px solid black; + width: 100px; + height: 50px; + margin: 1px; + float: left; + + /* We include a fallback background, to easily distinguish failures at + * parse time (which fall back to this value) vs. something later on. */ + background: red; + } + br { clear: both; } + </style> +</head> +<body> + <!-- Left to right gradients: --> + <div style="background: -webkit-gradient(linear, left top, right top, + from(blue), to(yellow))"></div> + + <div style="background: -webkit-gradient(linear, left top, right top, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <br> + + <!-- Right to left gradients: --> + <div style="background: -webkit-gradient(linear, right top, left top, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(linear, right top, left top, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <br> + + <!-- Top to bottom gradients: --> + <div style="background: -webkit-gradient(linear, left top, left bottom, + from(blue), to(yellow))"></div> + + <div style="background: -webkit-gradient(linear, left top, left bottom, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <br> + + <!-- Bottom to top gradients: --> + <div style="background: -webkit-gradient(linear, left bottom, left top, + from(blue), to(yellow))"></div> + + <div style="background: -webkit-gradient(linear, left bottom, left top, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> +</body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-gradient-linear-1c.html b/layout/reftests/webkit-gradient/webkit-gradient-linear-1c.html new file mode 100644 index 0000000000..29ae3a7862 --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-linear-1c.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: -webkit-gradient(linear, ...) expressions, + from the bottom-right-most end of each side to the + bottom-right-most end of opposite side. + </title> + <style> + div { + border: 1px solid black; + width: 100px; + height: 50px; + margin: 1px; + float: left; + + /* We include a fallback background, to easily distinguish failures at + * parse time (which fall back to this value) vs. something later on. */ + background: red; + } + br { clear: both; } + </style> +</head> +<body> + <!-- Left to right gradients: --> + <div style="background: -webkit-gradient(linear, left bottom, right bottom, + from(blue), to(yellow))"></div> + + <div style="background: -webkit-gradient(linear, left bottom, right bottom, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <br> + + <!-- Right to left gradients: --> + <div style="background: -webkit-gradient(linear, right bottom, left bottom, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(linear, right bottom, left bottom, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <br> + + <!-- Top to bottom gradients: --> + <div style="background: -webkit-gradient(linear, right top, right bottom, + from(blue), to(yellow))"></div> + + <div style="background: -webkit-gradient(linear, right top, right bottom, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <br> + + <!-- Bottom to top gradients: --> + <div style="background: -webkit-gradient(linear, right bottom, right top, + from(blue), to(yellow))"></div> + + <div style="background: -webkit-gradient(linear, right bottom, right top, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> +</body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-gradient-linear-1d.html b/layout/reftests/webkit-gradient/webkit-gradient-linear-1d.html new file mode 100644 index 0000000000..b1b54372ce --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-linear-1d.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: -webkit-gradient(linear, ...) expressions, + from the an arbitrary spot along each side to the same arbitrary + place on opposite side. + </title> + <style> + div { + border: 1px solid black; + width: 100px; + height: 50px; + margin: 1px; + float: left; + + /* We include a fallback background, to easily distinguish failures at + * parse time (which fall back to this value) vs. something later on. */ + background: red; + } + br { clear: both; } + </style> +</head> +<body> + <!-- Left to right gradients: --> + <div style="background: -webkit-gradient(linear, left 25%, right 25%, + from(blue), to(yellow))"></div> + + <div style="background: -webkit-gradient(linear, left -123%, right -123%, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <br> + + <!-- Right to left gradients: --> + <div style="background: -webkit-gradient(linear, right -10, left -10, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(linear, right 9999, left 9999, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <br> + + <!-- Top to bottom gradients: --> + <div style="background: -webkit-gradient(linear, 1.11 top, 1.11 bottom, + from(blue), to(yellow))"></div> + + <div style="background: -webkit-gradient(linear, -56.78 top, -56.78 bottom, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <br> + + <!-- Bottom to top gradients: --> + <div style="background: -webkit-gradient(linear, -0 bottom, 0 top, + from(blue), to(yellow))"></div> + + <div style="background: -webkit-gradient(linear, 0% bottom, -0% top, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> +</body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-gradient-linear-2-ref.html b/layout/reftests/webkit-gradient/webkit-gradient-linear-2-ref.html new file mode 100644 index 0000000000..36b4c97180 --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-linear-2-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <style> + div { + border: 1px solid black; + width: 30px; + height: 50px; + margin: 1px; + float: left; + } + br { clear: both; } + </style> +</head> +<body> + <!-- No color stops (transparent): --> + <div></div> + + <!-- Add another background to be sure we're transparent, not white: --> + <div style="background: linear-gradient(to right, pink, purple)"></div> + <br> + + <!-- One color stop, at various positions (renders as solid color): --> + <div style="background: blue"></div> + <div style="background: blue"></div> + <div style="background: blue"></div> + <div style="background: blue"></div> + <br> + + <!-- Two color stops, both at the same position: --> + <div style="background: yellow"></div> + <div style="background: blue"></div> + <div style="background: linear-gradient(to right, + blue 30%, yellow 30%)"></div> + <div style="background: yellow"></div> + <div style="background: blue"></div> + <br> + + <!-- Color stops out of order & need (stable) sorting: --> + <div style="background: linear-gradient(to right, + blue, yellow)"></div> + <div style="background: linear-gradient(to right, + salmon, yellow)"></div> + <div style="background: linear-gradient(to right, + blue, yellow)"></div> + <div style="background: linear-gradient(to right, + blue, yellow)"></div> + <div style="background: linear-gradient(to right, + yellow, salmon 80%, blue)"></div> +</body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-gradient-linear-2.html b/layout/reftests/webkit-gradient/webkit-gradient-linear-2.html new file mode 100644 index 0000000000..95defb5081 --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-linear-2.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: -webkit-gradient(linear, ...) expressions with special cases + for color stops. + </title> + <style> + div { + border: 1px solid black; + width: 30px; + height: 50px; + margin: 1px; + float: left; + + /* We include a fallback background, to easily distinguish failures at + * parse time (which fall back to this value) vs. something later on. */ + background: red; + } + br { clear: both; } + </style> +</head> +<body> + <!-- No color stops (transparent): --> + <div style="background: -webkit-gradient(linear, left center, right center + )"></div> + <!-- Add another background to be sure we're transparent, not white: --> + <div style="background: linear-gradient(to right, pink, purple), + -webkit-gradient(linear, left center, right center)"></div> + <br> + + <!-- One color stop, at various positions (renders as solid color): --> + <div style="background: -webkit-gradient(linear, left center, right center, + from(blue))"></div> + <div style="background: -webkit-gradient(linear, left center, right center, + to(blue))"></div> + <div style="background: -webkit-gradient(linear, left center, right center, + color-stop(30%, blue))"></div> + <div style="background: -webkit-gradient(linear, left center, right center, + color-stop(1.5, blue))"></div> + <br> + + <!-- Two color stops, both at the same position: --> + <div style="background: -webkit-gradient(linear, left center, right center, + from(blue), from(yellow))"></div> + <div style="background: -webkit-gradient(linear, left center, right center, + to(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(linear, left center, right center, + color-stop(30%, blue), + color-stop(30%, yellow))"></div> + <div style="background: -webkit-gradient(linear, left center, right center, + color-stop(-1.5, blue), + color-stop(-1.5, yellow))"></div> + <div style="background: -webkit-gradient(linear, left center, right center, + color-stop(4.5, blue), + color-stop(4.5, yellow))"></div> + <br> + + <!-- Color stops out of order & need (stable) sorting: --> + <div style="background: -webkit-gradient(linear, left center, right center, + to(yellow), from(blue))"></div> + <div style="background: -webkit-gradient(linear, left center, right center, + to(yellow), from(blue), + from(salmon))"></div> + <div style="background: -webkit-gradient(linear, left center, right center, + from(salmon), to(yellow), + from(blue))"></div> + <div style="background: -webkit-gradient(linear, left center, right center, + from(salmon), to(yellow), + from(orange), to(gray), from(blue))"></div> + <div style="background: -webkit-gradient(linear, left center, right center, + color-stop(0.8, salmon), + from(black), from(yellow), + to(blue), to(gray))"></div> +</body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-gradient-radial-1-ref.html b/layout/reftests/webkit-gradient/webkit-gradient-radial-1-ref.html new file mode 100644 index 0000000000..bb1c67aea1 --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-radial-1-ref.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <style> + div { + border: 1px solid black; + width: 40px; + height: 50px; + margin: 1px; + float: left; + } + br { clear: both; } + </style> +</head> +<body> + <!-- left top: --> + <div style="background: radial-gradient(circle 40px at left top, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 40px at left top, + blue, pink 30%, yellow)"></div> + <!-- center top: --> + <div style="background: radial-gradient(circle 40px at center top, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 40px at center top, + blue, pink 30%, yellow)"></div> + <!-- right top: --> + <div style="background: radial-gradient(circle 40px at right top, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 40px at right top, + blue, pink 30%, yellow)"></div> + <br> + + <!-- left center: --> + <div style="background: radial-gradient(circle 40px at left center, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 40px at left center, + blue, pink 30%, yellow)"></div> + <!-- center center: --> + <div style="background: radial-gradient(circle 40px at center center, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 40px at center center, + blue, pink 30%, yellow)"></div> + <!-- right center: --> + <div style="background: radial-gradient(circle 40px at right center, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 40px at right center, + blue, pink 30%, yellow)"></div> + <br> + + <!-- left bottom: --> + <div style="background: radial-gradient(circle 40px at left bottom, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 40px at left bottom, + blue, pink 30%, yellow)"></div> + <!-- center bottom: --> + <div style="background: radial-gradient(circle 40px at center bottom, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 40px at center bottom, + blue, pink 30%, yellow)"></div> + <!-- right bottom: --> + <div style="background: radial-gradient(circle 40px at right bottom, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 40px at right bottom, + blue, pink 30%, yellow)"></div> +</body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-gradient-radial-1a.html b/layout/reftests/webkit-gradient/webkit-gradient-radial-1a.html new file mode 100644 index 0000000000..24e32492f4 --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-radial-1a.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: -webkit-gradient(radial, ...) expressions, + with 0-sized inner circle listed first + </title> + <style> + div { + border: 1px solid black; + width: 40px; + height: 50px; + margin: 1px; + float: left; + + /* We include a fallback background, to easily distinguish failures at + * parse time (which fall back to this value) vs. something later on. */ + background: red; + } + br { clear: both; } + </style> +</head> +<body> + <!-- left top: --> + <div style="background: -webkit-gradient(radial, + left top, 0, left top, 40, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + left top, 0, left top, 40, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <!-- center top: --> + <div style="background: -webkit-gradient(radial, + center top, 0, center top, 40, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + center top, 0, center top, 40, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <!-- right top: --> + <div style="background: -webkit-gradient(radial, + right top, 0, right top, 40, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + right top, 0, right top, 40, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <br> + + <!-- left center: --> + <div style="background: -webkit-gradient(radial, + left center, 0, left center, 40, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + left center, 0, left center, 40, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <!-- center center: --> + <div style="background: -webkit-gradient(radial, + center center, 0, center center, 40, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + center center, 0, center center, 40, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <!-- right center: --> + <div style="background: -webkit-gradient(radial, + right center, 0, right center, 40, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + right center, 0, right center, 40, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <br> + + <!-- left bottom: --> + <div style="background: -webkit-gradient(radial, + left bottom, 0, left bottom, 40, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + left bottom, 0, left bottom, 40, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <!-- center bottom: --> + <div style="background: -webkit-gradient(radial, + center bottom, 0, center bottom, 40, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + center bottom, 0, center bottom, 40, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> + <!-- right bottom: --> + <div style="background: -webkit-gradient(radial, + right bottom, 0, right bottom, 40, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + right bottom, 0, right bottom, 40, + from(blue), + color-stop(0.3, pink), + to(yellow))"></div> +</body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-gradient-radial-1b.html b/layout/reftests/webkit-gradient/webkit-gradient-radial-1b.html new file mode 100644 index 0000000000..08bbc0789a --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-radial-1b.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: -webkit-gradient(radial, ...) expressions, + with 0-sized inner circle listed second + </title> + <style> + div { + border: 1px solid black; + width: 40px; + height: 50px; + margin: 1px; + float: left; + + /* We include a fallback background, to easily distinguish failures at + * parse time (which fall back to this value) vs. something later on. */ + background: red; + } + br { clear: both; } + </style> +</head> +<body> + <!-- left top: --> + <div style="background: -webkit-gradient(radial, + left top, 40, left top, 0, + from(yellow), to(blue))"></div> + <div style="background: -webkit-gradient(radial, + left top, 40, left top, 0, + from(yellow), + color-stop(0.7, pink), + to(blue))"></div> + <!-- center top: --> + <div style="background: -webkit-gradient(radial, + center top, 40, center top, 0, + from(yellow), to(blue))"></div> + <div style="background: -webkit-gradient(radial, + center top, 40, center top, 0, + from(yellow), + color-stop(0.7, pink), + to(blue))"></div> + <!-- right top: --> + <div style="background: -webkit-gradient(radial, + right top, 40, right top, 0, + from(yellow), to(blue))"></div> + <div style="background: -webkit-gradient(radial, + right top, 40, right top, 0, + from(yellow), + color-stop(0.7, pink), + to(blue))"></div> + <br> + + <!-- left center: --> + <div style="background: -webkit-gradient(radial, + left center, 40, left center, 0, + from(yellow), to(blue))"></div> + <div style="background: -webkit-gradient(radial, + left center, 40, left center, 0, + from(yellow), + color-stop(0.7, pink), + to(blue))"></div> + <!-- center center: --> + <div style="background: -webkit-gradient(radial, + center center, 40, center center, 0, + from(yellow), to(blue))"></div> + <div style="background: -webkit-gradient(radial, + center center, 40, center center, 0, + from(yellow), + color-stop(0.7, pink), + to(blue))"></div> + <!-- right center: --> + <div style="background: -webkit-gradient(radial, + right center, 40, right center, 0, + from(yellow), to(blue))"></div> + <div style="background: -webkit-gradient(radial, + right center, 40, right center, 0, + from(yellow), + color-stop(0.7, pink), + to(blue))"></div> + <br> + + <!-- left bottom: --> + <div style="background: -webkit-gradient(radial, + left bottom, 40, left bottom, 0, + from(yellow), to(blue))"></div> + <div style="background: -webkit-gradient(radial, + left bottom, 40, left bottom, 0, + from(yellow), + color-stop(0.7, pink), + to(blue))"></div> + <!-- center bottom: --> + <div style="background: -webkit-gradient(radial, + center bottom, 40, center bottom, 0, + from(yellow), to(blue))"></div> + <div style="background: -webkit-gradient(radial, + center bottom, 40, center bottom, 0, + from(yellow), + color-stop(0.7, pink), + to(blue))"></div> + <!-- right bottom: --> + <div style="background: -webkit-gradient(radial, + right bottom, 40, right bottom, 0, + from(yellow), to(blue))"></div> + <div style="background: -webkit-gradient(radial, + right bottom, 40, right bottom, 0, + from(yellow), + color-stop(0.7, pink), + to(blue))"></div> +</body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-gradient-radial-2-ref.html b/layout/reftests/webkit-gradient/webkit-gradient-radial-2-ref.html new file mode 100644 index 0000000000..c82e3dbb59 --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-radial-2-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: -webkit-gradient(radial, ...) expressions + with various numeric positions and/or side keywords. + </title> + <style> + div { + border: 1px solid black; + width: 50px; + height: 40px; + margin: 1px; + float: left; + } + br { clear: both; } + </style> +</head> +<body> + <!-- Placing gradient's center outside of the element: --> + <div style="background: radial-gradient(circle 50px at -10px -20px, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 50px at 15px -2px, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 50px at -10px 55px, + blue, yellow)"></div> + <br> + + <!-- Mixing side keywords with numeric values: --> + <div style="background: radial-gradient(circle 50px at left 5px, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 50px at center 10px, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 50px at right 30px, + blue, yellow)"></div> + <br> + + <div style="background: radial-gradient(circle 50px at 5px top, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 50px at 10px center, + blue, yellow)"></div> + <div style="background: radial-gradient(circle 50px at 30px bottom, + blue, yellow)"></div> +</body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-gradient-radial-2.html b/layout/reftests/webkit-gradient/webkit-gradient-radial-2.html new file mode 100644 index 0000000000..56e9cbb41f --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-radial-2.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: -webkit-gradient(radial, ...) expressions + with various numeric positions and/or side keywords. + </title> + <style> + div { + border: 1px solid black; + width: 50px; + height: 40px; + margin: 1px; + float: left; + + /* We include a fallback background, to easily distinguish failures at + * parse time (which fall back to this value) vs. something later on. */ + background: red; + } + br { clear: both; } + </style> +</head> +<body> + <!-- Placing gradient's center outside of the element: --> + <div style="background: -webkit-gradient(radial, + -10 -20, 0, -10 -20, 50, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + 15 -2, 0, 15 -2, 50, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + -10 55, 0, -10 55, 50, + from(blue), to(yellow))"></div> + <br> + + <!-- Mixing side keywords with numeric values: --> + <div style="background: -webkit-gradient(radial, + left 5, 0, left 5, 50, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + center 10, 0, center 10, 50, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + right 30, 0, right 30, 50, + from(blue), to(yellow))"></div> + <br> + + <div style="background: -webkit-gradient(radial, + 5 top, 0, 5 top, 50, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + 10 center, 0, 10 center, 50, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(radial, + 30 bottom, 0, 30 bottom, 50, + from(blue), to(yellow))"></div> +</body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-linear-gradient-1-ref.html b/layout/reftests/webkit-gradient/webkit-linear-gradient-1-ref.html new file mode 100644 index 0000000000..290c75a939 --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-linear-gradient-1-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <style> + div { + width: 50px; + height: 200px; + background-image: -webkit-linear-gradient(top, red, blue); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-linear-gradient-1.html b/layout/reftests/webkit-gradient/webkit-linear-gradient-1.html new file mode 100644 index 0000000000..1d9d9e6142 --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-linear-gradient-1.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <style> + div { + width: 50px; + height: 200px; + background-image: -webkit-linear-gradient(red, blue); + } + </style> + </head> + <body> + <div></div> + </body> +</html> |