Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-09-29 16:19:14 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Implement CSS linear gradients per the CSS-IMAGES specification.

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

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

Improves GitHub.
This commit is contained in:
Patrick Walton 2014-10-15 21:07:36 -07:00
parent 44fa9f9b18
commit 215c2a9d4c
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>