mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-31 05:09:12 +00:00
LibWeb: Tests for recalculating ordinals after list manipulation
FIXME: Rendering modifications to a list is sometimes not pixel-perfect
vs. reference (likely a bug). After this is fixed, screenshot
tests from this commit will likely fail + can be moved to
ref tests.
This commit is contained in:
Manuel Zahariev
Sam Atkins
parent
20546725be
commit
51b4b4a270
Notes:
github-actions[bot]
2025-06-16 11:46:13 +00:00
Author: https://github.com/manuel-za
Commit: 51b4b4a270
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4442
Reviewed-by: https://github.com/AtkinsSJ ✅
Reviewed-by: https://github.com/InvalidUsernameException
Reviewed-by: https://github.com/R-Goc
Reviewed-by: https://github.com/skyz1 ✅
45 changed files with 1068 additions and 0 deletions
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<ol id="ol1">
|
||||
<li>1</li>
|
||||
<!-- Remove x -->
|
||||
<li>2</li>
|
||||
<div id="div1">
|
||||
<li>3</li>
|
||||
<!-- Remove div / y -->
|
||||
<li>4</li>
|
||||
</div>
|
||||
<div>
|
||||
<ol reversed start=20 id="ol2">
|
||||
<div> <!-- insert start -->
|
||||
<li>20</li>
|
||||
<li>19</li>
|
||||
</div>
|
||||
<p id="p1">
|
||||
<span>
|
||||
<li>18</li>
|
||||
</span>
|
||||
</p>
|
||||
<li>17</li>
|
||||
<li>16</li> <!-- append -->
|
||||
<li>15</li> <!-- insert last -->
|
||||
</ol>
|
||||
</div>
|
||||
<hr />
|
||||
<ol >
|
||||
<li value=30>30</li>
|
||||
<div>
|
||||
<li>31</li>
|
||||
</div>
|
||||
<div><div>
|
||||
<li>32</li>
|
||||
<li>33</li>
|
||||
<li>34</li>
|
||||
</div></div>
|
||||
<ol start=40>
|
||||
<li>40</li>
|
||||
<div style="display:list-item">41</div>
|
||||
<div id="div2"><div><div>
|
||||
<span style="display:list-item">42</span> <!-- insert before move -->
|
||||
</div></div></div>
|
||||
<p id="p2" style="display:list-item">43</p>
|
||||
</ol>
|
||||
<div><div><div id="div3">
|
||||
<li>35</li>
|
||||
<!-- Remove child -->
|
||||
<div></div>
|
||||
<li>36</li>
|
||||
<li>37</li>
|
||||
</div></div></div>
|
||||
</ol>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
</ol>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<ol>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<div>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</div>
|
||||
</ol>
|
||||
</body>
|
||||
</html>
|
||||
10
Tests/LibWeb/Ref/expected/ol-render-node-append-ref.html
Normal file
10
Tests/LibWeb/Ref/expected/ol-render-node-append-ref.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<ol>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</ol>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<ol>
|
||||
<li>One</li>
|
||||
<div>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</div>
|
||||
<li>Four</li>
|
||||
</ol>
|
||||
<ol reversed>
|
||||
<li>Four</li>
|
||||
<div>
|
||||
<li>Three</li>
|
||||
<li>Two</li>
|
||||
</div>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<ol>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</ol>
|
||||
<ol reversed>
|
||||
<li>Three</li>
|
||||
<li>Two</li>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<ol>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<div>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</div>
|
||||
<li>Five</li>
|
||||
</ol>
|
||||
<ol reversed>
|
||||
<li>Five</li>
|
||||
<li>Four</li>
|
||||
<div>
|
||||
<li>Three</li>
|
||||
<li>Two</li>
|
||||
</div>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<ol>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</ol>
|
||||
<ol reversed>
|
||||
<li>Three</li>
|
||||
<li>Two</li>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<ol>
|
||||
<div>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
</div>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</ol>
|
||||
<ol reversed>
|
||||
<div>
|
||||
<li>Four</li>
|
||||
<li>Three</li>
|
||||
</div>
|
||||
<li>Two</li>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<ol>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</ol>
|
||||
<ol reversed>
|
||||
<li>Three</li>
|
||||
<li>Two</li>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<ol id="ol">
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<div>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</div>
|
||||
</ol>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<ol id="ol">
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</ol>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<ol>
|
||||
<div>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</div>
|
||||
</ol>
|
||||
<ol reversed>
|
||||
<div>
|
||||
<li>Three</li>
|
||||
<li>Two</li>
|
||||
<li>One</li>
|
||||
<div>
|
||||
</ol>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<ol>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
<ol>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
</body>
|
||||
15
Tests/LibWeb/Ref/expected/ol-render-node-prepend-ref.html
Normal file
15
Tests/LibWeb/Ref/expected/ol-render-node-prepend-ref.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<ol>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</ol>
|
||||
<ol reversed>
|
||||
<li>Three</li>
|
||||
<li>Two</li>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
</body>
|
||||
</html>
|
||||
11
Tests/LibWeb/Ref/expected/ol-render-node-remove-ref.html
Normal file
11
Tests/LibWeb/Ref/expected/ol-render-node-remove-ref.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<ol>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
</ol>
|
||||
<ol reversed>
|
||||
<li>Two</li>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
</body>
|
||||
100
Tests/LibWeb/Ref/input/ol-render-multiple-changes.html
Normal file
100
Tests/LibWeb/Ref/input/ol-render-multiple-changes.html
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-multiple-changes-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol1">
|
||||
<li>1</li>
|
||||
<li id="li1">x</li>
|
||||
<!-- Remove x -->
|
||||
<li>2</li>
|
||||
<div id="div1">
|
||||
<li>3</li>
|
||||
<div id="div2">
|
||||
<li>y</li>
|
||||
<li>z</li>
|
||||
</div>
|
||||
<!-- Remove div / y -->
|
||||
<li>4</li>
|
||||
</div>
|
||||
<div>
|
||||
<ol id="ol2" reversed start=20>
|
||||
<!-- insert start -->
|
||||
<p id="p1">
|
||||
<span>
|
||||
<li>18</li>
|
||||
</span>
|
||||
</p>
|
||||
<li>17</li>
|
||||
<!-- append -->
|
||||
<!-- insert last -->
|
||||
</ol>
|
||||
</div>
|
||||
<hr />
|
||||
<ol >
|
||||
<li value=30>30</li>
|
||||
<div>
|
||||
<li>31</li>
|
||||
</div>
|
||||
<div><div>
|
||||
<li>32</li>
|
||||
<li>33</li>
|
||||
<li>34</li>
|
||||
</div></div>
|
||||
<ol id="ol3" start=40>
|
||||
<li>40</li>
|
||||
<div style="display:list-item">41</div>
|
||||
<p id="p2" style="display:list-item">43</p>
|
||||
</ol>
|
||||
<div id="div5"><div><div> <!-- insert before p2 (move) -->
|
||||
<span style="display:list-item">42</span>
|
||||
</div></div></div>
|
||||
<div><div><div id="div6">
|
||||
<li>35</li>
|
||||
<div>
|
||||
<span id="span1" style="display:list-item">U</span>
|
||||
</div>
|
||||
<!-- Remove child -->
|
||||
<li>36</li>
|
||||
<li>37</li>
|
||||
</div></div></div>
|
||||
</ol>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
document.getElementById("li1").remove();
|
||||
document.getElementById("div2").remove();
|
||||
|
||||
const ol2 = document.getElementById("ol2");
|
||||
const p1 = document.getElementById("p1");
|
||||
const div3 = document.createElement("div");
|
||||
div3.innerHTML = "<div><li>20</li><li>19</li></div>";
|
||||
|
||||
ol2.insertBefore( div3, p1 );
|
||||
|
||||
const li16 = document.createElement("li");
|
||||
li16.innerHTML = "16";
|
||||
const li15 = document.createElement("li");
|
||||
li15.innerHTML = "15";
|
||||
|
||||
ol2.appendChild( li16 );
|
||||
ol2.insertBefore( li15, null );
|
||||
|
||||
const ol3 = document.getElementById("ol3");
|
||||
const p2 = document.getElementById("p2");
|
||||
const div5 = document.getElementById("div5");
|
||||
|
||||
ol3.insertBefore( div5, p2 );
|
||||
document.getElementById("span1").remove();
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
26
Tests/LibWeb/Ref/input/ol-render-node-append-group.html
Normal file
26
Tests/LibWeb/Ref/input/ol-render-node-append-group.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-append-group-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol">
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol = document.getElementById("ol");
|
||||
const div = document.createElement("div");
|
||||
div.innerHTML = "<li>Three</li><li>Four</li>";
|
||||
|
||||
ol.appendChild( div );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
26
Tests/LibWeb/Ref/input/ol-render-node-append.html
Normal file
26
Tests/LibWeb/Ref/input/ol-render-node-append.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-append-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol">
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol = document.getElementById("ol");
|
||||
const three = document.createElement("li");
|
||||
three.innerHTML = "Three";
|
||||
|
||||
ol.appendChild( three );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-insert-before-child-group-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol1">
|
||||
<li>One</li>
|
||||
<li id="four">Four</li>
|
||||
</ol>
|
||||
<ol reversed id="ol2">
|
||||
<li>Four</li>
|
||||
<li id="one">One</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol1 = document.getElementById("ol1");
|
||||
const ol2 = document.getElementById("ol2");
|
||||
const four = document.getElementById("four");
|
||||
const one = document.getElementById("one");
|
||||
|
||||
const div1 = document.createElement("div");
|
||||
div1.innerHTML = "<li>Two</li><li>Three</li>";
|
||||
|
||||
const div2 = document.createElement("div");
|
||||
div2.innerHTML = "<li>Three</li><li>Two</li>";
|
||||
|
||||
ol1.insertBefore( div1, four );
|
||||
ol2.insertBefore( div2, one );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-insert-before-child-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol1">
|
||||
<li>One</li>
|
||||
<li id="three">Three</li>
|
||||
</ol>
|
||||
<ol reversed id="ol2">
|
||||
<li>Three</li>
|
||||
<li id="one">One</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol1 = document.getElementById("ol1");
|
||||
const ol2 = document.getElementById("ol2");
|
||||
const three = document.getElementById("three");
|
||||
const one = document.getElementById("one");
|
||||
|
||||
const two1 = document.createElement("li");
|
||||
two1.innerHTML = "Two";
|
||||
|
||||
const two2 = document.createElement("li");
|
||||
two2.innerHTML = "Two";
|
||||
|
||||
ol1.insertBefore( two1, three );
|
||||
ol2.insertBefore( two2, one );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-insert-existing-child-group-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol1">
|
||||
<li>One</li>
|
||||
<div id="div1">
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</div>
|
||||
<li>Two</li>
|
||||
<li id="five">Five</li>
|
||||
</ol>
|
||||
<ol reversed id="ol2">
|
||||
<li>Five</li>
|
||||
<div id="div2">
|
||||
<li>Three</li>
|
||||
<li>Two</li>
|
||||
</div>
|
||||
<li>Four</li>
|
||||
<li id="one">One</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
|
||||
const ol1 = document.getElementById("ol1");
|
||||
const div1 = document.getElementById("div1");
|
||||
const five = document.getElementById("five");
|
||||
|
||||
const ol2 = document.getElementById("ol2");
|
||||
const div2 = document.getElementById("div2");
|
||||
const one = document.getElementById("one");
|
||||
|
||||
ol1.insertBefore( div1, five );
|
||||
ol2.insertBefore( div2, one );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-insert-existing-child-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol1">
|
||||
<li id="two1">Two</li>
|
||||
<li>One</li>
|
||||
<li id="three1">Three</li>
|
||||
</ol>
|
||||
<ol reversed id="ol2">
|
||||
<li>Three</li>
|
||||
<li id="one2">One</li>
|
||||
<li id="two2">Two</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
|
||||
const ol1 = document.getElementById("ol1");
|
||||
const two1 = document.getElementById("two1");
|
||||
const three1 = document.getElementById("three1");
|
||||
|
||||
const ol2 = document.getElementById("ol2");
|
||||
const two2 = document.getElementById("two2");
|
||||
const one2 = document.getElementById("one2");
|
||||
|
||||
ol1.insertBefore( two1, three1 );
|
||||
ol2.insertBefore( two2, one2 );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-insert-first-group-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol1">
|
||||
<li id="three">Three</li>
|
||||
<li>Four</li>
|
||||
</ol>
|
||||
<ol reversed id="ol2">
|
||||
<li id="two">Two</li>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol1 = document.getElementById("ol1");
|
||||
const three = document.getElementById("three");
|
||||
|
||||
const ol2 = document.getElementById("ol2");
|
||||
const two = document.getElementById("two");
|
||||
|
||||
const div1 = document.createElement("div");
|
||||
div1.innerHTML = "<li>One</li><li>Two</li>";
|
||||
|
||||
const div2 = document.createElement("div");
|
||||
div2.innerHTML = "<li>Four</li><li>Three</li>";
|
||||
|
||||
ol1.insertBefore( div1, three );
|
||||
ol2.insertBefore( div2, two );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
39
Tests/LibWeb/Ref/input/ol-render-node-insert-first.html
Normal file
39
Tests/LibWeb/Ref/input/ol-render-node-insert-first.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-insert-first-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol1">
|
||||
<li id="two1">Two</li>
|
||||
<li>Three</li>
|
||||
</ol>
|
||||
<ol reversed id="ol2">
|
||||
<li id="two2">Two</li>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol1 = document.getElementById("ol1");
|
||||
const two1 = document.getElementById("two1");
|
||||
|
||||
const ol2 = document.getElementById("ol2");
|
||||
const two = document.getElementById("two2");
|
||||
|
||||
const one = document.createElement("li");
|
||||
one.innerHTML = "One";
|
||||
|
||||
const three = document.createElement("li");
|
||||
three.innerHTML = "Three";
|
||||
|
||||
ol1.insertBefore( one, two1 );
|
||||
ol2.insertBefore( three, two2 );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
27
Tests/LibWeb/Ref/input/ol-render-node-insert-last-group.html
Normal file
27
Tests/LibWeb/Ref/input/ol-render-node-insert-last-group.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-insert-last-group-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol">
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol = document.getElementById("ol");
|
||||
|
||||
const div = document.createElement("div");
|
||||
div.innerHTML = "<li>Three</li><li>Four</li>";
|
||||
|
||||
ol.insertBefore( div, null );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
27
Tests/LibWeb/Ref/input/ol-render-node-insert-last.html
Normal file
27
Tests/LibWeb/Ref/input/ol-render-node-insert-last.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-insert-last-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol">
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol = document.getElementById("ol");
|
||||
|
||||
const three = document.createElement("li");
|
||||
three.innerHTML = "Three";
|
||||
|
||||
ol.insertBefore( three, null );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-insert-no-child-group-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol1">
|
||||
</ol>
|
||||
<ol reversed id="ol2">
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol1 = document.getElementById("ol1");
|
||||
const ol2 = document.getElementById("ol2");
|
||||
|
||||
const div1 = document.createElement("div");
|
||||
div1.innerHTML = "<li>One</li><li>Two</li><li>Three</li>";
|
||||
|
||||
const div2 = document.createElement("div");
|
||||
div2.innerHTML = "<li>Three</li><li>Two</li><li>One</li>";
|
||||
|
||||
ol1.insertBefore( div1, null );
|
||||
ol2.insertBefore( div2, null );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
32
Tests/LibWeb/Ref/input/ol-render-node-insert-no-child.html
Normal file
32
Tests/LibWeb/Ref/input/ol-render-node-insert-no-child.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-insert-no-child-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol1">
|
||||
</ol>
|
||||
<ol reversed id="ol2">
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol1 = document.getElementById("ol1");
|
||||
const ol2 = document.getElementById("ol2");
|
||||
|
||||
const one1 = document.createElement("li");
|
||||
one1.innerHTML = "One";
|
||||
|
||||
const one2 = document.createElement("li");
|
||||
one2.innerHTML = "One";
|
||||
|
||||
ol1.insertBefore( one1, null );
|
||||
ol2.insertBefore( one2, null );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
36
Tests/LibWeb/Ref/input/ol-render-node-prepend.html
Normal file
36
Tests/LibWeb/Ref/input/ol-render-node-prepend.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-prepend-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol1">
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</ol>
|
||||
<ol id="ol2" reversed>
|
||||
<li>Two</li>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol1 = document.getElementById("ol1");
|
||||
const ol2 = document.getElementById("ol2");
|
||||
|
||||
const one = document.createElement("li");
|
||||
one.innerHTML = "One";
|
||||
|
||||
const three = document.createElement("li");
|
||||
three.innerHTML = "Three";
|
||||
|
||||
ol1.prepend( one );
|
||||
ol2.prepend( three );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-remove-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol1">
|
||||
<li>One</li>
|
||||
<div id="div1">
|
||||
<li>x</li>
|
||||
<li>y</li>
|
||||
<li>z</li>
|
||||
</div>
|
||||
<li>Two</li>
|
||||
</ol>
|
||||
<ol reversed id="ol2">
|
||||
<li>Two</li>
|
||||
<div id="div2">
|
||||
<li>z</li>
|
||||
<li>y</li>
|
||||
<li>x</li>
|
||||
</div>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol1 = document.getElementById("ol1");
|
||||
const div1 = document.getElementById("div1");
|
||||
ol1.removeChild(div1);
|
||||
|
||||
const ol2 = document.getElementById("ol2");
|
||||
const div2 = document.getElementById("div2");
|
||||
ol2.removeChild(div2);
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
34
Tests/LibWeb/Ref/input/ol-render-node-remove-child.html
Normal file
34
Tests/LibWeb/Ref/input/ol-render-node-remove-child.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-remove-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol1">
|
||||
<li>One</li>
|
||||
<li id="x1">X1</li>
|
||||
<li>Two</li>
|
||||
</ol>
|
||||
<ol reversed id="ol2">
|
||||
<li>Two</li>
|
||||
<li id="x2">X2</li>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol1 = document.getElementById("ol1");
|
||||
const x1 = document.getElementById("x1");
|
||||
ol1.removeChild(x1);
|
||||
|
||||
const ol2 = document.getElementById("ol2");
|
||||
const x2 = document.getElementById("x2");
|
||||
ol2.removeChild(x2);
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
32
Tests/LibWeb/Ref/input/ol-render-node-remove-first.html
Normal file
32
Tests/LibWeb/Ref/input/ol-render-node-remove-first.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-remove-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol1">
|
||||
<li id="x1">X1</li>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
</ol>
|
||||
<ol reversed id="ol2">
|
||||
<li id="x2">X2</li>
|
||||
<li>Two</li>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const x1 = document.getElementById("x1");
|
||||
x1.remove();
|
||||
|
||||
const x2 = document.getElementById("x2");
|
||||
x2.remove();
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
32
Tests/LibWeb/Ref/input/ol-render-node-remove.html
Normal file
32
Tests/LibWeb/Ref/input/ol-render-node-remove.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-remove-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol id="ol1">
|
||||
<li>One</li>
|
||||
<li id="x1">X1</li>
|
||||
<li>Two</li>
|
||||
</ol>
|
||||
<ol reversed id="ol2">
|
||||
<li>Two</li>
|
||||
<li id="x2">X2</li>
|
||||
<li>One</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const x1 = document.getElementById("x1");
|
||||
x1.remove();
|
||||
|
||||
const x2 = document.getElementById("x2");
|
||||
x2.remove();
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<img src="../images/ol-render-node-append-group-reversed-ref.png">
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<img src="../images/ol-render-node-append-reversed-ref.png">
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<img src="../images/ol-render-node-insert-last-group-reversed-ref.png">
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<img src="../images/ol-render-node-insert-last-reversed-ref.png">
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-append-group-reversed-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol reversed id="ol">
|
||||
<li>Four</li>
|
||||
<li>Three</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol = document.getElementById("ol");
|
||||
const div = document.createElement("div");
|
||||
div.innerHTML = "<li>Two</li><li>One</li>";
|
||||
|
||||
ol.appendChild( div );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-append-reversed-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol reversed id="ol">
|
||||
<li>Three</li>
|
||||
<li>Two</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol = document.getElementById("ol");
|
||||
const one = document.createElement("li");
|
||||
one.innerHTML = "One";
|
||||
|
||||
ol.appendChild( one );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-insert-last-group-reversed-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol reversed id="ol">
|
||||
<li>Four</li>
|
||||
<li>Three</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol = document.getElementById("ol");
|
||||
|
||||
const div = document.createElement("div");
|
||||
div.innerHTML = "<li>Two</li><li>One</li>";
|
||||
|
||||
ol.insertBefore( div, null );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<link rel="match" href="../expected/ol-render-node-insert-last-reversed-ref.html" />
|
||||
</head>
|
||||
<html class="reftest-wait">
|
||||
<body>
|
||||
<ol reversed id="ol">
|
||||
<li>Three</li>
|
||||
<li>Two</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Two nested requestAnimationFrame() calls to force code execution _after_ initial paint
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const ol = document.getElementById("ol");
|
||||
|
||||
const one = document.createElement("li");
|
||||
one.innerHTML = "One";
|
||||
|
||||
ol.insertBefore( one, null );
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue