| <!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> |
