flexitem-no-margin-collapsing.html (999B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexbox: flex items don't collapse margins</title> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#item-margins"> 6 <link href="support/flexbox.css" rel="stylesheet"> 7 <meta name="assert" content="This test ensures that flex items don't collapse margins 8 with their children."> 9 <style> 10 .flexbox { 11 background-color: lightgrey; 12 } 13 .flexbox p { 14 height: 100px; 15 width: 100px; 16 margin: 10px; 17 background-color: blue; 18 } 19 </style> 20 <script src="/resources/testharness.js"></script> 21 <script src="/resources/testharnessreport.js"></script> 22 <script src="/resources/check-layout-th.js"></script> 23 </head> 24 <body onload="checkLayout('.flexbox')"> 25 <div id=log></div> 26 27 <div class="flexbox" style="position: relative"> 28 <div data-offset-x="0" data-offset-y="0" data-expected-width="120" data-expected-height="120"> 29 <p data-offset-x="10" data-offset-y="10" data-expected-width="100" data-expected-height="100"></p> 30 </div> 31 </div> 32 33 </body> 34 </html>