third_party/WebKit/LayoutTests/css3/flexbox/percent-margins.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/check-layout.js"></script>
   3 <body onload="checkLayout('.flexbox')">
   4
   5 <div class="flexbox" style="display:flex; flex-direction: column; background-color: salmon; height: 300px; width: 400px;">
   6     <div style="margin: 10%; background-color: orange; height: 5px; flex: 1" data-expected-width=320 data-expected-height=135></div>
   7     <div style="margin: 10%; background-color: orange; height: 5px;" data-expected-width=320 data-expected-height=5></div>
   8 </div>
   9
  10 <div class="flexbox" style="display:flex; background-color: salmon; height: 300px; width: 400px;">
  11     <div style="margin: 10%; background-color: orange; height: 5px; flex: 1 5px" data-expected-width=235 data-expected-height=5></div>
  12     <div style="margin: 10%; background-color: orange; height: 5px; width: 5px" data-expected-width=5 data-expected-height=5></div>
  13 </div>
  14
  15 <div class="flexbox" style="display:flex; background-color: salmon; height: 300px; width: 400px; padding: 100px;">
  16     <div style="margin: 10%; background-color: orange; height: 5px; flex: 1 5px" data-expected-width=235 data-expected-height=5></div>
  17     <div style="margin: 10%; background-color: orange; height: 5px; width: 5px" data-expected-width=5 data-expected-height=5></div>
  18 </div>
  19
  20 </body>