Bug 1516988 [wpt PR 14689] - Move test cases related with li with overflow/table/etc. to WPT, a=testonly
authorcathiechen <cathiechen@igalia.com>
Thu, 31 Jan 2019 15:45:20 +0000
changeset 457889 e38a87ea1142063446fd7d8bd3e192ecff9aa0fe
parent 457888 424661ad59d3c1ac94612e09fe4ba49f03830354
child 457890 e8d71369aaa1f385d074caa061037100bcb909bc
push id35518
push useropoprus@mozilla.com
push dateFri, 08 Feb 2019 09:55:14 +0000
treeherdermozilla-central@3a3e393396f4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1516988, 14689, 1392693, 620613
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1516988 [wpt PR 14689] - Move test cases related with li with overflow/table/etc. to WPT, a=testonly Automatic update from web-platform-tests Move test cases related with li with overflow/table/etc. to WPT Move the related cases to WPT so they could be shared and improve the behavior of list item. Change-Id: Id7ffd88b32dde6f5b70de90659fa5ef3ddf57787 Reviewed-on: https://chromium-review.googlesource.com/c/1392693 Reviewed-by: Frédéric Wang <fwang@igalia.com> Reviewed-by: Rob Buis <rbuis@igalia.com> Reviewed-by: Koji Ishii <kojii@chromium.org> Reviewed-by: Manuel Rego <rego@igalia.com> Commit-Queue: cathie chen <cathiechen@igalia.com> Cr-Commit-Position: refs/heads/master@{#620613} -- wpt-commits: f5fcb7d4a4f3f06f228043874f56e31bc04feb19 wpt-pr: 14689
testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-001-ref.html
testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-001.html
testing/web-platform/tests/css/css-lists/li-with-overflow-hidden-change-list-style-position-001-ref.html
testing/web-platform/tests/css/css-lists/li-with-overflow-hidden-change-list-style-position-001.html
testing/web-platform/tests/css/css-lists/list-and-block-textarea-001.html
testing/web-platform/tests/css/css-lists/list-and-flex-001-ref.html
testing/web-platform/tests/css/css-lists/list-and-flex-001.html
testing/web-platform/tests/css/css-lists/list-and-grid-001-ref.html
testing/web-platform/tests/css/css-lists/list-and-grid-001.html
testing/web-platform/tests/css/css-lists/list-and-margin-collapse-001.html
testing/web-platform/tests/css/css-lists/list-and-writing-mode-001.html
testing/web-platform/tests/css/css-lists/list-marker-with-lineheight-and-overflow-hidden-001-ref.html
testing/web-platform/tests/css/css-lists/list-marker-with-lineheight-and-overflow-hidden-001.html
testing/web-platform/tests/css/css-lists/list-with-image-display-changed-001-ref.html
testing/web-platform/tests/css/css-lists/list-with-image-display-changed-001.html
testing/web-platform/tests/css/css-lists/resources/white.gif
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Lists: Add inline child after marker</title>
+
+<p>The test passes if you see the list marker followed by the text "inline" and "axxx" in a line below.</p>
+
+<ul>
+  <li>
+    <span>inline</span>
+    <div style="overflow:hidden;">
+      <span>a</span>xxx
+    </div>
+  </li>
+</ul>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/add-inline-child-after-marker-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Lists: Add inline child after marker</title>
+<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists">
+<link rel=match href="add-inline-child-after-marker-001-ref.html">
+<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=344941 -->
+
+<p>The test passes if you see the list marker followed by the text "inline" and "axxx" in a line below.</p>
+
+<ul>
+  <li id="liTarget">
+    <div id="divTarget" style="overflow:hidden;">
+      <span>a</span>xxx
+    </div>
+  </li>
+</ul>
+<script>
+  document.body.offsetHeight;
+  var new_span=document.createElement("span");
+  var text_node=document.createTextNode("inline");
+  new_span.appendChild(text_node);
+
+  var div_target=document.getElementById("divTarget");
+  var li_target=document.getElementById("liTarget");
+  li_target.insertBefore(new_span,div_target);
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/li-with-overflow-hidden-change-list-style-position-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Lists: test inside and outside switch</title>
+
+<p>The test passes if the first li is inside and the second one is outside.</p>
+
+<ul>
+  <li style="list-style-position: inside;">
+    <div style="overflow:hidden;">
+      outside to inside
+    </div>
+  </li>
+</ul>
+
+<ul>
+  <li style="list-style-position: outside;">
+    <div style="overflow:hidden;">
+      inside to outside
+    </div>
+  </li>
+</ul>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/li-with-overflow-hidden-change-list-style-position-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Lists: test inside and outside switch</title>
+<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists">
+<link rel=match href="li-with-overflow-hidden-change-list-style-position-001-ref.html">
+<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=344941 -->
+
+<p>The test passes if the first li is inside and the second one is outside.</p>
+
+<ul>
+  <li id="outSide" style="list-style-position: outside;">
+    <div style="overflow:hidden;">
+      outside to inside
+    </div>
+  </li>
+</ul>
+
+<ul>
+  <li id="inSide" style="list-style-position: inside;">
+    <div style="overflow:hidden;">
+      inside to outside
+    </div>
+  </li>
+</ul>
+<script>
+  document.body.offsetHeight;
+
+  var outside_li=document.getElementById("outSide");
+  outside_li.style.listStylePosition = "inside";
+  document.body.offsetHeight;
+
+  var inside_li=document.getElementById("inSide");
+  inside_li.style.listStylePosition = "outside";
+  document.body.offsetHeight;
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/list-and-block-textarea-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Lists: test list with textarea as its first child</title>
+<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists">
+<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=767408 -->
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+textarea {
+  border: 0px;
+  padding: 0px;
+}
+</style>
+
+<div id="log"></div>
+
+<ul>
+  <li id="target">
+    <textarea rows="3" cols="20" style="display:block; height:45px">
+      hello
+    </textarea>
+  </li>
+</ul>
+
+<script>
+test(function() {
+  var height = document.getElementById("target").offsetHeight;
+  assert_equals(height, 45, "the height of li should be 45px, and no extra line generated")
+}, "list and block textarea");
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/list-and-flex-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Lists: test list with flex as its first child</title>
+
+<p>There should be no extra line generated between the marker and the flex.</p>
+
+<ul>
+  <li>
+    <div style="border: 1px black solid;">
+      <div style="display: inline-flex; align-items: flex-end; height: 200px;">
+        <span style="line-height: 50px">text</span>
+      </div>
+    </div>
+  </li>
+</ul>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/list-and-flex-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Lists: test list with flex as its first child</title>
+<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists">
+<link rel=match href="list-and-flex-001-ref.html">
+<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=767408 -->
+
+<p>There should be no extra line generated between the marker and the flex.</p>
+
+<ul>
+  <li>
+    <div style="border: 1px black solid;">
+      <div style="display: flex; align-items: flex-end; height: 200px;">
+        <span style="line-height: 50px">text</span>
+      </div>
+    </div>
+  </li>
+</ul>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/list-and-grid-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Lists: test list with grid as its first child</title>
+
+<p>There should be no extra line generated between the marker and the grid.</p>
+
+<ul>
+  <li>
+    <div style="display: inline-grid; grid-template-rows: 100px; align-items: center;">
+      <div>grid</div>
+    </div>
+  </li>
+</ul>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/list-and-grid-001.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Lists: test list with grid as its first child</title>
+<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists">
+<link rel=match href="list-and-grid-001-ref.html">
+<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=767408 -->
+
+<p>There should be no extra line generated between the marker and the grid.</p>
+
+<ul>
+  <li>
+    <div style="display: grid; grid-template-rows: 100px; align-items: center;">
+      <div>grid</div>
+    </div>
+  </li>
+</ul>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/list-and-margin-collapse-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Lists: test the margin collapse of marker</title>
+<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists">
+<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=767408 -->
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<ul id="target" style="margin-top:100px;">
+  <li>
+    <div style="overflow:hidden; margin-top:100px; height:25px;"><a href="#">xxx</a></div>
+  </li>
+</ul>
+
+<script>
+test(function() {
+  var height = document.getElementById("target").clientHeight;
+  assert_equals(height, 25, "the height of ul should be 25px")
+}, "list and margin collapse");
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/list-and-writing-mode-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Lists: test list with root writing-mode as its first child</title>
+<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists">
+<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=767408 -->
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<ul>
+  <li id="target">
+    <div style="writing-mode: vertical-lr; height: 45px;">a b c</div>
+  </li>
+</ul>
+
+<script>
+test(function() {
+  var height = document.getElementById("target").offsetHeight;
+  assert_equals(height, 45, "the height of li should be 45px, and no extra line generated")
+}, "list and writing-mode");
+</script>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/list-marker-with-lineheight-and-overflow-hidden-001-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Lists: test list with overflow:hidden and line-height firstchild</title>
+
+<p>This test passes if there is a marker for each li and followed by "text" in the same line.</p>
+
+<ul>
+  <li>
+    <div style="line-height:100px;">
+      <span>text</span>
+    </div>
+  </li>
+</ul>
+<ul>
+  <li style="list-style-image: url(resources/white.gif);">
+    <div style="line-height:100px;">text</div>
+  </li>
+</ul>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/list-marker-with-lineheight-and-overflow-hidden-001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Lists: test list with overflow:hidden and line-height firstchild</title>
+<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists">
+<link rel=match href="list-marker-with-lineheight-and-overflow-hidden-001-ref.html">
+<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=344941 -->
+
+<p>This test passes if there is a marker for each li and followed by "text" in the same line.</p>
+
+<ul>
+  <li>
+    <div style="overflow:hidden; line-height:100px;">
+      <span>text</span>
+    </div>
+  </li>
+</ul>
+
+<ul>
+  <li style="list-style-image: url(resources/white.gif);">
+    <div style="overflow:hidden; line-height:100px;">text</div>
+  </li>
+</ul>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/list-with-image-display-changed-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Lists: test list with firstchild changing display</title>
+
+<style>
+li { border: 3px solid black; margin: 3px; }
+img { display: block; }
+</style>
+
+<ul>
+  <li>
+    <a href="#"><img src="./resources/white.gif" width=32 height=32 /></a>
+    Some other text
+  </li>
+</ul>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/list-with-image-display-changed-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Lists: test list with firstchild changing display</title>
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/2787">
+<link rel=match href="list-with-image-display-changed-001-ref.html">
+<!-- https://bugs.chromium.org/p/chromium/issues/detail?id=715288 -->
+<meta name="assert" content="
+    After the display of img being changed from block to inline, then back to block,
+    the final position of marker should be the same as the beginning." />
+
+<style>
+li { border: 3px solid black; margin: 3px; }
+img { display: block; }
+</style>
+
+<ul>
+  <li>
+    <a href="#"><img src="./resources/white.gif" width=32 height=32 /></a>
+    Some other text
+  </li>
+</ul>
+<script>
+  document.body.offsetTop;
+  var img = document.querySelector('a img');
+  img.style.display = 'inline';
+  img.offsetWidth;
+  img.style.display = 'block';
+</script>
+
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..3aa2098dc8817f5360d13440f3d6245a030dc31d
GIT binary patch
literal 192
zc${<hbhEHb<YM4rI3mpO|Ns9fQ>I+Ic5Tj_IcwLhegFP_a&oelmseC&)V+K6o<D!y
z($dn?)3bH!*1dc8W@l#?7Z)EpcI@1_a}2}*#h)yU3=F~yIv@_nP6t-o2PUpTny!yj
zZ261!^l+VNc)-K$bg4mzSEYSIL$PBBQ&gkM<C{#}o=y`dm=v(ZCNQ*0#4!i5G&wjN
Jnk>Lz4FG0*KV<*_