auto-margins-used-values-with-floats.tentative.html (1560B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#blockwidth"> 3 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9174"> 4 <meta name="viewport" content="width=device-width,initial-scale=1"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/check-layout-th.js"></script> 8 <style> 9 .container { 10 display: flow-root; 11 width: 100px; 12 padding: 5px; 13 box-sizing: border-box; 14 } 15 .box { 16 display: flow-root; 17 width: 40px; 18 height: 10px; 19 background: lime; 20 } 21 .float { 22 float: right; 23 width: 20px; 24 height: 40px; 25 background: cyan; 26 } 27 </style> 28 <body onload="checkLayout('.box')"> 29 <div class="container"> 30 <div class="float"></div> 31 <div class="box" style="margin: auto;" data-expected-margin-left="15" data-expected-margin-right="35"></div> 32 <div class="box" style="margin-left: auto;" data-expected-margin-left="30" data-expected-margin-right="0"></div> 33 <div class="box" style="margin-right: auto;" data-expected-margin-left="0" data-expected-margin-right="50"></div> 34 </div> 35 <div class="container" style="direction: rtl;"> 36 <div class="float"></div> 37 <div class="box" style="margin: auto;" data-expected-margin-left="15" data-expected-margin-right="35"></div> 38 <div class="box" style="margin-left: auto;" data-expected-margin-left="30" data-expected-margin-right="0"></div> 39 <div class="box" style="margin-right: auto;" data-expected-margin-left="0" data-expected-margin-right="50"></div> 40 </div> 41 </body>