168 lines
4.7 KiB
HTML
168 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Tests</title>
|
|
<style>
|
|
* {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#error {
|
|
margin: 0;
|
|
background: #B30024;
|
|
color: #FFF;
|
|
text-align: center;
|
|
font-weight: lighter;
|
|
white-space: pre;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2 id="error"></h2>
|
|
<p class="test">No_spaces</p>
|
|
<p class="result">No_spaces</p>
|
|
<p class="test">Single space</p>
|
|
<p class="result">Single space</p>
|
|
<p class="test">
|
|
Leading & trailing spaces
|
|
</p>
|
|
<p class="result">Leading & trailing spaces</p>
|
|
<p class="test">
|
|
<span>Whitespace around a span</span>
|
|
</p>
|
|
<p class="result"><span>Whitespace around a span</span></p>
|
|
<p class="test">
|
|
<span>
|
|
Whitespace around span & text
|
|
</span>
|
|
</p>
|
|
<p class="result"><span>Whitespace around span & text</span></p>
|
|
<p class="test">
|
|
<span>Whitespace around</span>
|
|
<span>two spans.</span>
|
|
</p>
|
|
<p class="result"><span>Whitespace around</span> <span>two spans.</span></p>
|
|
<p class="test">
|
|
<span>Span with trailing space, </span><span>followed by other span.</span>
|
|
</p>
|
|
<p class="result"><span>Span with trailing space, </span><span>followed by other span.</span></p>
|
|
<p class="test">
|
|
<span>Span;</span><span> other span with leading space.</span>
|
|
</p>
|
|
<p class="result"><span>Span;</span><span> other span with leading space.</span></p>
|
|
<p class="test">
|
|
<span>Span 1;</span><span> span 2.</span>
|
|
</p>
|
|
<p class="result"><span>Span 1;</span><span> span 2.</span></p>
|
|
<div class="test">
|
|
Div, with mix of text
|
|
<p>and paragraphs</p>
|
|
</div>
|
|
<div class="result">Div, with mix of text<p>and paragraphs</p></div>
|
|
<div class="test">
|
|
<span>
|
|
Span with whitespace in div;
|
|
</span>
|
|
<p>
|
|
Paragraph with whitespace.
|
|
</p>
|
|
</div>
|
|
<div class="result"><span>Span with whitespace in div;</span><p>Paragraph with whitespace.</p></div>
|
|
<pre class="test">
|
|
This
|
|
is a pre</pre>
|
|
<pre class="result">
|
|
This
|
|
is a pre</pre>
|
|
<div class="test">
|
|
<pre>Pre,
|
|
surrounded by whitespace</pre>
|
|
</div>
|
|
<div class="result"><pre>Pre,
|
|
surrounded by whitespace</pre></div>
|
|
<div class="test">
|
|
<p>
|
|
Two
|
|
</p>
|
|
<p>
|
|
Paragraphs
|
|
</p>
|
|
</div>
|
|
<div class="result"><p>Two</p><p>Paragraphs</p></div>
|
|
<div class="test">
|
|
<p>
|
|
Paragraph
|
|
</p>
|
|
<span>
|
|
Span
|
|
</span>
|
|
</div>
|
|
<div class="result"><p>Paragraph</p><span>Span</span></div>
|
|
<div class="test">
|
|
Text;
|
|
more text.
|
|
</div>
|
|
<div class="result">Text; more text.</div>
|
|
<div class="test">
|
|
Text,
|
|
<div>div,</div>
|
|
more text.
|
|
</div>
|
|
<div class="result">Text,<div>div,</div>more text.</div>
|
|
<div class="test">
|
|
Text
|
|
<!-- Comment -->
|
|
More text
|
|
</div>
|
|
<div class="result">Text More text</div>
|
|
<div class="test"> </div><!-- Only whitespace -->
|
|
<div class="result"></div>
|
|
<div class="test">Space <pre>text</pre> space</div>
|
|
<div class="result">Space<pre>text</pre>space</div>
|
|
<div class="test"><img src="/404.jpg"> Text after an image</div>
|
|
<div class="result"><img src="/404.jpg"> Text after an image</div>
|
|
<div class="test">Text before an image <img src="/404.jpg"></div>
|
|
<div class="result">Text before an image <img src="/404.jpg"></div>
|
|
<div class="test"><input type="text"> Text after an input</div>
|
|
<div class="result"><input type="text"> Text after an input</div>
|
|
<div class="test">Text before an input <input type="text"></div>
|
|
<div class="result">Text before an input <input type="text"></div>
|
|
<div class="test">Space <hr> more space</div>
|
|
<div class="result">Space<hr>more space</div>
|
|
<div class="test">Space <br> more space</div>
|
|
<div class="result">Space<br>more space</div>
|
|
<div class="test">Space <img src="/404.jpg"><span> more space</span></div>
|
|
<div class="result">Space <img src="/404.jpg"><span> more space</span></div>
|
|
|
|
<script src="./whitespace.min.js"></script>
|
|
<script>
|
|
var tests = document.querySelectorAll('.test')
|
|
var results = document.querySelectorAll('.result')
|
|
|
|
function err (msg) {
|
|
document.querySelector('#error').textContent = msg
|
|
throw new Error(msg)
|
|
}
|
|
|
|
if (tests.length !== results.length)
|
|
err('The number of tests is not equal to the number of results.')
|
|
|
|
for (var i = 0; i < tests.length; i += 1) {
|
|
collapse(tests[i])
|
|
if (tests[i].innerHTML !== results[i].innerHTML)
|
|
err('"' + tests[i].innerHTML + '" should be "' + results[i].innerHTML + '"')
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|