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

95 lines
3.7 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-align-08-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-align-08-t.html">Tiny version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/text.html">10.8 Alignment properties</a></p>
<p>
<a href="text-align-07-t.html">text-align-07-t ←</a>
<a href="index.html">index</a>
<a href="text-align-201-t.html">→ text-align-201-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-align-08-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-align-08-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-align-08-t" src="../png/text-align-08-t.png" width="480" height="360"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="opscript">
<p>
Test horizontal baselines across script and font size changes. It uses
an SVG Font, where the Latin letter "a" is a rectangle, the Japanese
letter "犜" is an upward-pointing triangle, and the Devanagari letter
"ण" is a downward-pointing triangle.
</p>
<p>
The dominant baseline should be alphabetic, so the 'a' will be sitting
on the alphabetic (blue) line, the japanese glyph (upward pointing
triangle) will be aligned on the ideographic (red) baseline and 'ण' is
a devangari character (downward pointing triangle) and will use the
hanging baseline (green). The smaller versions of the characters should
be aligned to the same baselines as the respective larger characters,
so all like shapes align to the same baseline..
</p>
<p>Original test authored by Rodney Hardy at CISRA.</p>
</div>
<div class="linkbar"> <p>
<a href="text-align-07-t.html">text-align-07-t ←</a>
<a href="index.html">index</a>
<a href="text-align-201-t.html">→ text-align-201-t</a>
</p></div>
</body>
</html>