diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /layout/reftests/webkit-gradient | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/webkit-gradient')
18 files changed, 1176 insertions, 0 deletions
diff --git a/layout/reftests/webkit-gradient/reftest-stylo.list b/layout/reftests/webkit-gradient/reftest-stylo.list new file mode 100644 index 000000000..629e8f184 --- /dev/null +++ b/layout/reftests/webkit-gradient/reftest-stylo.list @@ -0,0 +1,23 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# This directory contains tests for -webkit-gradient() expressions. +# They require webkit prefix support to be enabled. +default-preferences pref(layout.css.prefixes.webkit,true) + +# Tests where we don't render a "-webkit-gradient" exactly correctly. +# (These just ensure that our approximate/do-something rendering does not +# change unexpectedly.) +skip fuzzy-if(cocoaWidget,3,3369) == webkit-gradient-approx-linear-1.html webkit-gradient-approx-linear-1.html +# bug 1225372 +skip == webkit-gradient-approx-radial-1.html webkit-gradient-approx-radial-1.html + +# Tests for -webkit-gradient(linear, ...) +== webkit-gradient-linear-1a.html webkit-gradient-linear-1a.html +== webkit-gradient-linear-1b.html webkit-gradient-linear-1b.html +== webkit-gradient-linear-1c.html webkit-gradient-linear-1c.html +== webkit-gradient-linear-1d.html webkit-gradient-linear-1d.html +== webkit-gradient-linear-2.html webkit-gradient-linear-2.html + +# Tests for -webkit-gradient(radial, ...) +== webkit-gradient-radial-1a.html webkit-gradient-radial-1a.html +== webkit-gradient-radial-1b.html webkit-gradient-radial-1b.html +== webkit-gradient-radial-2.html webkit-gradient-radial-2.html diff --git a/layout/reftests/webkit-gradient/reftest.list b/layout/reftests/webkit-gradient/reftest.list new file mode 100644 index 000000000..0f822256d --- /dev/null +++ b/layout/reftests/webkit-gradient/reftest.list @@ -0,0 +1,21 @@ +# This directory contains tests for -webkit-gradient() expressions. +# They require webkit prefix support to be enabled. +default-preferences pref(layout.css.prefixes.webkit,true) + +# Tests where we don't render a "-webkit-gradient" exactly correctly. +# (These just ensure that our approximate/do-something rendering does not +# change unexpectedly.) +fuzzy-if(cocoaWidget,3,3369) == webkit-gradient-approx-linear-1.html webkit-gradient-approx-linear-1-ref.html # bug 1225372 +== 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 diff --git a/layout/reftests/webkit-gradient/webkit-gradient-approx-linear-1-ref.html b/layout/reftests/webkit-gradient/webkit-gradient-approx-linear-1-ref.html new file mode 100644 index 000000000..326607440 --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-approx-linear-1-ref.html @@ -0,0 +1,68 @@ +<!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: 30px; + margin: 1px; + float: left; + } + br { clear: both; } + </style> +</head> +<body> + <!-- Start point and end point are the same, in testcase: + We end up detecting that the start & end have the same "y" value, + so we render a gradient going from left to right horizontally. --> + <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, + blue, yellow)"></div> + <br> + + <!-- For the rest of the gradients here, we end up rendering a "legacy" + gradient (-moz-linear-gradient) with the gradient line starting at the + testcase's specified "start" point, and we ignore the "end" point. --> + <div style="background: -moz-linear-gradient(center center, + blue, yellow)"></div> + <div style="background: -moz-linear-gradient(left top, + blue, yellow)"></div> + <div style="background: -moz-linear-gradient(10px 15px, + blue, yellow)"></div> + <br> + + <div style="background: -moz-linear-gradient(-10px -15px, + blue, yellow)"></div> + <div style="background: -moz-linear-gradient(-100px 10px, + blue, yellow)"></div> + <div style="background: -moz-linear-gradient(10px -100px, + blue, yellow)"></div> + <br> + + <div style="background: -moz-linear-gradient(center top, + blue, yellow)"></div> + <div style="background: -moz-linear-gradient(left center, + blue, yellow)"></div> + <div style="background: -moz-linear-gradient(right center, + blue, yellow)"></div> + <br> + + <div style="background: -moz-linear-gradient(right top, + blue, yellow)"></div> + <div style="background: -moz-linear-gradient(left top, + blue, yellow)"></div> + <div style="background: -moz-linear-gradient(left bottom, + blue, yellow)"></div> + <br> + +</body> +</html> diff --git a/layout/reftests/webkit-gradient/webkit-gradient-approx-linear-1.html b/layout/reftests/webkit-gradient/webkit-gradient-approx-linear-1.html new file mode 100644 index 000000000..e1642b92a --- /dev/null +++ b/layout/reftests/webkit-gradient/webkit-gradient-approx-linear-1.html @@ -0,0 +1,73 @@ +<!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 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: 30px; + 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> + <!-- Start point and end point are the same: --> + <div style="background: -webkit-gradient(linear, left top, left top, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(linear, 40 40, 40 40, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(linear, center center, center center, + from(blue), to(yellow))"></div> + <br> + + <!-- Gradient starting and/or ending somewhere in the middle (not an edge): --> + <div style="background: -webkit-gradient(linear, center center, right top, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(linear, left top, center center, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(linear, 10 15, 5 20, + from(blue), to(yellow))"></div> + <br> + + <!-- Gradient starting and/or ending somewhere arbitrary outside: --> + <div style="background: -webkit-gradient(linear, -10 -15, left top, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(linear, -100 10, 20 30, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(linear, 10 -100, 100 10, + from(blue), to(yellow))"></div> + <br> + + <!-- Slanted gradient between sides/corners: --> + <div style="background: -webkit-gradient(linear, center top, left center, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(linear, left center, center top, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(linear, right center, center top, + from(blue), to(yellow))"></div> + <br> + + <div style="background: -webkit-gradient(linear, right top, center bottom, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(linear, left top, right bottom, + from(blue), to(yellow))"></div> + <div style="background: -webkit-gradient(linear, left bottom, right top, + from(blue), to(yellow))"></div> + <br> + +</body> +</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 000000000..274a46620 --- /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 000000000..4f0760560 --- /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 000000000..d86354584 --- /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 000000000..1a6fe1650 --- /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 000000000..ae03d777a --- /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 000000000..29ae3a786 --- /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 000000000..b1b54372c --- /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 000000000..36b4c9718 --- /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 000000000..95defb508 --- /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 000000000..bb1c67aea --- /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 000000000..24e32492f --- /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 000000000..08bbc0789 --- /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 000000000..c82e3dbb5 --- /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 000000000..56e9cbb41 --- /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> |