html2canvas/tests/reftests/text/shadow.html
2017-08-09 11:52:42 +08:00

61 lines
1.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Text shadow tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../test.js"></script>
<style>
.shadow1 span{
text-shadow: 1px 1px 3px #888;
}
.shadow1 strong {
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
}
.shadow2 {
font-size: 48px;
}
.shadow2 span{
color: transparent;
text-shadow: 0 0 5px #00f, 2px 2px 0 #f00;
}
.shadow2 strong {
color: rgba(0, 255, 0, 0.5);
text-shadow: 0 0 5px #00f, 2px 2px 0 #f00;
text-decoration: underline;
}
.white-text-with-blue-shadow {
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
font: 1.5em Georgia, serif;
}
.red-text-shadow {
text-shadow: 0 -2px;
}
body {
font-family: Arial;
}
</style>
</head>
<body>
<div class="shadow1">
Some text <span> followed by text with shadow </span> followed by more text without shadow.
<strong>Multi text shadow</strong> and some more text without shadow
</div>
<div class="shadow2">
<span>testing with transparent</span>
<strong>testing with low opacity</strong>
</div>
<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
</body>
</html>