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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/flexbox.css" rel="stylesheet">
   5 <style>
   6 .flexbox, .inline-flexbox {
   7     background-color: lightgrey;
   8 }
   9
  10 .inline-block {
  11     display: inline-block;
  12 }
  13
  14 .border {
  15     border: 11px solid pink;
  16 }
  17
  18 .padding {
  19     padding: 13px;
  20 }
  21
  22 .margin {
  23     margin: 8px 0;
  24 }
  25
  26 .flexbox > div {
  27     min-width: 0;
  28     min-height: 0;
  29 }
  30 </style>
  31 </head>
  32 <body>
  33
  34 <div>
  35 before text
  36 <div class="border" style="display: inline-block; background-color: lightgrey">
  37 <div class="flexbox" style="height: 30px; margin-top: 7px; padding-top: 10px;">
  38   baseline
  39 </div>
  40 </div>
  41 after text
  42 </div>
  43
  44 <div>
  45 Should align
  46 <div class="inline-block border">
  47   <div class="flexbox padding" style="width: 50px; height: 50px; background-color: pink">
  48       <div class="flex-one" style="background-color: lightgrey"></div>
  49   </div>
  50 </div>
  51 with the
  52 <div class="inline-block margin">
  53   <div class="flexbox border" style="width: 50px; height: 50px; background-color: pink">
  54       <div class="flex-one" style="background-color: lightgrey"></div>
  55   </div>
  56 </div>
  57 bottom of
  58 <div class="inline-block padding" style="padding-left: 0; padding-right: 0">
  59   <div class="flexbox margin border" style="width: 50px; height: 50px; background-color: pink">
  60       <div class="flex-one" style="background-color: lightgrey;"></div>
  61   </div>
  62 </div>
  63 the grey
  64 <div class="inline-flexbox margin border" style="width: 30px; height: 30px;"></div>
  65 box.
  66 </div>
  67
  68 <div>
  69 Should align
  70 with the
  71 <div class="inline-block">
  72   <div class="flexbox" style="background-color: pink">
  73       <div class="flex-one border padding margin" style="background-color: lightgrey;"></div>
  74   </div>
  75 </div>
  76 middle of
  77 <div class="inline-flexbox margin border padding"></div>
  78 the grey box.
  79 </div>
  80
  81 <div>
  82 Should align with the top
  83 <div class="inline-block border margin padding" style="background-color: pink">
  84   <div class="flexbox border margin padding" style="width: 50px; height: 50px; background-color: pink">
  85       <div style="width: 200px; overflow: scroll; background-color: lightgrey; margin-top: 4px; border-top: 9px solid pink;"></div>
  86   </div>
  87 </div>
  88 of the horizontal scrollbar.
  89 </div>
  90
  91 <div>
  92 Should align 10px above the
  93 <div class="inline-block" style="background-color: pink">
  94   <div class="flexbox" style="width: 50px; height: 50px; background-color: pink">
  95       <div style="width: 200px; overflow: scroll; background-color: lightgrey; padding-bottom: 10px"></div>
  96   </div>
  97 </div>
  98 horizontal scrollbar, if one is visible.
  99 </div>
 100
 101 </body>
 102 </html>