Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-09 23:45:35 +01:00
Code Issues Projects Releases Packages Wiki Activity

gfx: Implement box-shadow per CSS-BACKGROUNDS.

Browse source
This commit is contained in:
Patrick Walton 2014-11-07 14:27:08 -08:00
parent 1bc2c8a639
commit 3ba0abd8ff
21 changed files with 766 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

7
tests/ref/basic.list
View file

@ -200,3 +200,10 @@ fragment=top != ../html/acid2.html acid2_ref.html
== text_indent_a.html text_indent_ref.html
== word_spacing_a.html word_spacing_ref.html
== overflow_wrap_a.html overflow_wrap_ref.html
!= box_shadow_blur_a.html box_shadow_blur_ref.html
== box_shadow_border_box_a.html box_shadow_border_box_ref.html
== box_shadow_default_color_a.html box_shadow_default_color_ref.html
== box_shadow_paint_order_a.html box_shadow_paint_order_ref.html
== box_shadow_spread_a.html box_shadow_spread_ref.html
== box_shadow_inset_a.html box_shadow_inset_ref.html
== box_shadow_inset_parsing_a.html box_shadow_inset_parsing_ref.html

18
tests/ref/box_shadow_blur_a.html Normal file
View file

@ -0,0 +1,18 @@
<head>
<!-- Tests that box-shadow blur does something. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
border: solid black 1px;
box-shadow: 10px 10px 5px 0px;
}
</style>
</head>
<body>
<section></section>
</body>

18
tests/ref/box_shadow_blur_ref.html Normal file
View file

@ -0,0 +1,18 @@
<head>
<!-- Tests that box-shadow blur does something. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
border: solid black 1px;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<section></section>
</body>

19
tests/ref/box_shadow_border_box_a.html Normal file
View file

@ -0,0 +1,19 @@
<head>
<!-- Tests that the entire border-box is shadowed, not just the content box. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
border-left: solid green 10px;
border-right: solid green 10px;
box-shadow: 20px 10px;
}
</style>
</head>
<body>
<section></section>
</body>

30
tests/ref/box_shadow_border_box_ref.html Normal file
View file

@ -0,0 +1,30 @@
<head>
<!-- Tests that the entire border-box is shadowed, not just the content box. -->
<style>
section {
position: absolute;
}
#a {
width: 120px;
height: 100px;
top: 110px;
left: 120px;
background: black;
}
#b {
width: 100px;
height: 100px;
top: 100px;
left: 100px;
border-left: solid green 10px;
border-right: solid green 10px;
background: white;
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
</body>

19
tests/ref/box_shadow_default_color_a.html Normal file
View file

@ -0,0 +1,19 @@
<head>
<!-- Tests that the box-shadow color is correct if unspecified. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
border: solid black 1px;
color: blue;
box-shadow: 30px 10px;
}
</style>
</head>
<body>
<section></section>
</body>

18
tests/ref/box_shadow_default_color_ref.html Normal file
View file

@ -0,0 +1,18 @@
<head>
<!-- Tests that the box-shadow color is correct if unspecified. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
border: solid black 1px;
box-shadow: 30px 10px blue;
}
</style>
</head>
<body>
<section></section>
</body>

18
tests/ref/box_shadow_inset_a.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<head>
<!-- Tests that box-shadow inset works. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
box-shadow: inset 50px 10px gold;
}
</style>
</head>
<body>
<section></section>
</body>

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

@ -0,0 +1,20 @@
<!DOCTYPE html>
<head>
<!-- Tests that box-shadow inset parsing quirks work properly. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
border: solid black 1px;
box-shadow: inset 0 0 1em gold;
}
</style>
</head>
<body>
<section></section>
</body>

21
tests/ref/box_shadow_inset_parsing_ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<head>
<!-- Tests that box-shadow inset parsing quirks work properly. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
border: solid black 1px;
box-shadow: 0 0 1em gold inset;
}
</style>
</head>
<body>
<section></section>
</body>

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

@ -0,0 +1,28 @@
<!DOCTYPE html>
<head>
<!-- Tests that box-shadow inset works. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: gold;
}
nav {
display: block;
position: absolute;
width: 50px;
height: 90px;
background: white;
left: 50px;
top: 10px;
}
</style>
</head>
<body>
<section><nav></nav></section>
</body>

16
tests/ref/box_shadow_paint_order_a.html Normal file
View file

@ -0,0 +1,16 @@
<head>
<!-- Tests paint order of multiple box shadows. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
box-shadow: -25px -25px purple, -50px -50px turquoise;
}
</style>
</head>
<body>
<section></section>
</body>

30
tests/ref/box_shadow_paint_order_ref.html Normal file
View file

@ -0,0 +1,30 @@
<head>
<!-- Tests paint order of multiple box shadows. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
}
#a {
top: 50px;
left: 50px;
background: turquoise;
}
#b {
top: 75px;
left: 75px;
background: purple;
}
#c {
top: 100px;
left: 100px;
background: white;
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
<section id=c></section>
</body>

17
tests/ref/box_shadow_spread_a.html Normal file
View file

@ -0,0 +1,17 @@
<head>
<!-- Tests that spread works. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
box-shadow: 0 0 0 25px;
}
</style>
</head>
<body>
<section></section>
</body>

18
tests/ref/box_shadow_spread_ref.html Normal file
View file

@ -0,0 +1,18 @@
<head>
<!-- Tests that spread works. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 75px;
left: 75px;
border: solid black 25px;
}
</style>
</head>
<body>
<section></section>
</body>