blob-merging-and-retained-display-list.html (2119B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <script> 4 var r = 40; 5 var xmlns = "http://www.w3.org/2000/svg"; 6 const raf = f => requestAnimationFrame(f); 7 function rect(x, y) { 8 var r = document.createElementNS (xmlns, "rect"); 9 r.setAttribute("x", x); 10 r.setAttribute("y", y); 11 r.setAttribute("width", "100"); 12 r.setAttribute("height", "100"); 13 r.setAttribute("fill", "blue"); 14 return r; 15 } 16 function f1() { 17 svg = document.getElementById("cnvs"); 18 svg.appendChild(rect(0, 0)); 19 svg.appendChild(rect(600, 0)); 20 svg.appendChild(rect(600, 400)); 21 svg.appendChild(rect(0, 400)); 22 let a = rect(110, 110); 23 let b = rect(120, 120); 24 let c = rect(130, 130); 25 let d = rect(140, 140); 26 let a2 = rect(310, 140); 27 let b2 = rect(320, 130); 28 let c2 = rect(330, 120); 29 let d2 = rect(340, 110); 30 raf(() => { 31 svg.appendChild(a); 32 svg.appendChild(b); 33 svg.appendChild(c); 34 svg.appendChild(d); 35 raf(() => { 36 // the display list partial update will end up with these items before x,y,w,z 37 svg.appendChild(d2); 38 svg.appendChild(c2); 39 svg.appendChild(b2); 40 svg.appendChild(a2); 41 raf(() => { 42 // this forces all the items to be ordered and makes the new display list 43 // contain reorded items outside of the invalid area 44 let mix = rect(220, 220); 45 svg.insertBefore(mix, d2); 46 raf(() => { document.documentElement.className = "" }); 47 }) 48 }) 49 }) 50 } 51 52 function f() { 53 requestAnimationFrame(f1); 54 } 55 56 onload = f; 57 </script> 58 59 <body> 60 <svg width="700" height="600" id=cnvs> 61 62 </svg>