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