From 9553ab54fde803522278b190efdb9bb375bcac7b Mon Sep 17 00:00:00 2001
From: Niklas von Hertzen <niklasvh@gmail.com>
Date: Sat, 16 Jul 2011 22:34:11 +0300
Subject: [PATCH] text-decoration tests

---
 tests/text-linethrough.html          | 118 +++++++--------------------
 tests/text-underline-lineheight.html | 116 ++++++--------------------
 tests/text-underline.html            | 118 +++++++--------------------
 3 files changed, 82 insertions(+), 270 deletions(-)
diff --git a/tests/text-linethrough.html b/tests/text-linethrough.html
index 119c233..9703048 100644
--- a/tests/text-linethrough.html
+++ b/tests/text-linethrough.html
@@ -6,7 +6,7 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>Text tests</title>
+        <title>Text-decoration:line-through tests</title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <link href="#" type="text/css" rel="stylesheet"> 
 
@@ -14,8 +14,23 @@
         <script type="text/javascript" src="../build/html2canvas.js"></script>
         <script type="text/javascript" src="../build/jquery.plugin.html2canvas.js"></script>
         <script type="text/javascript">
-            $(window).ready(function() {       
-                $('body').html2canvas();
+            $(window).ready(function() {
+                $('body').empty();
+                $.each(['arial','verdana','tahoma','courier new'],function(i,e){
+                    
+                    var div = $('<div />').css('font-family',e).appendTo('body');
+                    
+                   for(var i=0;i<=20;i++){
+                       $('<div />').text('Testing texts').css('margin-top',1).css('border','1px solid black').css('font-size',(16+i*6)).appendTo(div);
+                   } 
+                    
+                });
+                
+            
+                window.setTimeout(function(){
+                    $('body').html2canvas();
+                },100);
+                
             });
         </script>
 
@@ -30,100 +45,23 @@
             .large{
                 font-size:24px;
             }
+            
             div{
-                float:left;
+                text-decoration:line-through;
+                
             }
+            
+            .lineheight{
+                line-height:40px;
+            }
+           
             h2 {
                 clear:both;
             }
         </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>
-            </ol>  
-
-            <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>
-            </ol>  
-            <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>
-            </ol>  
-        </div>
-
-        <div style="font-family:Verdana;">
-            <h2>Verdana</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>
-            </ol>  
-
-            <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>
-            </ol>  
-            <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>
-            </ol>  
-        </div>
-
-        <div style="font-family:Tahoma;">
-            <h2>Tahoma</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>
-            </ol>  
-
-            <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>
-            </ol>  
-            <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>
-            </ol>  
-        </div>
-
-        <h2>&lt;h2&gt; text-transform</h2>
-        <ul>
-            <li style="text-transform:none;">text-transform:none;</li>
-            <li style="text-transform:capitalize;">text-transform:capitalize; (including foreign characters such as Öaäå)</li>
-            <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="text-align:right;width:300px;">text-align:right;width:300px;</li>
-            <li style="font-variant:small-caps;">font-variant:small-caps; (not yet supported)</li>
-        </ul>
-
+    <body>          
+        Creating content through JavaScript
     </body>
 </html>
diff --git a/tests/text-underline-lineheight.html b/tests/text-underline-lineheight.html
index 119c233..4a4445c 100644
--- a/tests/text-underline-lineheight.html
+++ b/tests/text-underline-lineheight.html
@@ -6,7 +6,7 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>Text tests</title>
+        <title>Text-decoration:underline tests</title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <link href="#" type="text/css" rel="stylesheet"> 
 
@@ -14,8 +14,23 @@
         <script type="text/javascript" src="../build/html2canvas.js"></script>
         <script type="text/javascript" src="../build/jquery.plugin.html2canvas.js"></script>
         <script type="text/javascript">
-            $(window).ready(function() {       
-                $('body').html2canvas();
+            $(window).ready(function() {
+                $('body').empty();
+                $.each(['arial','verdana','tahoma','courier new'],function(i,e){
+                    
+                    var div = $('<div />').css('font-family',e).appendTo('body');
+                    
+                    for(var i=0;i<=20;i++){
+                        $('<div />').text('Testing texts').css('margin-top',1).css('border','1px solid black').css('font-size',(16+i*6)).appendTo(div);
+                    } 
+                    
+                });
+                
+            
+                
+                window.setTimeout(function(){
+                    $('body').html2canvas();
+                },100);
             });
         </script>
 
@@ -30,100 +45,21 @@
             .large{
                 font-size:24px;
             }
+
             div{
-                float:left;
+                text-decoration:underline;
+                line-height:40px;
             }
+
+
+
             h2 {
                 clear:both;
             }
         </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>
-            </ol>  
-
-            <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>
-            </ol>  
-            <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>
-            </ol>  
-        </div>
-
-        <div style="font-family:Verdana;">
-            <h2>Verdana</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>
-            </ol>  
-
-            <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>
-            </ol>  
-            <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>
-            </ol>  
-        </div>
-
-        <div style="font-family:Tahoma;">
-            <h2>Tahoma</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>
-            </ol>  
-
-            <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>
-            </ol>  
-            <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>
-            </ol>  
-        </div>
-
-        <h2>&lt;h2&gt; text-transform</h2>
-        <ul>
-            <li style="text-transform:none;">text-transform:none;</li>
-            <li style="text-transform:capitalize;">text-transform:capitalize; (including foreign characters such as Öaäå)</li>
-            <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="text-align:right;width:300px;">text-align:right;width:300px;</li>
-            <li style="font-variant:small-caps;">font-variant:small-caps; (not yet supported)</li>
-        </ul>
-
+    <body>          
+        Creating content through JavaScript
     </body>
 </html>
diff --git a/tests/text-underline.html b/tests/text-underline.html
index 119c233..ec2c43e 100644
--- a/tests/text-underline.html
+++ b/tests/text-underline.html
@@ -6,7 +6,7 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>Text tests</title>
+        <title>Text-decoration:underline tests</title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <link href="#" type="text/css" rel="stylesheet"> 
 
@@ -14,8 +14,23 @@
         <script type="text/javascript" src="../build/html2canvas.js"></script>
         <script type="text/javascript" src="../build/jquery.plugin.html2canvas.js"></script>
         <script type="text/javascript">
-            $(window).ready(function() {       
-                $('body').html2canvas();
+            $(window).ready(function() {
+                $('body').empty();
+                $.each(['arial','verdana','tahoma','courier new'],function(i,e){
+                    
+                    var div = $('<div />').css('font-family',e).appendTo('body');
+                    
+                    for(var i=0;i<=20;i++){
+                        $('<div />').text('Testing texts').css('margin-top',1).css('border','1px solid black').css('font-size',(16+i*6)).appendTo(div);
+                    } 
+                    
+                });
+                
+            
+                
+                window.setTimeout(function(){
+                    $('body').html2canvas();
+                },100);
             });
         </script>
 
@@ -30,100 +45,23 @@
             .large{
                 font-size:24px;
             }
+
             div{
-                float:left;
+                text-decoration:underline;
+
             }
+
+            .lineheight{
+                line-height:40px;
+            }
+
             h2 {
                 clear:both;
             }
         </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>
-            </ol>  
-
-            <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>
-            </ol>  
-            <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>
-            </ol>  
-        </div>
-
-        <div style="font-family:Verdana;">
-            <h2>Verdana</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>
-            </ol>  
-
-            <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>
-            </ol>  
-            <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>
-            </ol>  
-        </div>
-
-        <div style="font-family:Tahoma;">
-            <h2>Tahoma</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>
-            </ol>  
-
-            <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>
-            </ol>  
-            <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>
-            </ol>  
-        </div>
-
-        <h2>&lt;h2&gt; text-transform</h2>
-        <ul>
-            <li style="text-transform:none;">text-transform:none;</li>
-            <li style="text-transform:capitalize;">text-transform:capitalize; (including foreign characters such as Öaäå)</li>
-            <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="text-align:right;width:300px;">text-align:right;width:300px;</li>
-            <li style="font-variant:small-caps;">font-variant:small-caps; (not yet supported)</li>
-        </ul>
-
+    <body>          
+        Creating content through JavaScript
     </body>
 </html>
