mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-26 18:59:35 +00:00
51b4b4a270
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.
100 lines
2.7 KiB
HTML
100 lines
2.7 KiB
HTML
<!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>
|