350 lines
10 KiB
HTML
350 lines
10 KiB
HTML
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>Blueprint HTML Elements Tests</title>
|
|
|
|
<!-- Framework CSS -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="screen.css"
|
|
type="text/css"
|
|
media="screen, projection"
|
|
/>
|
|
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
|
|
<!--[if IE
|
|
]><link
|
|
rel="stylesheet"
|
|
href="ie.css"
|
|
type="text/css"
|
|
media="screen, projection"
|
|
/><![endif]-->
|
|
</head>
|
|
<body>
|
|
<div class="container showgrid">
|
|
<h2>Tests for common HTML elements</h2>
|
|
<hr />
|
|
|
|
<h5>PARAGRAPHS <span class="alt">&</span> BOXES</h5>
|
|
|
|
<div class="span-8">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
|
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
|
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
|
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
|
culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
|
eiusmod tempor <sub>sub text</sub> ut labore et
|
|
<sup>sup text</sup> magna aliqua. Ut enim ad minim veniam, quis
|
|
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit
|
|
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
|
|
id est laborum.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="span-8">
|
|
<p class="small">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
|
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
aliquip ex ea commodo consequat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
<p class="large">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="span-8 last">
|
|
<div class="box">
|
|
<p class="last">
|
|
Aliquip ex ea commodo consequat. Duis aute irure dolor in
|
|
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
|
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
|
culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
</div>
|
|
<blockquote>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
|
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
aliquip ex ea commodo consequat.
|
|
</p>
|
|
</blockquote>
|
|
</div>
|
|
<hr />
|
|
|
|
<h5>LISTS</h5>
|
|
|
|
<div class="span-8">
|
|
<ul>
|
|
<li>Unordered list test</li>
|
|
<li>
|
|
Another list element. Lorem ipsum dolor sit amet, consectetur
|
|
adipisicing elit.
|
|
</li>
|
|
<li>Yet another element in the list</li>
|
|
<li>
|
|
Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing
|
|
elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
|
</li>
|
|
</ul>
|
|
<ol>
|
|
<li>Ordered list test</li>
|
|
<li>Another list element</li>
|
|
<li>Yet another element in the list</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="span-8">
|
|
<ol>
|
|
<li>Ordered list</li>
|
|
<li>
|
|
Here's a nested unordered list
|
|
<ul>
|
|
<li>Nested Unordered list</li>
|
|
<li>
|
|
Nested ordered list
|
|
<ol>
|
|
<li>The first</li>
|
|
<li>And the second</li>
|
|
</ol>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>Ordered List item</li>
|
|
<li>
|
|
Nested Ordered list
|
|
<ol>
|
|
<li>Some point</li>
|
|
<li>
|
|
Nested Unordered list
|
|
<ul>
|
|
<li>The first</li>
|
|
<li>And the second</li>
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="span-8 last">
|
|
<dl>
|
|
<dt>definition list dt</dt>
|
|
<dd>definition list dd</dd>
|
|
<dt>definition list dt</dt>
|
|
<dd>definition list dd</dd>
|
|
<dt>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing
|
|
elit adipisicing elit
|
|
</dt>
|
|
<dd>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing
|
|
elit adipisicing elit
|
|
</dd>
|
|
<dt>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing
|
|
elit adipisicing elit
|
|
</dt>
|
|
<dd>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing
|
|
elit adipisicing elit
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
<hr />
|
|
|
|
<h5>HEADINGS</h5>
|
|
|
|
<div class="span-8">
|
|
<h1>H1: Lorem ipsum dolor sit amet</h1>
|
|
<h2>H2: Lorem ipsum dolor sit amet, consectetur elit</h2>
|
|
<h3>H3: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
|
|
<h4>
|
|
H4: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipis
|
|
</h4>
|
|
<h5>
|
|
H5: Lorem ipsum dolor sit amet, consectetur adipisicing elit
|
|
adipisicing elit adipisicing elit
|
|
</h5>
|
|
<h6>
|
|
H6: Lorem ipsum dolor sit amet, consectetur adipisicing elit
|
|
adipisicing elit adipisicing elit
|
|
</h6>
|
|
</div>
|
|
|
|
<div class="span-8">
|
|
<h1>Heading 1</h1>
|
|
<hr />
|
|
<h2>Heading 2</h2>
|
|
<hr />
|
|
<h3>Heading 3</h3>
|
|
<hr />
|
|
<h4>Heading 4</h4>
|
|
<hr />
|
|
<h5>Heading 5</h5>
|
|
<hr />
|
|
<h6>Heading 6</h6>
|
|
</div>
|
|
|
|
<div class="span-8 last">
|
|
<h1>Heading 1</h1>
|
|
<h2>Heading 2</h2>
|
|
<h3>Heading 3</h3>
|
|
<h4>Heading 4</h4>
|
|
<h5>Heading 5</h5>
|
|
<h6>Heading 6</h6>
|
|
</div>
|
|
<hr />
|
|
|
|
<h5>MISC ELEMENTS</h5>
|
|
|
|
<div class="span-8">
|
|
<p>
|
|
<strong><strong></strong><br />
|
|
<del><del> deleted</del><br />
|
|
<dfn><dfn> dfn</dfn><br />
|
|
<em><em> emphasis</em>
|
|
</p>
|
|
<p>
|
|
<a><a> anchor</a><br />
|
|
<a href="http://www.google.com"><a> a + href</a>
|
|
</p>
|
|
<p>
|
|
<abbr title="extended abbr text should show when mouse over"
|
|
><abbr> abbr - extended text when mouseover.</abbr
|
|
><br />
|
|
<acronym title="extended acronym text should show when mouse over"
|
|
><acronym> acronym - extended text when mouseover.</acronym
|
|
>
|
|
</p>
|
|
<address>
|
|
<address><br />
|
|
Donald Duck<br />
|
|
Box 555<br />
|
|
Disneyland
|
|
</address>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
|
eiusmod tempor incididunt ut labore dolore.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="span-8">
|
|
<table
|
|
summary="This is the summary text for this table."
|
|
border="0"
|
|
cellspacing="0"
|
|
cellpadding="0"
|
|
>
|
|
<caption>
|
|
<em>A standard test table with a caption, tr, td elements</em>
|
|
</caption>
|
|
<tr>
|
|
<th class="span-4">Table Header One</th>
|
|
<th class="span-4 last">Table Header Two</th>
|
|
</tr>
|
|
<tr>
|
|
<td>TD One</td>
|
|
<td>TD Two</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">TD colspan 2</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table
|
|
summary="This is the summary text for this table."
|
|
border="0"
|
|
cellspacing="0"
|
|
cellpadding="0"
|
|
>
|
|
<caption>
|
|
<em>A test table with a thead, tfoot, and tbody elements</em>
|
|
</caption>
|
|
<thead>
|
|
<tr>
|
|
<th class="span-4">Table Header One</th>
|
|
<th class="span-4 last">Table Header Two</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="2">tfoot footer</td>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr>
|
|
<td>TD One</td>
|
|
<td>TD Two</td>
|
|
</tr>
|
|
<tr>
|
|
<td>TD One</td>
|
|
<td>TD Two</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody>
|
|
<tr>
|
|
<td>TD One</td>
|
|
<td>TD Two</td>
|
|
</tr>
|
|
<tr>
|
|
<td>TD One</td>
|
|
<td>TD Two</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="span-8 last">
|
|
<pre>
|
|
<pre>
|
|
pre space1
|
|
pre space1
|
|
pre space2
|
|
pre space2
|
|
pre tab
|
|
pre tab</pre
|
|
>
|
|
|
|
<code><code> Not indented indent1 indent1 indent2 indent3</code>
|
|
|
|
<tt
|
|
><tt> This tt text should be monospaced and wrap as if one line
|
|
of text even though the code has newlines, spaces, and tabs. It should
|
|
be the same size as <p> text.
|
|
</tt>
|
|
</div>
|
|
<hr />
|
|
|
|
<p>
|
|
<a href="http://validator.w3.org/check?uri=referer">
|
|
<img
|
|
src="valid.png"
|
|
alt="Valid HTML 4.01 Strict"
|
|
height="31"
|
|
width="88"
|
|
class="top"
|
|
/></a>
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html>
|