fabric.js/test/W3C_SVG_12_TinyTestSuite_beta/htmlObjectHarness/text-edit-201-t.html
2010-06-10 11:14:53 -04:00

112 lines
4.8 KiB
HTML
Executable file

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
<title>
SVG 1.2 Tiny test:text-edit-201-t </title>
<style type="text/css">
<!--
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
.openSection { color : blue; line-height: 125%; font-weight : 900 }
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
.opscript {margin-left: 3%; margin-right: 3%; }
.opscript p { margin-top: 0.7em}
.navbar {background: black; color: white; font-weight: bold}
-->
</style>
</head>
<body class="bodytext">
<div class="linkbar">
<p>
<a href="text-edit-201-t.html">Tiny version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/text.html">10.12 Editable Text Fields</a></p>
<p>
<a href="text-area-222-t.html">text-area-222-t ←</a>
<a href="index.html">index</a>
<a href="text-fonts-01-t.html">→ text-fonts-01-t</a>
</p></div>
<table align="center" border="0" cellspacing="0" cellpadding="10">
<tr>
<td align="center" colspan="3">
<table border="0" cellpadding="8">
<tr>
<td align="center" colspan="2" class="pageTitle">
<h1>text-edit-201-t</h1>
</td>
</tr>
<tr class="navbar">
<td align="center">
SVG Image
</td>
<td align="center">
PNG Image
</td>
</tr>
<tr>
<td align="right">
<object data="../svggen/text-edit-201-t.svg" width="480" height="360" type="image/svg+xml"><p style="font-size:300%;color:red">FAIL</p></object>
</td>
<td align="left">
<img alt="raster image of text-edit-201-t" src="../png/text-edit-201-t.png" width="480" height="360"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="opscript">
<p>
This test checks basic text-editing capabilities.
</p>
<p>
Start editing by activating the textArea that has a green dashed outline.
This textArea has no child text content, but has a defined width and height.
Input the string "123 456" (one two three, space, space, four five six).
After input is complete, click the button labeled "Check #1". If the frame around
the textArea goes from being dashed to being solid then that part of the test has passed.
Another condition is that the text string "123 456" should look like it only has one space
and not two due to the whitespace handling rules.
</p>
<p>
Next activate the middle textArea that has a red dashed outline.
Input two spaces between 3 and 4. Now since this textArea has xml:space="preserve" those
two spaces should be rendered as two spaces, meaning it must look different from the first
textArea on the left. The textContent must be the same in both cases though, and this is
verified by clicking the button labeled "Check #2". If the test is successful the frame
will turn from dashed red to solid red.
</p>
<p>
Finally activate the rightmost textArea that has a blue dashed outline.
Then exit the editing mode without changing the text. The text must not change and the 'tbreak' element
must be kept in the position it's in. Now activate the textArea again and input an additional linebreak between 3 and 4.
The line "345" must now be on the third line, the second line being blank.
Click the button labeled "Check #3" to verify the result, the frame will turn from dashed
blue to solid blue if successful.
</p>
<p>
The test has passed if after inputting text according to the instructions above and clicking the three
buttons the rendered image matches the reference image exactly.
</p>
</div>
<div class="linkbar"> <p>
<a href="text-area-222-t.html">text-area-222-t ←</a>
<a href="index.html">index</a>
<a href="text-fonts-01-t.html">→ text-fonts-01-t</a>
</p></div>
</body>
</html>