empty-text-node-001.html (1813B)
1 <!DOCTYPE html> 2 <html lang=en> 3 <meta charset="utf-8"> 4 <title>CSS Inline test: empty text node</title> 5 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 6 <link rel="help" title="2.1. Layout of Line Boxes" href="https://drafts.csswg.org/css-inline/#line-boxes"> 7 <link rel="match" href="empty-text-node-001-ref.html"> 8 <meta name="assert" content="Empty text node in a line box is treated as zero height."> 9 <style> 10 .green { color: green; } 11 .red { color: red; } 12 .testContent, .testBefore, .testAfter { 13 display: inline-block; 14 } 15 div div { 16 width: 50px; 17 line-height: 30px; 18 border: 20px solid green; 19 background-color: red; 20 margin: 10px; 21 } 22 .testBefore div::before { 23 content: ""; 24 } 25 .testAfter div::after { 26 content: ""; 27 } 28 .normal { white-space: normal; } 29 .nowrap { white-space: nowrap; } 30 .pre { white-space: pre; } 31 .prewrap { white-space: pre-wrap; } 32 .preline { white-space: pre-line; } 33 .breakspaces { white-space: break-spaces; } 34 </style> 35 <p>Test passes if the <span class=green>green</span> boxes have <span class=red>no red</span> in the middle.</p> 36 37 <div class=testContent> 38 <div class=normal></div> 39 <div class=nowrap></div> 40 <div class=pre></div> 41 <div class=prewrap></div> 42 <div class=preline></div> 43 <div class=breakspaces></div> 44 <script> 45 [...document.querySelectorAll(".testContent div")].forEach((node, i) => node.appendChild(document.createTextNode(""))); 46 </script> 47 </div> 48 49 <div class=testBefore> 50 <div class=normal></div> 51 <div class=nowrap></div> 52 <div class=pre></div> 53 <div class=prewrap></div> 54 <div class=preline></div> 55 <div class=breakspaces></div> 56 </div> 57 58 <div class=testAfter> 59 <div class=normal></div> 60 <div class=nowrap></div> 61 <div class=pre></div> 62 <div class=prewrap></div> 63 <div class=preline></div> 64 <div class=breakspaces></div> 65 </div>