justify-self-text-align-2.html (959B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align/#justify-self-property"> 3 <meta name="assert" content="text-align:-webkit-*, justify-items, justify-self work correctly in tandem when all are specified" /> 4 <style> 5 6 .container { 7 width: 200px; 8 position: relative; 9 outline: solid; 10 justify-items: center; 11 text-align: -webkit-right; 12 } 13 14 .item { 15 background: lightblue; 16 width: 100px; 17 height: 100px; 18 outline: solid; 19 } 20 21 </style> 22 <script src="/resources/testharness.js"></script> 23 <script src="/resources/testharnessreport.js"></script> 24 <script src="/resources/check-layout-th.js"></script> 25 26 <div class="container"> 27 <div class="item" style="justify-self: normal;" data-offset-x="100"> 28 normal 29 </div> 30 <div class="item" style="justify-self: auto;" data-offset-x="50"> 31 auto 32 </div> 33 <div class="item" style="justify-self: left;" data-offset-x="0"> 34 left 35 </div> 36 </div> 37 38 <script> 39 checkLayout('.item'); 40 </script>