white-space-shorthand-text-wrap.html (2457B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-text-4/#propdef-white-space"> 3 <link rel="help" href="https://drafts.csswg.org/css-text-4/#propdef-text-wrap"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 .balance { 8 text-wrap: balance; 9 } 10 </style> 11 <div id="balance" class="balance"></div> 12 <script> 13 test(() => { 14 const target = document.getElementById('balance'); 15 assert_equals(getComputedStyle(target).textWrap, 'balance'); 16 }, "`text-wrap: balance` should be set"); 17 </script> 18 19 <style> 20 #text-wrap-after-white-space { 21 white-space: normal; 22 text-wrap: balance; 23 } 24 </style> 25 <div id="text-wrap-after-white-space"></div> 26 <script> 27 test(() => { 28 const target = document.getElementById('text-wrap-after-white-space'); 29 assert_equals(getComputedStyle(target).textWrap, 'balance'); 30 }, "`text-wrap` should not be affected by previous `white-space`"); 31 </script> 32 33 <style> 34 #white-space-after-text-wrap-balance { 35 text-wrap: balance; 36 white-space: normal; 37 } 38 </style> 39 <div id="white-space-after-text-wrap-balance"></div> 40 <script> 41 test(() => { 42 const target = document.getElementById('white-space-after-text-wrap-balance'); 43 assert_equals(getComputedStyle(target).textWrap, 'balance'); 44 }, "`white-space` should not overwrite previous `text-wrap-style: balance`"); 45 </script> 46 47 <style> 48 #white-space-after-text-wrap-nowrap { 49 text-wrap: nowrap balance; 50 white-space: normal; 51 } 52 </style> 53 <div id="white-space-after-text-wrap-nowrap"></div> 54 <script> 55 test(() => { 56 const target = document.getElementById('white-space-after-text-wrap-nowrap'); 57 assert_equals(getComputedStyle(target).textWrap, 'balance'); 58 }, "`white-space` should overwrite previous `text-wrap-mode: nowrap`"); 59 </script> 60 61 <style> 62 .normal { 63 white-space: normal; 64 } 65 </style> 66 <div class="normal"> 67 <div id="parent-white-space" class="balance"></div> 68 </div> 69 <script> 70 test(() => { 71 const target = document.getElementById('parent-white-space'); 72 assert_equals(getComputedStyle(target).textWrap, 'balance'); 73 }, "`text-wrap` should not be affected by `white-space` on the parent"); 74 </script> 75 76 <div style="text-wrap: balance nowrap;"> 77 <div id="parent-text-wrap" class="normal"></div> 78 </div> 79 <script> 80 test(() => { 81 const target = document.getElementById('parent-text-wrap'); 82 assert_equals(getComputedStyle(target).textWrap, 'balance'); 83 }, "`white-space` should overwrite `text-wrap-mode` on the parent"); 84 </script>