special-elements-crash.html (3411B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers"> 4 <style> 5 body { 6 margin: 0; 7 } 8 .table { 9 display: table; 10 width: 100%; 11 } 12 .header { 13 display: table-header-group; 14 break-inside: avoid; 15 } 16 .filler { 17 display: table-row; 18 break-inside: avoid; 19 height: 2600px; 20 } 21 .header > * { 22 /* Don't make stuff too tall. We want everything (in the header) to be 23 within the viewport. */ 24 height: 10px; 25 } 26 </style> 27 <div style="columns:3; column-fill:auto; width:600px; height:5000px;"> 28 <div class="table"> 29 <div class="header"> 30 <input type="text" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"> 31 <input type="submit" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"> 32 <input type="radio"> 33 <input type="checkbox"> 34 <input type="date"> 35 <input type="range"> 36 <input type="number"> 37 <input type="color"> 38 <input type="password"> 39 <canvas id="canvas" style="width:40px; height:40px;"></canvas> 40 <iframe src="data:text/html,<div style='position:absolute; height:200px;'>x</div>" style="width:100px; height:40px;"></iframe> 41 <div style="overflow:scroll; width:100px; height:30px;"> 42 <div style="height:200px;"></div> 43 </div> 44 <select size="0"><option>xxx</option></select> 45 <select size="5"><option>xxx</option></select> 46 <svg style="width:100px; height:30px;"> 47 <circle cx="20" cy="15" r="7" fill="hotpink"/> 48 </svg> 49 <textarea style="width:50px; height:30px;"> 50 xxxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxx 51 </textarea> 52 <video style="width:100px; height:50px;" controls></video> 53 <video style="width:100px; height:50px;"></video> 54 <meter></meter> 55 <button>xxxxxx</button> 56 <fieldset><legend>epic</legend></fieldset> 57 <!-- The image src is a 1x1 green pixel. --> 58 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjYGhg+A8AAoQBgNXA8F0AAAAASUVORK5CYII="> 59 </div> 60 <div class="filler"></div> 61 <div class="filler"></div> 62 <div class="filler"></div> 63 </div> 64 </div> 65 <script> 66 var ctx = canvas.getContext('2d'); 67 ctx.fillStyle = "hotpink"; 68 ctx.fillRect(0, 0, 50, 50); 69 70 function paintDone() { 71 return new Promise(function(resolve) { 72 requestAnimationFrame(()=> { 73 requestAnimationFrame(()=> { 74 resolve(); 75 }); 76 }); 77 }); 78 } 79 async function toggleStyles(elements) { 80 for (const display of ['block', 'inline-block', 'inline']) { 81 for (const position of ['static', 'relative']) { 82 for (const cssfloat of ['none', 'left']) { 83 for (var elm of elements) { 84 elm.style.display = display; 85 elm.style.position = position; 86 elm.style.cssFloat = cssfloat; 87 } 88 await paintDone(); 89 for (var elm of elements) { 90 var rect = elm.getClientRects()[0]; 91 var x = rect.left; 92 var y = rect.top; 93 x += 2; 94 y += 2; 95 document.elementFromPoint(x, y); 96 document.elementFromPoint(x + 200, y); 97 document.elementFromPoint(x + 400, y); 98 } 99 } 100 } 101 } 102 } 103 104 toggleStyles(document.querySelectorAll(".header > *")); 105 </script>