blob: b2f531538f0719fea4c70efb9c3609b8c498fb82 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
section {
display: inline-block;
width: 300px;
border: 1px solid blue;
margin: 5px 0;
padding: 5px;
}
section > h1 {
font-size: 1.1em;
margin: 0;
}
li {
list-style-position: inside;
margin: 5px;
background: silver;
}
ul, ol {
margin: 0;
padding: 0;
}
.floating > ul > li, .floating > ol > li {
float: left;
}
.floating > p {
clear: both;
}
.block > ul, .block > ol {
display: inline-block;
margin: 0;
padding: 0;
}
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<header>
<h1>list-style-position: inside</h1>
<p>
Tests that lists with header the list marker displayed
inside the item works as expected.
</p>
</header>
<section class="floating">
<h1>Floating, Unordered</h1>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<p>
The list markers above should be inside the respective
list item boxes.
</p>
</section>
<section class="floating">
<h1>Floating, Ordered</h1>
<ol>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ol>
<p>
The list markers above should be inside the respective
list item boxes.
</p>
</section>
<br>
<section class="block">
<h1>Block, Unordered</h1>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<p>
The list markers above should be inside the respective
list item boxes and the text should not wrap.
</p>
</section>
<section class="block">
<h1>Block, Ordered</h1>
<ol>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ol>
<p>
The list markers above should be inside the respective
list item boxes and the text should not wrap.
</p>
</section>
<br>
<section class="reference">
<h1>Reference, Unordered</h1>
<ul>
<li>Item A</li>
</ul>
</section>
<section class="reference">
<h1>Reference, Ordered</h1>
<ol>
<li>Item A</li>
</ol>
</section>
<script>
function getItems(className, tagName)
{
var selector = '.' + className + ' > ' + tagName;
var block = document.querySelector(selector);
return block.getElementsByTagName('li');
}
function test(className, tagName)
{
var referenceHeight = getItems('reference', tagName)[0].
getBoundingClientRect().height;
var testItems = getItems(className, tagName);
// Check that all items have the right height
var failed = 0;
for (var item, i = 0; item = testItems[i]; i++) {
var rect = item.getBoundingClientRect();
if (rect.height != referenceHeight) {
failed++;
testFailed('Item ' + i + ' in ' + className +
' ' + tagName + ' has height of ' +
rect.height + 'px, expecting ' +
referenceHeight + 'px.');
}
}
if (!failed)
testPassed('All items in ' + className + ' ' +
tagName + ' has the expected height.');
// Change list-style-type to none and back to ensure
// that the width changes.
for (var item, i = 0; item = testItems[i]; i++) {
item.style.listStyleType = 'none';
}
var width = testItems[0].getBoundingClientRect().width;
for (var item, i = 0; item = testItems[i]; i++) {
item.style.listStyleType = '';
}
if (testItems[0].getBoundingClientRect().width != width)
testPassed('Width of first item in ' + className +
' ' + tagName + ' is affected by list marker ' +
'as expected.');
else
testFailed('Width of first item in ' + className +
' ' + tagName + ' is not affected by list ' +
'marker as expected.');
}
test('floating', 'ul');
test('floating', 'ol');
test('block', 'ul');
test('block', 'ol');
// Only include test results in test output.
if (window.testRunner) {
while (document.body.lastChild != document.body.firstChild)
document.body.removeChild(document.body.lastChild);
}
</script>
</body>
</html>