element-reassigned-to-slot-in-skipped-subtree.html (1703B)
1 <!doctype HTML> 2 <html class="reftest-wait"> 3 <meta charset="utf8"> 4 <title>CSS Content Visibility: element reslotting</title> 5 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 7 <link rel="match" href="container-ref.html"> 8 <meta name="assert" content="element is correctly removed when slot assignment takes it into a skipped slot"> 9 10 <script src="/common/reftest-wait.js"></script> 11 12 <script> 13 window.customElements.define("my-element", class extends HTMLElement { 14 connectedCallback() { 15 if (this.shadowRoot) { 16 this.computeEdges_(); 17 return; 18 } 19 20 this.attachShadow({ mode: 'open' }).innerHTML = ` 21 <style> 22 #locked { 23 display: block; 24 content-visibility: hidden; 25 } 26 </style> 27 <slot name=unlocked></slot> 28 <div id=locked> 29 <slot name=locked></slot> 30 </div> 31 `; 32 } 33 }); 34 </script> 35 36 <style> 37 #container { 38 width: 150px; 39 height: 150px; 40 background: lightblue; 41 } 42 43 div { 44 width: 50px; 45 height: 50px; 46 } 47 .composited { will-change: transform; } 48 #one { background: pink; } 49 #two { background: red; } 50 </style> 51 52 <div id=container> 53 <my-element> 54 <div id=one slot=unlocked>FAIL</div> 55 <div id=two slot=locked>FAIL</div> 56 </my-element> 57 </div> 58 59 <script> 60 // Ensure everything is loaded and rendered. 61 onload = () => 62 requestAnimationFrame(() => 63 requestAnimationFrame(() => 64 requestAnimationFrame(() => { 65 // Reslot the element and composite the other one. 66 one.slot = "locked"; 67 two.classList.add("composited"); 68 requestAnimationFrame(takeScreenshot); 69 }))); 70 </script>