third_party/WebKit/LayoutTests/fast/lists/list-style-position-inside.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style>
   5             section {
   6                 display: inline-block;
   7                 width: 300px;
   8                 border: 1px solid blue;
   9                 margin: 5px 0;
  10                 padding: 5px;
  11             }
  12             section > h1 {
  13                 font-size: 1.1em;
  14                 margin: 0;
  15             }
  16
  17             li {
  18                 list-style-position: inside;
  19                 margin: 5px;
  20                 background: silver;
  21             }
  22             ul, ol {
  23                 margin: 0;
  24                 padding: 0;
  25             }
  26
  27             .floating > ul > li, .floating > ol > li {
  28                 float: left;
  29             }
  30             .floating > p {
  31                 clear: both;
  32             }
  33
  34             .block > ul, .block > ol {
  35                 display: inline-block;
  36                 margin: 0;
  37                 padding: 0;
  38             }
  39         </style>
  40         <script src="../../resources/js-test.js"></script>
  41     </head>
  42
  43     <body>
  44         <header>
  45             <h1>list-style-position: inside</h1>
  46             <p>
  47                 Tests that lists with header the list marker displayed
  48                 inside the item works as expected.
  49             </p>
  50         </header>
  51
  52         <section class="floating">
  53             <h1>Floating, Unordered</h1>
  54             <ul>
  55                 <li>Item A</li>
  56                 <li>Item B</li>
  57                 <li>Item C</li>
  58             </ul>
  59             <p>
  60                 The list markers above should be inside the respective
  61                 list item boxes.
  62             </p>
  63         </section>
  64         <section class="floating">
  65             <h1>Floating, Ordered</h1>
  66             <ol>
  67                 <li>Item A</li>
  68                 <li>Item B</li>
  69                 <li>Item C</li>
  70             </ol>
  71             <p>
  72                 The list markers above should be inside the respective
  73                 list item boxes.
  74             </p>
  75         </section>
  76         <br>
  77
  78         <section class="block">
  79             <h1>Block, Unordered</h1>
  80             <ul>
  81                 <li>Item A</li>
  82                 <li>Item B</li>
  83                 <li>Item C</li>
  84             </ul>
  85             <p>
  86                 The list markers above should be inside the respective
  87                 list item boxes and the text should not wrap.
  88             </p>
  89         </section>
  90
  91         <section class="block">
  92             <h1>Block, Ordered</h1>
  93             <ol>
  94                 <li>Item A</li>
  95                 <li>Item B</li>
  96                 <li>Item C</li>
  97             </ol>
  98             <p>
  99                 The list markers above should be inside the respective
 100                 list item boxes and the text should not wrap.
 101             </p>
 102         </section>
 103         <br>
 104
 105         <section class="reference">
 106             <h1>Reference, Unordered</h1>
 107             <ul>
 108                 <li>Item A</li>
 109             </ul>
 110         </section>
 111
 112         <section class="reference">
 113             <h1>Reference, Ordered</h1>
 114             <ol>
 115                 <li>Item A</li>
 116             </ol>
 117         </section>
 118
 119         <script>
 120             function getItems(className, tagName)
 121             {
 122                 var selector = '.' + className + ' > ' + tagName;
 123                 var block = document.querySelector(selector);
 124                 return block.getElementsByTagName('li');
 125             }
 126
 127             function test(className, tagName)
 128             {
 129                 var referenceHeight = getItems('reference', tagName)[0].
 130                     getBoundingClientRect().height;
 131                 var testItems = getItems(className, tagName);
 132
 133                 // Check that all items have the right height
 134                 var failed = 0;
 135                 for (var item, i = 0; item = testItems[i]; i++) {
 136                     var rect = item.getBoundingClientRect();
 137                     if (rect.height != referenceHeight) {
 138                         failed++;
 139                         testFailed('Item ' + i + ' in ' + className +
 140                             ' ' + tagName + ' has height of ' +
 141                             rect.height + 'px, expecting ' +
 142                             referenceHeight + 'px.');
 143                     }
 144                 }
 145                 if (!failed)
 146                     testPassed('All items in ' + className + ' ' +
 147                         tagName + ' has the expected height.');
 148
 149                 // Change list-style-type to none and back to ensure
 150                 // that the width changes.
 151                 for (var item, i = 0; item = testItems[i]; i++) {
 152                     item.style.listStyleType = 'none';
 153                 }
 154                 var width = testItems[0].getBoundingClientRect().width;
 155                 for (var item, i = 0; item = testItems[i]; i++) {
 156                     item.style.listStyleType = '';
 157                 }
 158                 if (testItems[0].getBoundingClientRect().width != width)
 159                     testPassed('Width of first item in ' + className +
 160                         ' ' + tagName + ' is affected by list marker ' +
 161                         'as expected.');
 162                 else
 163                     testFailed('Width of first item in ' + className +
 164                         ' ' + tagName + ' is not affected by list ' +
 165                         'marker as expected.');
 166             }
 167
 168             test('floating', 'ul');
 169             test('floating', 'ol');
 170             test('block', 'ul');
 171             test('block', 'ol');
 172
 173             // Only include test results in test output.
 174             if (window.testRunner) {
 175                 while (document.body.lastChild != document.body.firstChild)
 176                     document.body.removeChild(document.body.lastChild);
 177             }
 178         </script>
 179     </body>
 180 </html>