зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1217643 part 0: Add reftests for -webkit-gradient() expressions. r=heycam
This commit is contained in:
Daniel Holbert
Родитель
a02a3f64d5
Коммит
d0e03b7083
|
|
@ -367,6 +367,9 @@ include ../xul/reftest/reftest.list
|
|||
# xul grid
|
||||
include ../xul/grid/reftests/reftest.list
|
||||
|
||||
# -webkit-gradient expressions
|
||||
include webkit-gradient/reftest.list
|
||||
|
||||
# writing-mode
|
||||
include writing-mode/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.)
|
||||
fails == webkit-gradient-approx-linear-1.html webkit-gradient-approx-linear-1-ref.html
|
||||
fails == webkit-gradient-approx-radial-1.html webkit-gradient-approx-radial-1-ref.html
|
||||
|
||||
# Tests for -webkit-gradient(linear, ...)
|
||||
fails == webkit-gradient-linear-1a.html webkit-gradient-linear-1-ref.html
|
||||
fails == webkit-gradient-linear-1b.html webkit-gradient-linear-1-ref.html
|
||||
fails == webkit-gradient-linear-1c.html webkit-gradient-linear-1-ref.html
|
||||
fails == webkit-gradient-linear-1d.html webkit-gradient-linear-1-ref.html
|
||||
fails == webkit-gradient-linear-2.html webkit-gradient-linear-2-ref.html
|
||||
|
||||
# Tests for -webkit-gradient(radial, ...)
|
||||
fails == webkit-gradient-radial-1a.html webkit-gradient-radial-1-ref.html
|
||||
fails == webkit-gradient-radial-1b.html webkit-gradient-radial-1-ref.html
|
||||
fails == webkit-gradient-radial-2.html webkit-gradient-radial-2-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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!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: -->
|
||||
<!-- XXXdholbert This piece of the testcase & reference case should just
|
||||
render like "background: yellow", but they render as a gradual
|
||||
yellow-to-blue gradient right now, as described in bug 1224761. When
|
||||
that's fixed, we can just give this div "background: yellow". -->
|
||||
<div style="background: linear-gradient(to right,
|
||||
blue 0%, yellow 0%)"></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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Загрузка…
Ссылка в новой задаче