text-align-last-empty-inline.html (1284B)
1 <!DOCTYPE html> 2 <title>Tests justification of empty inline element</title> 3 <link rel="author" title="Emil A Eklund" href="eae@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property" title="6.3. Last Line Alignment: the text-align-last property"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #justify { 9 text-align-last: justify; 10 margin-bottom: 5px; 11 } 12 #justify > span, #reference > span { 13 padding: 1px; 14 background: black; 15 } 16 #reference { 17 text-align: center; 18 } 19 </style> 20 <body> 21 <div id="justify"><span></span></div> 22 <div id="reference"><span></span></div> 23 <p> 24 The two black line segments above should align. 25 </p> 26 </body> 27 <script> 28 test(function() { 29 const justify_element = document.getElementById('justify'); 30 const justify_rect = justify_element.firstElementChild.getBoundingClientRect(); 31 const ref_element = document.getElementById('reference'); 32 const ref_rect = ref_element.firstElementChild.getBoundingClientRect(); 33 assert_equals(justify_rect.left, ref_rect.left); 34 assert_equals(justify_rect.right, ref_rect.right); 35 }, 'content that cannot be justified should be centered when text-align-last is justify'); 36 </script>