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

layout: Implement text-shadow per CSS-TEXT-DECORATION-3 § 4.

Browse source
This commit is contained in:
Patrick Walton 2014-12-18 12:57:58 -08:00
parent fed878710c
commit 09358b908d
19 changed files with 683 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

3
tests/ref/basic.list
View file

@ -253,3 +253,6 @@ fragment=top != ../html/acid2.html acid2_ref.html
== canvas_transform_a.html canvas_transform_ref.html
!= text_decoration_smoke_a.html text_decoration_smoke_ref.html
== hide_after_create.html hide_after_create_ref.html
== text_shadow_simple_a.html text_shadow_simple_ref.html
== text_shadow_decorations_a.html text_shadow_decorations_ref.html
== text_shadow_blur_a.html text_shadow_blur_ref.html

15
tests/ref/text_shadow_blur_a.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `text-shadow` mirrors `box-shadow` in the way that it blurs. -->
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
html, body {
margin: 0;
color: red;
text-shadow: blue 10px 10px 5px;
}
</style>
</head>
<body>X</body>
</html>

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

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `text-shadow` mirrors `box-shadow` in the way that it blurs. -->
<style>
html, body {
margin: 0;
}
section {
background: red;
width: 100px;
height: 100px;
box-shadow: blue 10px 10px 5px;
}
</style>
</head>
<body><section></section></body>
</html>

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

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `text-shadow` shadows decorations. -->
<style>
#a {
text-decoration: underline;
text-shadow: 6px 6px black;
color: red;
font-size: 96px;
position: absolute;
top: 0;
left: 0;
width: 300px;
}
</style>
</head>
<body>
<div id=a>Foo</div>
</body>
</html>

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

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `text-shadow` shadows decorations. -->
<style>
section {
text-decoration: underline;
font-size: 96px;
position: absolute;
width: 300px;
}
#a {
color: red;
top: 0;
left: 0;
}
#b {
color: black;
top: 6px;
left: 6px;
}
</style>
</head>
<body>
<section id=b>Foo</section>
<section id=a>Foo</section>
</body>
</html>

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

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that multiple `text-shadow`s paint in the right order. -->
<style>
#a {
text-shadow: 6px 6px black, 12px 12px blue;
color: red;
font-size: 96px;
position: absolute;
top: 100px;
left: 100px;
width: 300px;
}
</style>
</head>
<body>
<div id=a>Foo</div>
</body>
</html>

34
tests/ref/text_shadow_multiple_shadows_ref.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that multiple `text-shadow`s paint in the right order. -->
<style>
section {
position: absolute;
width: 300px;
font-size: 96px;
}
#a {
top: 100px;
left: 100px;
color: red;
}
#b {
top: 106px;
left: 106px;
color: black;
}
#c {
top: 112px;
left: 112px;
color: blue;
}
</style>
</head>
<body>
<section id=c>Foo</section>
<section id=b>Foo</section>
<section id=a>Foo</section>
</body>
</html>

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

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<!--
Tests that `text-shadow` works with multiple unblurred shadows in the right order with the
right offsets.
-->
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
section {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 500px;
color: green;
text-shadow: 20px 10px blue, 30px 40px red;
}
</style>
</head>
<body><section>X</section></body>
</html>

35
tests/ref/text_shadow_simple_ref.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<!--
Tests that `text-shadow` works with multiple unblurred shadows in the right order with the
right offsets.
-->
<style>
html, body {
margin: 0;
}
div {
width: 100px;
height: 100px;
position: absolute;
}
#c {
background: green;
left: 0;
top: 0;
}
#b {
background: blue;
left: 20px;
top: 10px;
}
#a {
background: red;
left: 30px;
top: 40px;
}
</style>
</head>
<body><div id=a></div><div id=b></div><div id=c></div></body>
</html>