Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 14:10:11 +01:00
Code Issues Projects Releases Packages Wiki Activity

auto merge of #3696 : pcwalton/servo/gradients, r=SimonSapin

Browse source 
This implements a subset of the CSS `linear-gradient` property per the
CSS-IMAGES specification:

    http://dev.w3.org/csswg/css-images-3/

The full syntax is parsed, but only the beginning and end color stops
are used, and gradients are clamped to the nearest 90 degrees. It should
not be architecturally difficult to add the remaining pieces, but in the
interests of bounding the size of this patch that work has been left to
follow-ups.

Improves GitHub.

r? @glennw
This commit is contained in:
bors-servo 2014-11-06 10:00:42 -07:00
commit ed22c9b35b
17 changed files with 865 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

5
tests/ref/basic.list
View file

@ -179,3 +179,8 @@ fragment=top != ../html/acid2.html acid2_ref.html
== box_sizing_sanity_check_a.html box_sizing_sanity_check_ref.html
== inline_block_overflow_hidden_a.html inline_block_overflow_hidden_ref.html
== issue-1324.html issue-1324-ref.html
== linear_gradients_parsing_a.html linear_gradients_parsing_ref.html
!= linear_gradients_smoke_a.html linear_gradients_smoke_ref.html
== linear_gradients_reverse_a.html linear_gradients_reverse_ref.html
!= linear_gradients_corners_a.html linear_gradients_corners_ref.html
== linear_gradients_lengths_a.html linear_gradients_lengths_ref.html

20
tests/ref/linear_gradients_corners_a.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that corners are not handled incorrectly. -->
<style>
section {
display: block;
width: 300px;
height: 150px;
border: solid black 1px;
}
#a {
background: linear-gradient(to top right, white, black);
}
</style>
</head>
<body>
<section id=a></section>
</body>
</html>

20
tests/ref/linear_gradients_corners_ref.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that corners are not handled incorrectly. -->
<style>
section {
display: block;
width: 300px;
height: 150px;
border: solid black 1px;
}
#a {
background: linear-gradient(45deg, white, black);
}
</style>
</head>
<body>
<section id=a></section>
</body>
</html>

22
tests/ref/linear_gradients_lengths_a.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that linear gradient lengths work. -->
<style>
section {
display: block;
width: 100px;
height: 100px;
border: solid black 1px;
}
#a {
background: linear-gradient(to right, white, white 30px, black 30px, black);
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
</body>
</html>

22
tests/ref/linear_gradients_lengths_ref.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that linear gradient lengths work. -->
<style>
section {
display: block;
width: 100px;
height: 100px;
border: solid black 1px;
}
#a {
background: linear-gradient(to right, white, white 30%, black 30%, black);
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
</body>
</html>

28
tests/ref/linear_gradients_parsing_a.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that parsing linear gradients works. -->
<style>
section {
display: block;
width: 100px;
height: 100px;
border: solid black 1px;
}
#a {
background: linear-gradient(to left, red, red);
}
#b {
background: linear-gradient(#abacab, #abacab);
}
#c {
background: linear-gradient(90deg, violet, violet 1em, violet 2ex, violet 50%, blue 50%, blue, blue);
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
<section id=c></section>
</body>
</html>

43
tests/ref/linear_gradients_parsing_ref.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that parsing linear gradients works. -->
<style>
section {
display: block;
width: 100px;
height: 100px;
border: solid black 1px;
position: relative;
}
#a {
background: red;
}
#b {
background: #abacab;
}
nav {
display: block;
width: 50%;
height: 100%;
position: absolute;
}
#ca {
background: violet;
left: 0;
}
#cb {
background: blue;
right: 0;
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
<section id=c>
<nav id=ca></nav>
<nav id=cb></nav>
</section>
</body>
</html>

32
tests/ref/linear_gradients_reverse_a.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that reversed linear gradients are equivalent. -->
<style>
section {
display: block;
width: 100px;
height: 100px;
border: solid black 1px;
}
#a {
background: linear-gradient(to bottom, red, red 50%, green 50%, green);
}
#b {
background: linear-gradient(90deg, black, white);
}
#c {
background: linear-gradient(45deg, yellow, yellow 50%, purple 50%, purple);
}
#d {
background: linear-gradient(to bottom right, lime, lime 50%, pink 50%, pink);
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
<section id=c></section>
<section id=d></section>
</body>
</html>

33
tests/ref/linear_gradients_reverse_ref.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that reversed linear gradients are equivalent. -->
<style>
nav {
display: block;
width: 100px;
height: 100px;
border: solid black 1px;
}
#a {
background: linear-gradient(0deg, green, #008000 50%, red 50%, red);
}
#b {
background: linear-gradient(to left, #ffffff, black);
}
#c {
background: linear-gradient(225deg, purple, purple 50%, yellow 50%, yellow);
}
#d {
background: linear-gradient(315deg, pink, pink 50%, lime 50%, lime);
}
</style>
</head>
<body>
<nav id=a></nav>
<nav id=b></nav>
<nav id=c></nav>
<nav id=d></nav>
</body>
</html>

26
tests/ref/linear_gradients_smoke_a.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that linear gradients render *something*. -->
<style>
section {
display: block;
width: 300px;
height: 150px;
border: solid black 1px;
}
#a {
background: linear-gradient(to bottom, white, black);
}
#b {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
</body>
</html>

20
tests/ref/linear_gradients_smoke_ref.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that linear gradients render *something*. -->
<style>
section {
display: block;
width: 300px;
height: 150px;
border: solid black 1px;
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
</body>
</html>