fabric.js/test/W3C_SVG_12_TinyTestSuite_beta/htmlObjectHarness/interact-focus-210-t.html
2010-06-10 11:14:53 -04:00

86 lines
3.3 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:interact-focus-210-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="interact-focus-210-t.html">Tiny version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/interact.html">13.11 Element focus</a></p>
<p>
<a href="interact-focus-209-t.html">interact-focus-209-t ←</a>
<a href="index.html">index</a>
<a href="interact-focus-211-t.html">→ interact-focus-211-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>interact-focus-210-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/interact-focus-210-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 interact-focus-210-t" src="../png/interact-focus-210-t.png" width="480" height="360"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="opscript">
<p>Test Focusability with the 'use' Element</p>
<p>
The first four occurrences of "focus next" will highlight all four top rects.
All four bottom rects should be able to receive the focus and be red when they have focus.
</p>
<p>Focus navigation is user agent dependant but typically is navigated with the keyboard keys.</p>
<p>TAB or arrow keys move the focus while the ENTER key activates the focused element.</p>
</div>
<div class="linkbar"> <p>
<a href="interact-focus-209-t.html">interact-focus-209-t ←</a>
<a href="index.html">index</a>
<a href="interact-focus-211-t.html">→ interact-focus-211-t</a>
</p></div>
</body>
</html>