test_frame_reconstruction_for_column_span.html (2206B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title> 5 Test for Bug 1503420: Test we don't reframe multi-column containing block 6 when appending a block containing a spanner kid. 7 </title> 8 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 9 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 10 <script src="/tests/SimpleTest/SimpleTest.js"></script> 11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 12 13 <script> 14 SimpleTest.waitForExplicitFinish(); 15 16 const utils = SpecialPowers.getDOMWindowUtils(window); 17 18 function appendBlock() { 19 // Create a subtree like the following, and append it to columns. 20 // <div> 21 // <h3>spanner</h3> 22 // block2 23 // </div> 24 var spanner = document.createElement("h3"); 25 var spannerText = document.createTextNode("spanner"); 26 spanner.appendChild(spannerText); 27 28 var block2 = document.createElement("div"); 29 var block2Text = document.createTextNode("block2"); 30 block2.appendChild(spanner); 31 block2.appendChild(block2Text) 32 33 var column = document.getElementById("column"); 34 column.appendChild(block2); 35 } 36 37 function runTest() { 38 document.documentElement.offsetTop; 39 // We expected to construct 6 more frames. 40 // 1) Block frame for <div> 41 // 2) Block frame for <h3> 42 // 3) Text frame for "spanner" 43 // 4) Text frame for "block2" 44 // 5) Column-span wrapper for <h3>, which is a sibling of <div> 45 // 6) Column-span wrapper for 5), which is a sibling of <article> 46 // Note: creating a continuation frame doesn't increase the count. 47 const expectedFrameConstructCount = utils.framesConstructed + 6; 48 49 appendBlock(); 50 document.documentElement.offsetTop; 51 52 is(utils.framesConstructed, expectedFrameConstructCount, 53 "We shouldn't construct unexpected frames."); 54 55 SimpleTest.finish(); 56 } 57 </script> 58 59 <style> 60 #column { 61 column-count: 3; 62 column-rule: 6px solid; 63 width: 400px; 64 outline: 1px solid black; 65 } 66 h3 { 67 column-span: all; 68 outline: 1px solid blue; 69 } 70 </style> 71 72 <body onload="runTest();"> 73 <article id="column"> 74 <div>block1</div> 75 </article> 76 </body> 77 </html>