From d82ce435316e7c423b62d03094e9e6045fd4f904 Mon Sep 17 00:00:00 2001
From: MoyuScript <i@moyu.moe>
Date: Sat, 16 Jul 2011 22:33:46 +0300
Subject: [PATCH] text-decoration tests
---
tests/text-linethrough.html | 129 +++++++++++++++++++++++++++
tests/text-underline-lineheight.html | 129 +++++++++++++++++++++++++++
tests/text-underline.html | 129 +++++++++++++++++++++++++++
3 files changed, 387 insertions(+)
create mode 100644 tests/text-linethrough.html
create mode 100644 tests/text-underline-lineheight.html
create mode 100644 tests/text-underline.html
diff --git a/tests/text-linethrough.html b/tests/text-linethrough.html
new file mode 100644
index 0000000..119c233
--- /dev/null
+++ b/tests/text-linethrough.html
@@ -0,0 +1,129 @@
+<!--
+* @author Niklas von Hertzen <niklas at hertzen.com>
+* @created 16.7.2011
+* @website http://hertzen.com
+-->
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Text tests</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <link href="#" type="text/css" rel="stylesheet">
+
+ <script type="text/javascript" src="../external/jquery-1.6.2.min.js"></script>
+ <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();
+ });
+ </script>
+
+ <style>
+ .small{
+ font-size:14px;
+ }
+
+ .medium{
+ font-size:18px;
+ }
+ .large{
+ font-size:24px;
+ }
+ div{
+ float:left;
+ }
+ h2 {
+ clear:both;
+ }
+ </style>
+
+ </head>
+ <body> <h1><h1> 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><h2> 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><h3> 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>
+</html>
diff --git a/tests/text-underline-lineheight.html b/tests/text-underline-lineheight.html
new file mode 100644
index 0000000..119c233
--- /dev/null
+++ b/tests/text-underline-lineheight.html
@@ -0,0 +1,129 @@
+<!--
+* @author Niklas von Hertzen <niklas at hertzen.com>
+* @created 16.7.2011
+* @website http://hertzen.com
+-->
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Text tests</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <link href="#" type="text/css" rel="stylesheet">
+
+ <script type="text/javascript" src="../external/jquery-1.6.2.min.js"></script>
+ <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();
+ });
+ </script>
+
+ <style>
+ .small{
+ font-size:14px;
+ }
+
+ .medium{
+ font-size:18px;
+ }
+ .large{
+ font-size:24px;
+ }
+ div{
+ float:left;
+ }
+ h2 {
+ clear:both;
+ }
+ </style>
+
+ </head>
+ <body> <h1><h1> 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><h2> 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><h3> 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>
+</html>
diff --git a/tests/text-underline.html b/tests/text-underline.html
new file mode 100644
index 0000000..119c233
--- /dev/null
+++ b/tests/text-underline.html
@@ -0,0 +1,129 @@
+<!--
+* @author Niklas von Hertzen <niklas at hertzen.com>
+* @created 16.7.2011
+* @website http://hertzen.com
+-->
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Text tests</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <link href="#" type="text/css" rel="stylesheet">
+
+ <script type="text/javascript" src="../external/jquery-1.6.2.min.js"></script>
+ <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();
+ });
+ </script>
+
+ <style>
+ .small{
+ font-size:14px;
+ }
+
+ .medium{
+ font-size:18px;
+ }
+ .large{
+ font-size:24px;
+ }
+ div{
+ float:left;
+ }
+ h2 {
+ clear:both;
+ }
+ </style>
+
+ </head>
+ <body> <h1><h1> 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><h2> 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><h3> 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>
+</html>