change-list-descendant-display.html (1275B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Lists: test the change of descendant's display</title> 5 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 6 <link rel="match" href="change-list-descendant-display-ref.html"> 7 <link rel="help" href="https://www.w3.org/TR/CSS22/generate.html#lists"> 8 <meta name="assert" content="Check that an outside marker looks good when 9 the descendant of the list item that contains the 1st line box changes 10 from 'display: block' to 'display: inline' or vice versa."> 11 <style> 12 .inline { 13 display: inline; 14 } 15 </style> 16 <ol> 17 <li><div class="target">text</div></li> 18 <li><div class="target inline">text</div></li> 19 <li><div><div class="target">text</div></div></li> 20 <li><div><div class="target inline">text</div></div></li> 21 <li><div><div><div class="target">text</div></div></div></li> 22 <li><div><div><div class="target inline">text</div></div></div></li> 23 </ol> 24 <script src="/common/reftest-wait.js"></script> 25 <script> 26 addEventListener("load", async () => { 27 for (let target of document.querySelectorAll(".target")) { 28 await new Promise(resolve => requestAnimationFrame(resolve)); 29 target.classList.toggle("inline"); 30 } 31 takeScreenshot(); 32 }, {once: true}); 33 </script> 34 </html>