--- /dev/null
+<!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>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+ body {
+ }
+ nav {
+ position: absolute;
+ top: 100px;
+ width: 400px;
+ height: 40px;
+ border: 1px solid blue;
+ }
+ nav > ul {
+ float: right;
+ list-style: inside;
+ }
+ nav > ul > li {
+ float: left;
+ }
+ nav > ul > li > a {
+ text-decoration: none;
+ }
+</style>
+<script src="../../resources/js-test-pre.js"></script>
+</head>
+<body>
+ <nav>
+ <ul>
+ <li><a href="#">About Us</a></li>
+ <li><a href="#">Contact Us</a></li>
+ </ul>
+ </nav>
+ <script>
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+
+ var list = document.getElementsByTagName('ul')[0];
+ var firstLinkTop = list.firstElementChild.getBoundingClientRect().top;
+ var lastLinkTop = list.lastElementChild.getBoundingClientRect().top;
+
+ if (firstLinkTop == lastLinkTop)
+ testPassed('Links are on the same line.');
+ else
+ shouldBe('firstLinkTop', 'lastLinkTop');
+
+ window.onload = function() {
+ list.style.marginRight = '-10px';
+ list.offsetTop;
+ list.style.marginRight = 'auto';
+
+ if (firstLinkTop == list.firstElementChild.getBoundingClientRect().top)
+ testPassed('First link didn\'t move after layout.');
+ else
+ shouldBe('list.firstElementChild.getBoundingClientRect().top', 'firstLinkTop');
+
+ if (lastLinkTop == list.lastElementChild.getBoundingClientRect().top)
+ testPassed('Last link didn\'t move after layout.');
+ else
+ shouldBe('list.lastElementChild.getBoundingClientRect().top', 'lastLinkTop');
+
+ if (window.testRunner)
+ testRunner.notifyDone();
+ };
+ </script>
+</body>
+</html>
\ No newline at end of file
git://git.webkit.org / WebKit-https.git / commitdiff