html2canvas/tests/reftests/text/text.html

138 lines
6.0 KiB
HTML
Raw Normal View History

2011-07-16 05:13:38 +04:00
<!DOCTYPE html>
<html>
<head>
<title>Text tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
2012-12-28 01:53:27 +04:00
<script type="text/javascript" src="../../test.js"></script>
2011-07-16 05:13:38 +04:00
<style>
2017-08-10 18:26:22 +03:00
body {
font-family: Arial;
}
2011-07-16 05:13:38 +04:00
.small{
font-size:14px;
2017-08-10 18:26:22 +03:00
line-height: 1vw;
2011-07-16 05:13:38 +04:00
}
.medium{
font-size:18px;
2017-08-10 18:26:22 +03:00
line-height: 2vw;
2011-07-16 05:13:38 +04:00
}
.large{
font-size:24px;
2017-08-10 18:26:22 +03:00
line-height: 3vw;
2011-07-16 05:13:38 +04:00
}
div{
float:left;
}
h2 {
clear:both;
}
2017-08-10 18:26:22 +03:00
h1 {
font-size: 36px;
line-height: 4vw;
}
h2 {
font-size: 24px;
line-height: 3vw;
}
h3 {
font-size: 16px;
line-height: 2vw;
}
2011-07-16 05:13:38 +04:00
</style>
</head>
<body> <h1>&lt;h1&gt; text-decoration</h1>
<div style="font-family:Arial;">
<h2>Arial</h2>
<ol class="small">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
2012-12-28 01:53:27 +04:00
</ol>
2011-07-16 05:13:38 +04:00
<ol class="medium">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
2012-12-28 01:53:27 +04:00
</ol>
2011-07-16 05:13:38 +04:00
<ol class="large">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
2012-12-28 01:53:27 +04:00
</ol>
2011-07-16 05:13:38 +04:00
</div>
<div style="font-family:Verdana;">
2011-07-16 20:59:15 +04:00
<h2>Verdana</h2>
2011-07-16 05:13:38 +04:00
<ol class="small">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
2012-12-28 01:53:27 +04:00
</ol>
2011-07-16 05:13:38 +04:00
<ol class="medium">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
2012-12-28 01:53:27 +04:00
</ol>
2011-07-16 05:13:38 +04:00
<ol class="large">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
2012-12-28 01:53:27 +04:00
</ol>
2011-07-16 05:13:38 +04:00
</div>
<div style="font-family:Tahoma;">
2011-07-16 20:59:15 +04:00
<h2>Tahoma</h2>
2011-07-16 05:13:38 +04:00
<ol class="small">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
2012-12-28 01:53:27 +04:00
</ol>
2011-07-16 05:13:38 +04:00
<ol class="medium">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
2012-12-28 01:53:27 +04:00
</ol>
2011-07-16 05:13:38 +04:00
<ol class="large">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
2012-12-28 01:53:27 +04:00
</ol>
2011-07-16 05:13:38 +04:00
</div>
<h2>&lt;h2&gt; text-transform</h2>
<ul>
<li style="text-transform:none;">text-transform:none;</li>
2012-12-30 06:15:51 +04:00
<li style="text-transform:capitalize;">text-transform: capitalize; (including foreign characters such as Öaäå)</li>
2011-07-16 05:13:38 +04:00
<li style="text-transform:uppercase;">text-transform:uppercase;</li>
<li style="text-transform:lowercase;">text-transform:lowercase;</li>
</ul>
<h3>&lt;h3&gt; misc text alignments</h3>
<ul>
<li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always be correct)</li>
<li style="line-height:35px;">line-height:35px; <br />(same goes for line-height)</li>
<li style="letter-spacing:5px;">letter-spacing:5px;</li>
<li style="letter-spacing:0.9px;">letter-spacing:0.9px;</li>
2011-07-16 05:13:38 +04:00
<li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
2011-07-18 00:52:11 +04:00
<li style="font-variant:small-caps;">font-variant:small-caps; </li>
2011-07-16 05:13:38 +04:00
</ul>
2011-07-16 20:59:15 +04:00
<div style="font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace">npm install --save html2canvas</div>
2011-07-16 05:13:38 +04:00
</body>
</html>