test: add test cases for text-stroke and textarea from (#1540 and #2132)

niklasvh · Jul 14, 2021 · ddc64d6 · ddc64d6
1 parent 92fa448
commit ddc64d6
Show file tree

Hide file tree

Showing 2 changed files with 140 additions and 0 deletions.
diff --git a/tests/reftests/text/stroke.html b/tests/reftests/text/stroke.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Text stroke tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        div span:first-child {
+            font-size: 2em;
+        }
+
+        div span:nth-child(2) {
+            font-size: 5em;
+        }
+
+        .stroke1 {
+            -webkit-text-stroke-width: .09em;
+            -webkit-text-stroke-color: red;
+            font-size: 1em;
+        }
+
+        .stroke2 {
+            -webkit-text-stroke-width: .12em;
+            -webkit-text-stroke-color: green;
+            font-size: 2em;
+        }
+
+        .stroke3 {
+            -webkit-text-stroke-width: .19em;
+            -webkit-text-stroke-color: blue;
+            font-size: 3em;
+        }
+
+        .ordered {
+            paint-order: stroke fill;
+        }
+
+        body {
+            font-family: Arial;
+        }
+    </style>
+</head>
+<body>
+<div class="stroke1">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke2">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke3">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke1 ordered">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke2 ordered">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke3 ordered">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke4">
+    Some text <span> with bigger text </span> that should have no stroke
+    <strong>Bolder text</strong> that makes things pretty
+</div>
+</body>
+</html>
diff --git a/tests/reftests/text/textarea.html b/tests/reftests/text/textarea.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>textarea</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        textarea{
+            font-family: Arial;
+            font-size: 14px;
+            width: 10em;
+            height: 90px;
+        }
+        div {
+            display: inline-block;
+        }
+    </style>
+
+</head>
+<body>
+<div>
+    <p>1. word wrap</p>
+    <textarea> A long text with many words that should be wrapped on various lines.
+    </textarea>
+
+    <p>2. padding</p>
+    <textarea style="padding: 1em">A long text with many words that should be wrapped on various lines.
+    </textarea>
+
+    <p>3. line height</p>
+    <textarea style="line-height: 25px">A long text with many words.
+    </textarea>
+
+    <p>4. letter spacing</p>
+    <textarea style="letter-spacing: 5px"> A long text with many words that should be wrapped on various lines.</textarea>
+</div>
+<div>
+    <p>5. multiple spaces</p>
+    <textarea>A long text with many           words     that should be wrapped on various lines.
+    </textarea>
+
+    <p>6. newlines</p>
+    <textarea>A long text with many
+          words that
+
+        should be wrapped on various lines.
+    </textarea>
+
+    <p>7. long word</p>
+    <textarea>Donaudampfschifffahrtsgesellschaftskapitänskochmütze</textarea>
+
+    <p>8. hyphen</p>
+    <textarea>A text with many-manymany manys.</textarea>
+</div>
+<div>
+    <p>9. kerning</p>
+    <textarea>AVAVAVAVAVAVAVAV TeTeTeTeTeTeTeTeTe YaYaYaYaYaYaYaYaY</textarea>
+
+    <p>10. kerning with letter spacing</p>
+    <textarea style="letter-spacing: 1px">AVAVAVAVAVAVAV TeTeTeTeTeTeTeTe YaYaYaYaYaYaYaY</textarea>
+
+    <p>11. kerning with letter spacing</p>
+    <textarea style="letter-spacing: 5px">AVAVAVAVAV TeTeTeTeTeT YaYaYaYaYa</textarea>
+
+</div>
+</body>
+</html>