Skip to content

Commit 9553ab5

Browse files
niklasvhniklasvh
committed
text-decoration tests
1 parent 78871e7 commit 9553ab5

3 files changed

Lines changed: 82 additions & 270 deletions

File tree

‎tests/text-linethrough.html‎

Lines changed: 28 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,31 @@
66
<!DOCTYPE html>
77
<html>
88
<head>
9-
<title>Text tests</title>
9+
<title>Text-decoration:line-through tests</title>
1010
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
1111
<link href="#" type="text/css" rel="stylesheet">
1212

1313
<script type="text/javascript" src="../external/jquery-1.6.2.min.js"></script>
1414
<script type="text/javascript" src="../build/html2canvas.js"></script>
1515
<script type="text/javascript" src="../build/jquery.plugin.html2canvas.js"></script>
1616
<script type="text/javascript">
17-
$(window).ready(function() {
18-
$('body').html2canvas();
17+
$(window).ready(function() {
18+
$('body').empty();
19+
$.each(['arial','verdana','tahoma','courier new'],function(i,e){
20+
21+
var div = $('<div />').css('font-family',e).appendTo('body');
22+
23+
for(var i=0;i<=20;i++){
24+
$('<div />').text('Testing texts').css('margin-top',1).css('border','1px solid black').css('font-size',(16+i*6)).appendTo(div);
25+
}
26+
27+
});
28+
29+
30+
window.setTimeout(function(){
31+
$('body').html2canvas();
32+
},100);
33+
1934
});
2035
</script>
2136

@@ -30,100 +45,23 @@
3045
.large{
3146
font-size:24px;
3247
}
48+
3349
div{
34-
float:left;
50+
text-decoration:line-through;
51+
3552
}
53+
54+
.lineheight{
55+
line-height:40px;
56+
}
57+
3658
h2 {
3759
clear:both;
3860
}
3961
</style>
4062

4163
</head>
42-
<body> <h1>&lt;h1&gt; text-decoration</h1>
43-
<div style="font-family:Arial;">
44-
<h2>Arial</h2>
45-
<ol class="small">
46-
<li style="text-decoration:none;">text-decoration:none;</li>
47-
<li style="text-decoration:underline;">text-decoration:underline;</li>
48-
<li style="text-decoration:overline;">text-decoration:overline;</li>
49-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
50-
</ol>
51-
52-
<ol class="medium">
53-
<li style="text-decoration:none;">text-decoration:none;</li>
54-
<li style="text-decoration:underline;">text-decoration:underline;</li>
55-
<li style="text-decoration:overline;">text-decoration:overline;</li>
56-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
57-
</ol>
58-
<ol class="large">
59-
<li style="text-decoration:none;">text-decoration:none;</li>
60-
<li style="text-decoration:underline;">text-decoration:underline;</li>
61-
<li style="text-decoration:overline;">text-decoration:overline;</li>
62-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
63-
</ol>
64-
</div>
65-
66-
<div style="font-family:Verdana;">
67-
<h2>Verdana</h2>
68-
<ol class="small">
69-
<li style="text-decoration:none;">text-decoration:none;</li>
70-
<li style="text-decoration:underline;">text-decoration:underline;</li>
71-
<li style="text-decoration:overline;">text-decoration:overline;</li>
72-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
73-
</ol>
74-
75-
<ol class="medium">
76-
<li style="text-decoration:none;">text-decoration:none;</li>
77-
<li style="text-decoration:underline;">text-decoration:underline;</li>
78-
<li style="text-decoration:overline;">text-decoration:overline;</li>
79-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
80-
</ol>
81-
<ol class="large">
82-
<li style="text-decoration:none;">text-decoration:none;</li>
83-
<li style="text-decoration:underline;">text-decoration:underline;</li>
84-
<li style="text-decoration:overline;">text-decoration:overline;</li>
85-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
86-
</ol>
87-
</div>
88-
89-
<div style="font-family:Tahoma;">
90-
<h2>Tahoma</h2>
91-
<ol class="small">
92-
<li style="text-decoration:none;">text-decoration:none;</li>
93-
<li style="text-decoration:underline;">text-decoration:underline;</li>
94-
<li style="text-decoration:overline;">text-decoration:overline;</li>
95-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
96-
</ol>
97-
98-
<ol class="medium">
99-
<li style="text-decoration:none;">text-decoration:none;</li>
100-
<li style="text-decoration:underline;">text-decoration:underline;</li>
101-
<li style="text-decoration:overline;">text-decoration:overline;</li>
102-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
103-
</ol>
104-
<ol class="large">
105-
<li style="text-decoration:none;">text-decoration:none;</li>
106-
<li style="text-decoration:underline;">text-decoration:underline;</li>
107-
<li style="text-decoration:overline;">text-decoration:overline;</li>
108-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
109-
</ol>
110-
</div>
111-
112-
<h2>&lt;h2&gt; text-transform</h2>
113-
<ul>
114-
<li style="text-transform:none;">text-transform:none;</li>
115-
<li style="text-transform:capitalize;">text-transform:capitalize; (including foreign characters such as Öaäå)</li>
116-
<li style="text-transform:uppercase;">text-transform:uppercase;</li>
117-
<li style="text-transform:lowercase;">text-transform:lowercase;</li>
118-
</ul>
119-
<h3>&lt;h3&gt; misc text alignments</h3>
120-
<ul>
121-
<li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always be correct)</li>
122-
<li style="line-height:35px;">line-height:35px; <br />(same goes for line-height)</li>
123-
<li style="letter-spacing:5px;">letter-spacing:5px;</li>
124-
<li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
125-
<li style="font-variant:small-caps;">font-variant:small-caps; (not yet supported)</li>
126-
</ul>
127-
64+
<body>
65+
Creating content through JavaScript
12866
</body>
12967
</html>

‎tests/text-underline-lineheight.html‎

Lines changed: 26 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,31 @@
66
<!DOCTYPE html>
77
<html>
88
<head>
9-
<title>Text tests</title>
9+
<title>Text-decoration:underline tests</title>
1010
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
1111
<link href="#" type="text/css" rel="stylesheet">
1212

1313
<script type="text/javascript" src="../external/jquery-1.6.2.min.js"></script>
1414
<script type="text/javascript" src="../build/html2canvas.js"></script>
1515
<script type="text/javascript" src="../build/jquery.plugin.html2canvas.js"></script>
1616
<script type="text/javascript">
17-
$(window).ready(function() {
18-
$('body').html2canvas();
17+
$(window).ready(function() {
18+
$('body').empty();
19+
$.each(['arial','verdana','tahoma','courier new'],function(i,e){
20+
21+
var div = $('<div />').css('font-family',e).appendTo('body');
22+
23+
for(var i=0;i<=20;i++){
24+
$('<div />').text('Testing texts').css('margin-top',1).css('border','1px solid black').css('font-size',(16+i*6)).appendTo(div);
25+
}
26+
27+
});
28+
29+
30+
31+
window.setTimeout(function(){
32+
$('body').html2canvas();
33+
},100);
1934
});
2035
</script>
2136

@@ -30,100 +45,21 @@
3045
.large{
3146
font-size:24px;
3247
}
48+
3349
div{
34-
float:left;
50+
text-decoration:underline;
51+
line-height:40px;
3552
}
53+
54+
55+
3656
h2 {
3757
clear:both;
3858
}
3959
</style>
4060

4161
</head>
42-
<body> <h1>&lt;h1&gt; text-decoration</h1>
43-
<div style="font-family:Arial;">
44-
<h2>Arial</h2>
45-
<ol class="small">
46-
<li style="text-decoration:none;">text-decoration:none;</li>
47-
<li style="text-decoration:underline;">text-decoration:underline;</li>
48-
<li style="text-decoration:overline;">text-decoration:overline;</li>
49-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
50-
</ol>
51-
52-
<ol class="medium">
53-
<li style="text-decoration:none;">text-decoration:none;</li>
54-
<li style="text-decoration:underline;">text-decoration:underline;</li>
55-
<li style="text-decoration:overline;">text-decoration:overline;</li>
56-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
57-
</ol>
58-
<ol class="large">
59-
<li style="text-decoration:none;">text-decoration:none;</li>
60-
<li style="text-decoration:underline;">text-decoration:underline;</li>
61-
<li style="text-decoration:overline;">text-decoration:overline;</li>
62-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
63-
</ol>
64-
</div>
65-
66-
<div style="font-family:Verdana;">
67-
<h2>Verdana</h2>
68-
<ol class="small">
69-
<li style="text-decoration:none;">text-decoration:none;</li>
70-
<li style="text-decoration:underline;">text-decoration:underline;</li>
71-
<li style="text-decoration:overline;">text-decoration:overline;</li>
72-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
73-
</ol>
74-
75-
<ol class="medium">
76-
<li style="text-decoration:none;">text-decoration:none;</li>
77-
<li style="text-decoration:underline;">text-decoration:underline;</li>
78-
<li style="text-decoration:overline;">text-decoration:overline;</li>
79-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
80-
</ol>
81-
<ol class="large">
82-
<li style="text-decoration:none;">text-decoration:none;</li>
83-
<li style="text-decoration:underline;">text-decoration:underline;</li>
84-
<li style="text-decoration:overline;">text-decoration:overline;</li>
85-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
86-
</ol>
87-
</div>
88-
89-
<div style="font-family:Tahoma;">
90-
<h2>Tahoma</h2>
91-
<ol class="small">
92-
<li style="text-decoration:none;">text-decoration:none;</li>
93-
<li style="text-decoration:underline;">text-decoration:underline;</li>
94-
<li style="text-decoration:overline;">text-decoration:overline;</li>
95-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
96-
</ol>
97-
98-
<ol class="medium">
99-
<li style="text-decoration:none;">text-decoration:none;</li>
100-
<li style="text-decoration:underline;">text-decoration:underline;</li>
101-
<li style="text-decoration:overline;">text-decoration:overline;</li>
102-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
103-
</ol>
104-
<ol class="large">
105-
<li style="text-decoration:none;">text-decoration:none;</li>
106-
<li style="text-decoration:underline;">text-decoration:underline;</li>
107-
<li style="text-decoration:overline;">text-decoration:overline;</li>
108-
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
109-
</ol>
110-
</div>
111-
112-
<h2>&lt;h2&gt; text-transform</h2>
113-
<ul>
114-
<li style="text-transform:none;">text-transform:none;</li>
115-
<li style="text-transform:capitalize;">text-transform:capitalize; (including foreign characters such as Öaäå)</li>
116-
<li style="text-transform:uppercase;">text-transform:uppercase;</li>
117-
<li style="text-transform:lowercase;">text-transform:lowercase;</li>
118-
</ul>
119-
<h3>&lt;h3&gt; misc text alignments</h3>
120-
<ul>
121-
<li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always be correct)</li>
122-
<li style="line-height:35px;">line-height:35px; <br />(same goes for line-height)</li>
123-
<li style="letter-spacing:5px;">letter-spacing:5px;</li>
124-
<li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
125-
<li style="font-variant:small-caps;">font-variant:small-caps; (not yet supported)</li>
126-
</ul>
127-
62+
<body>
63+
Creating content through JavaScript
12864
</body>
12965
</html>

0 commit comments

Comments
 (0)