element-reassigned-to-skipped-slot.html (1672B)
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 slot[name=locked] { 23 display: block; 24 content-visibility: hidden; 25 } 26 </style> 27 <slot name=unlocked></slot> 28 <slot name=locked></slot> 29 `; 30 } 31 }); 32 </script> 33 34 <style> 35 #container { 36 width: 150px; 37 height: 150px; 38 background: lightblue; 39 } 40 41 div { 42 width: 50px; 43 height: 50px; 44 } 45 .composited { will-change: transform; } 46 #one { background: pink; } 47 #two { background: red; } 48 </style> 49 50 <div id=container> 51 <my-element> 52 <div id=one slot=unlocked>FAIL</div> 53 <div id=two slot=locked>FAIL</div> 54 </my-element> 55 </div> 56 57 <script> 58 // Ensure everything is loaded and rendered. 59 onload = () => 60 requestAnimationFrame(() => 61 requestAnimationFrame(() => 62 requestAnimationFrame(() => { 63 // Reslot the element and composite the other one. 64 one.slot = "locked"; 65 two.classList.add("composited"); 66 requestAnimationFrame(takeScreenshot); 67 }))); 68 </script>