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