empty-text-baseline-002.html (1863B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: An Empty Text Node Should Not Generate a Baseline</title> 4 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-display-3/#intro"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9606"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1855583"> 8 <link rel="stylesheet" href="/fonts/ahem.css"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <style> 12 body { 13 margin: 0; 14 } 15 16 .ahem { 17 font-family: Ahem; 18 } 19 20 .with-pseudo::before, .with-pseudo::after { 21 content: ""; 22 width: 4px; 23 height: 4px; 24 border: 2px solid; 25 background: orange; 26 display: inline-block; 27 } 28 29 .font-size::before, .font-size::after { 30 font-size: 100px; 31 } 32 33 .line-height::before, .line-height::after { 34 line-height: 10; 35 } 36 37 .empty-concat::before, .empty-concat::after { 38 content: "" "" "" "" ""; 39 } 40 41 </style> 42 <div id="reference" class="ahem">x</div> 43 <div id="fs" class="ahem with-pseudo font-size">x</div> 44 <div id="ba" class="ahem with-pseudo line-height">x</div> 45 <div id="ec" class="ahem with-pseudo font-size empty-concat">x</div> 46 <script> 47 test(function() { 48 assert_equals(fs.offsetHeight, reference.offsetHeight); 49 assert_equals(ba.offsetHeight, reference.offsetHeight); 50 assert_equals(ec.offsetHeight, reference.offsetHeight); 51 }, "Empty content pseudo-element does not generate baseline"); 52 53 test(function() { 54 const divs = [fs, ba, ec]; 55 for (let d of divs) { 56 d.style = "white-space: pre"; 57 } 58 assert_equals(fs.offsetHeight, reference.offsetHeight); 59 assert_equals(ba.offsetHeight, reference.offsetHeight); 60 assert_equals(ec.offsetHeight, reference.offsetHeight); 61 }, "Empty content pseudo-element does not generate baseline with white-space: pre"); 62 </script>