1 files changed, 228 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/lists-styles.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/lists-styles.html
new file mode 100644
index 0000000000..a5f011cecc
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/lists-styles.html
@@ -0,0 +1,228 @@
+<!doctype html>
+<title>default styles and preshints for ol, ul, menu, li, dir, dl, dt, dd</title>
+<meta name="viewport" content="width=device-width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/rendering/support/test-ua-stylesheet.js"></script>
+<style>
+/* 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. */
+@namespace url(urn:not-html);
+
+dir, dd, dl, dt, menu, ol, ul { display: block; }
+li { display: list-item; text-align: match-parent; }
+
+dir, dl, menu, ol, ul { margin-block-start: 1em; margin-block-end: 1em; }
+
+:is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) {
+  margin-block-start: 0; margin-block-end: 0;
+}
+
+dd { margin-inline-start: 40px; }
+dir, menu, ol, ul { padding-inline-start: 40px; }
+
+ol, ul, menu { counter-reset: list-item; }
+ol { list-style-type: decimal; }
+
+dir, menu, ul {
+  list-style-type: disc;
+}
+:is(dir, menu, ol, ul) :is(dir, menu, ul) {
+  list-style-type: circle;
+}
+:is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) {
+  list-style-type: square;
+}
+
+/* preshints */
+ol[type="1"], li[type="1"] { list-style-type: decimal; }
+/* use classes due to lack of support for "s" annotation */
+ol[class=type-a], li[class=type-a] { list-style-type: lower-alpha; }
+ol[class=type-A], li[class=type-A] { list-style-type: upper-alpha; }
+ol[class=type-i], li[class=type-i] { list-style-type: lower-roman; }
+ol[class=type-I], li[class=type-I] { list-style-type: upper-roman; }
+ul[type=none i], li[type=none i] { list-style-type: none; }
+ul[type=disc i], li[type=disc i] { list-style-type: disc; }
+ul[type=circle i], li[type=circle i] { list-style-type: circle; }
+ul[type=square i], li[type=square i] { list-style-type: square; }
+
+li[value="10"], li[value="10xyz"], li[value="10e10"] { counter-set: list-item 10; }
+ol[start="10"], ol[start="10xyz"], ol[start="10e10"] { counter-reset: list-item 9; }
+ol[reversed] { counter-reset: reversed(list-item); }
+ol[reversed][start="20"], ol[reversed][start="20xyz"], ol[reversed][start="20e10"] { counter-reset: reversed(list-item) 21; }
+
+/* dir="" */
+[dir=ltr] { direction: ltr; }
+[dir=rtl] { direction: rtl; }
+</style>
+
+<div id="log"></div>
+
+<div id="tests">
+  <li></li>
+  <dir>
+   <li></li>
+  </dir>
+  <dt></dt>
+  <dd></dd>
+  <dl>
+   <dt></dt>
+   <dd></dd>
+  </dl>
+  <menu>
+   <li></li>
+  </menu>
+  <ol>
+   <li></li>
+  </ol>
+  <ul>
+   <li></li>
+  </ul>
+  <dir data-skip><dir></dir></dir>
+  <dir data-skip><menu></menu></dir>
+  <dir data-skip><ul></ul></dir>
+  <menu data-skip><dir></dir></menu>
+  <menu data-skip><menu></menu></menu>
+  <menu data-skip><ul></ul></menu>
+  <ol data-skip><dir></dir></ol>
+  <ol data-skip><menu></menu></ol>
+  <ol data-skip><ul></ul></ol>
+  <ul data-skip><dir></dir></ul>
+  <ul data-skip><menu></menu></ul>
+  <ul data-skip><ul></ul></ul>
+
+  <dir data-skip><dir data-skip><dir></dir></dir></dir>
+  <dir data-skip><dir data-skip><menu></menu></dir></dir>
+  <dir data-skip><dir data-skip><ul></ul></dir></dir>
+  <dir data-skip><menu data-skip><dir></dir></menu></dir>
+  <dir data-skip><menu data-skip><menu></menu></menu></dir>
+  <dir data-skip><menu data-skip><ul></ul></menu></dir>
+  <dir data-skip><ol data-skip><dir></dir></ol></dir>
+  <dir data-skip><ol data-skip><menu></menu></ol></dir>
+  <dir data-skip><ol data-skip><ul></ul></ol></dir>
+  <dir data-skip><ul data-skip><dir></dir></ul></dir>
+  <dir data-skip><ul data-skip><menu></menu></ul></dir>
+  <dir data-skip><ul data-skip><ul></ul></ul></dir>
+
+  <menu data-skip><dir data-skip><dir></dir></dir></menu>
+  <menu data-skip><dir data-skip><menu></menu></dir></menu>
+  <menu data-skip><dir data-skip><ul></ul></dir></menu>
+  <menu data-skip><menu data-skip><dir></dir></menu></menu>
+  <menu data-skip><menu data-skip><menu></menu></menu></menu>
+  <menu data-skip><menu data-skip><ul></ul></menu></menu>
+  <menu data-skip><ol data-skip><dir></dir></ol></menu>
+  <menu data-skip><ol data-skip><menu></menu></ol></menu>
+  <menu data-skip><ol data-skip><ul></ul></ol></menu>
+  <menu data-skip><ul data-skip><dir></dir></ul></menu>
+  <menu data-skip><ul data-skip><menu></menu></ul></menu>
+  <menu data-skip><ul data-skip><ul></ul></ul></menu>
+
+  <ol data-skip><dir data-skip><dir></dir></dir></ol>
+  <ol data-skip><dir data-skip><menu></menu></dir></ol>
+  <ol data-skip><dir data-skip><ul></ul></dir></ol>
+  <ol data-skip><menu data-skip><dir></dir></menu></ol>
+  <ol data-skip><menu data-skip><menu></menu></menu></ol>
+  <ol data-skip><menu data-skip><ul></ul></menu></ol>
+  <ol data-skip><ol data-skip><dir></dir></ol></ol>
+  <ol data-skip><ol data-skip><menu></menu></ol></ol>
+  <ol data-skip><ol data-skip><ul></ul></ol></ol>
+  <ol data-skip><ul data-skip><dir></dir></ul></ol>
+  <ol data-skip><ul data-skip><menu></menu></ul></ol>
+  <ol data-skip><ul data-skip><ul></ul></ul></ol>
+
+  <ul data-skip><dir data-skip><dir></dir></dir></ul>
+  <ul data-skip><dir data-skip><menu></menu></dir></ul>
+  <ul data-skip><dir data-skip><ul></ul></dir></ul>
+  <ul data-skip><menu data-skip><dir></dir></menu></ul>
+  <ul data-skip><menu data-skip><menu></menu></menu></ul>
+  <ul data-skip><menu data-skip><ul></ul></menu></ul>
+  <ul data-skip><ol data-skip><dir></dir></ol></ul>
+  <ul data-skip><ol data-skip><menu></menu></ol></ul>
+  <ul data-skip><ol data-skip><ul></ul></ol></ul>
+  <ul data-skip><ul data-skip><dir></dir></ul></ul>
+  <ul data-skip><ul data-skip><menu></menu></ul></ul>
+  <ul data-skip><ul data-skip><ul></ul></ul></ul>
+
+  <ol type="1"></ol>
+  <ul type="1"></ul>
+  <li type="1"></li>
+  <ol type="a" class="type-a"></ol>
+  <ul type="a" class="type-a"></ul>
+  <li type="a" class="type-a"></li>
+  <ol type="A" class="type-A"></ol>
+  <ul type="A" class="type-A"></ul>
+  <li type="A" class="type-A"></li>
+  <ol type="i" class="type-i"></ol>
+  <ul type="i" class="type-i"></ul>
+  <li type="i" class="type-i"></li>
+  <ol type="I" class="type-I"></ol>
+  <ul type="I" class="type-I"></ul>
+  <li type="I" class="type-I"></li>
+  <ol type="none"></ol>
+  <ul type="none"></ul>
+  <li type="none"></li>
+  <ol type="NONE"></ol>
+  <ul type="NONE"></ul>
+  <li type="NONE"></li>
+  <ol type="disc"></ol>
+  <ul type="disc"></ul>
+  <li type="disc"></li>
+  <ol type="DISC"></ol>
+  <ul type="DISC"></ul>
+  <li type="DISC"></li>
+  <ol type="circle"></ol>
+  <ul type="circle"></ul>
+  <li type="circle"></li>
+  <ol type="CIRCLE"></ol>
+  <ul type="CIRCLE"></ul>
+  <li type="CIRCLE"></li>
+  <ol type="square"></ol>
+  <ul type="square"></ul>
+  <li type="square"></li>
+  <ol type="SQUARE"></ol>
+  <ul type="SQUARE"></ul>
+  <li type="SQUARE"></li>
+
+  <ol>
+    <li value="10"></li>
+    <li value="10xyz"></li>
+    <li value="10e10"></li>
+    <li value="xyz"></li>
+  </ol>
+
+  <ol start="10"><li></li></ol>
+  <ol start="10xyz"><li></li></ol>
+  <ol start="10e10"><li></li></ol>
+  <ol start="xyz"><li></li></ol>
+  <ol reversed><li></li></ol>
+  <ol reversed start="20"><li></li></ol>
+  <ol reversed start="20xyz"><li></li></ol>
+  <ol reversed start="20e10"><li></li></ol>
+  <ol reversed start="xyz"><li></li></ol>
+
+  <ul data-skip dir="rtl"><li dir="ltr"></li></ul>
+  <ul data-skip dir="ltr"><li dir="rtl"></li></ul>
+
+</div>
+
+<div id="refs"></div>
+
+<script>
+  const props = [
+    'display',
+    'margin-top',
+    'margin-right',
+    'margin-bottom',
+    'margin-left',
+    'padding-top',
+    'padding-right',
+    'padding-bottom',
+    'padding-left',
+    'list-style-type',
+    'counter-set',
+    'counter-reset',
+    'counter-increment',
+    'text-align',
+  ];
+  runUAStyleTests(props);
+
+</script>