lists-styles-quirks.html (7949B)
1 <!-- This file is the same as lists-styles.html except: 2 - no doctype 3 - different title 4 - added quirks mode styles 5 --> 6 <title>quirks mode - default styles and preshints for ol, ul, menu, li, dir, dl, dt, dd</title> 7 <meta name="viewport" content="width=device-width"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/html/rendering/support/test-ua-stylesheet.js"></script> 11 <style> 12 /* Specify this bogus namespace, so the rules in this stylesheet only apply to the `fakeClone`d elements in #refs, not the HTML elements in #tests. */ 13 @namespace url(urn:not-html); 14 15 dir, dd, dl, dt, menu, ol, ul { display: block; } 16 li { display: list-item; text-align: match-parent; } 17 18 dir, dl, menu, ol, ul { margin-block-start: 1em; margin-block-end: 1em; } 19 20 :is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) { 21 margin-block-start: 0; margin-block-end: 0; 22 } 23 24 dd { margin-inline-start: 40px; } 25 dir, menu, ol, ul { padding-inline-start: 40px; } 26 27 ol, ul, menu { counter-reset: list-item; } 28 ol { list-style-type: decimal; } 29 30 dir, menu, ul { 31 list-style-type: disc; 32 } 33 :is(dir, menu, ol, ul) :is(dir, menu, ul) { 34 list-style-type: circle; 35 } 36 :is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) { 37 list-style-type: square; 38 } 39 40 /* preshints */ 41 ol[type="1"], li[type="1"] { list-style-type: decimal; } 42 /* use classes due to lack of support for "s" annotation */ 43 ol[class=type-a], li[class=type-a] { list-style-type: lower-alpha; } 44 ol[class=type-A], li[class=type-A] { list-style-type: upper-alpha; } 45 ol[class=type-i], li[class=type-i] { list-style-type: lower-roman; } 46 ol[class=type-I], li[class=type-I] { list-style-type: upper-roman; } 47 ul[type=none i], li[type=none i] { list-style-type: none; } 48 ul[type=disc i], li[type=disc i] { list-style-type: disc; } 49 ul[type=circle i], li[type=circle i] { list-style-type: circle; } 50 ul[type=square i], li[type=square i] { list-style-type: square; } 51 52 li[value="10"], li[value="10xyz"], li[value="10e10"] { counter-set: list-item 10; } 53 ol[start="10"], ol[start="10xyz"], ol[start="10e10"] { counter-reset: list-item 9; } 54 ol[reversed] { counter-reset: reversed(list-item); } 55 ol[reversed][start="20"], ol[reversed][start="20xyz"], ol[reversed][start="20e10"] { counter-reset: reversed(list-item) 21; } 56 57 /* dir="" */ 58 [dir=ltr] { direction: ltr; } 59 [dir=rtl] { direction: rtl; } 60 61 /* quirks mode styles */ 62 li { list-style-position: inside; } 63 li :is(dir, menu, ol, ul) { list-style-position: outside; } 64 :is(dir, menu, ol, ul) :is(dir, menu, ol, ul, li) { list-style-position: unset; } 65 </style> 66 67 <div id="log"></div> 68 69 <div id="tests"> 70 <li></li> 71 <dir> 72 <li></li> 73 </dir> 74 <dt></dt> 75 <dd></dd> 76 <dl> 77 <dt></dt> 78 <dd></dd> 79 </dl> 80 <menu> 81 <li></li> 82 </menu> 83 <ol> 84 <li></li> 85 </ol> 86 <ul> 87 <li></li> 88 </ul> 89 <dir data-skip><dir></dir></dir> 90 <dir data-skip><menu></menu></dir> 91 <dir data-skip><ul></ul></dir> 92 <menu data-skip><dir></dir></menu> 93 <menu data-skip><menu></menu></menu> 94 <menu data-skip><ul></ul></menu> 95 <ol data-skip><dir></dir></ol> 96 <ol data-skip><menu></menu></ol> 97 <ol data-skip><ul></ul></ol> 98 <ul data-skip><dir></dir></ul> 99 <ul data-skip><menu></menu></ul> 100 <ul data-skip><ul></ul></ul> 101 102 <dir data-skip><dir data-skip><dir></dir></dir></dir> 103 <dir data-skip><dir data-skip><menu></menu></dir></dir> 104 <dir data-skip><dir data-skip><ul></ul></dir></dir> 105 <dir data-skip><menu data-skip><dir></dir></menu></dir> 106 <dir data-skip><menu data-skip><menu></menu></menu></dir> 107 <dir data-skip><menu data-skip><ul></ul></menu></dir> 108 <dir data-skip><ol data-skip><dir></dir></ol></dir> 109 <dir data-skip><ol data-skip><menu></menu></ol></dir> 110 <dir data-skip><ol data-skip><ul></ul></ol></dir> 111 <dir data-skip><ul data-skip><dir></dir></ul></dir> 112 <dir data-skip><ul data-skip><menu></menu></ul></dir> 113 <dir data-skip><ul data-skip><ul></ul></ul></dir> 114 115 <menu data-skip><dir data-skip><dir></dir></dir></menu> 116 <menu data-skip><dir data-skip><menu></menu></dir></menu> 117 <menu data-skip><dir data-skip><ul></ul></dir></menu> 118 <menu data-skip><menu data-skip><dir></dir></menu></menu> 119 <menu data-skip><menu data-skip><menu></menu></menu></menu> 120 <menu data-skip><menu data-skip><ul></ul></menu></menu> 121 <menu data-skip><ol data-skip><dir></dir></ol></menu> 122 <menu data-skip><ol data-skip><menu></menu></ol></menu> 123 <menu data-skip><ol data-skip><ul></ul></ol></menu> 124 <menu data-skip><ul data-skip><dir></dir></ul></menu> 125 <menu data-skip><ul data-skip><menu></menu></ul></menu> 126 <menu data-skip><ul data-skip><ul></ul></ul></menu> 127 128 <ol data-skip><dir data-skip><dir></dir></dir></ol> 129 <ol data-skip><dir data-skip><menu></menu></dir></ol> 130 <ol data-skip><dir data-skip><ul></ul></dir></ol> 131 <ol data-skip><menu data-skip><dir></dir></menu></ol> 132 <ol data-skip><menu data-skip><menu></menu></menu></ol> 133 <ol data-skip><menu data-skip><ul></ul></menu></ol> 134 <ol data-skip><ol data-skip><dir></dir></ol></ol> 135 <ol data-skip><ol data-skip><menu></menu></ol></ol> 136 <ol data-skip><ol data-skip><ul></ul></ol></ol> 137 <ol data-skip><ul data-skip><dir></dir></ul></ol> 138 <ol data-skip><ul data-skip><menu></menu></ul></ol> 139 <ol data-skip><ul data-skip><ul></ul></ul></ol> 140 141 <ul data-skip><dir data-skip><dir></dir></dir></ul> 142 <ul data-skip><dir data-skip><menu></menu></dir></ul> 143 <ul data-skip><dir data-skip><ul></ul></dir></ul> 144 <ul data-skip><menu data-skip><dir></dir></menu></ul> 145 <ul data-skip><menu data-skip><menu></menu></menu></ul> 146 <ul data-skip><menu data-skip><ul></ul></menu></ul> 147 <ul data-skip><ol data-skip><dir></dir></ol></ul> 148 <ul data-skip><ol data-skip><menu></menu></ol></ul> 149 <ul data-skip><ol data-skip><ul></ul></ol></ul> 150 <ul data-skip><ul data-skip><dir></dir></ul></ul> 151 <ul data-skip><ul data-skip><menu></menu></ul></ul> 152 <ul data-skip><ul data-skip><ul></ul></ul></ul> 153 154 <ol type="1"></ol> 155 <ul type="1"></ul> 156 <li type="1"></li> 157 <ol type="a" class="type-a"></ol> 158 <ul type="a" class="type-a"></ul> 159 <li type="a" class="type-a"></li> 160 <ol type="A" class="type-A"></ol> 161 <ul type="A" class="type-A"></ul> 162 <li type="A" class="type-A"></li> 163 <ol type="i" class="type-i"></ol> 164 <ul type="i" class="type-i"></ul> 165 <li type="i" class="type-i"></li> 166 <ol type="I" class="type-I"></ol> 167 <ul type="I" class="type-I"></ul> 168 <li type="I" class="type-I"></li> 169 <ol type="none"></ol> 170 <ul type="none"></ul> 171 <li type="none"></li> 172 <ol type="NONE"></ol> 173 <ul type="NONE"></ul> 174 <li type="NONE"></li> 175 <ol type="disc"></ol> 176 <ul type="disc"></ul> 177 <li type="disc"></li> 178 <ol type="DISC"></ol> 179 <ul type="DISC"></ul> 180 <li type="DISC"></li> 181 <ol type="circle"></ol> 182 <ul type="circle"></ul> 183 <li type="circle"></li> 184 <ol type="CIRCLE"></ol> 185 <ul type="CIRCLE"></ul> 186 <li type="CIRCLE"></li> 187 <ol type="square"></ol> 188 <ul type="square"></ul> 189 <li type="square"></li> 190 <ol type="SQUARE"></ol> 191 <ul type="SQUARE"></ul> 192 <li type="SQUARE"></li> 193 194 <ol> 195 <li value="10"></li> 196 <li value="10xyz"></li> 197 <li value="10e10"></li> 198 <li value="xyz"></li> 199 </ol> 200 201 <ol start="10"><li></li></ol> 202 <ol start="10xyz"><li></li></ol> 203 <ol start="10e10"><li></li></ol> 204 <ol start="xyz"><li></li></ol> 205 <ol reversed><li></li></ol> 206 <ol reversed start="20"><li></li></ol> 207 <ol reversed start="20xyz"><li></li></ol> 208 <ol reversed start="20e10"><li></li></ol> 209 <ol reversed start="xyz"><li></li></ol> 210 211 <ul data-skip dir="rtl"><li dir="ltr"></li></ul> 212 <ul data-skip dir="ltr"><li dir="rtl"></li></ul> 213 214 </div> 215 216 <div id="refs"></div> 217 218 <script> 219 const props = [ 220 'display', 221 'margin-top', 222 'margin-right', 223 'margin-bottom', 224 'margin-left', 225 'padding-top', 226 'padding-right', 227 'padding-bottom', 228 'padding-left', 229 'list-style-type', 230 'counter-set', 231 'counter-reset', 232 'counter-increment', 233 'text-align', 234 'list-style-position', 235 ]; 236 runUAStyleTests(props); 237 238 </script>