174 lines
5.7 KiB
HTML
174 lines
5.7 KiB
HTML
<!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-pre.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> |