layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-vert-1-ref.html

changeset 0
6474c204b198
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-vert-1-ref.html	Wed Dec 31 06:09:35 2014 +0100
     1.3 @@ -0,0 +1,58 @@
     1.4 +<!DOCTYPE html>
     1.5 +<!--
     1.6 +     Any copyright is dedicated to the Public Domain.
     1.7 +     http://creativecommons.org/publicdomain/zero/1.0/
     1.8 +-->
     1.9 +<!-- Reference case, using inline-block instead of inline-flex, and with the
    1.10 +     unaligned children taken out of baseline-alignment with
    1.11 +     "vertical-align:top".
    1.12 +-->
    1.13 +<html>
    1.14 +<head>
    1.15 +  <title>CSS Reftest Reference</title>
    1.16 +  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
    1.17 +  <meta charset="utf-8">
    1.18 +  <link rel="stylesheet" type="text/css" href="support/ahem.css" />
    1.19 +  <style>
    1.20 +    body {
    1.21 +      margin: 0;
    1.22 +      font: 20px Ahem;
    1.23 +      line-height: 20px;
    1.24 +      /* Baseline is 0.8em = 16px from top */
    1.25 +    }
    1.26 +    .flexContainer {
    1.27 +      display: inline-block;
    1.28 +      background: lightblue;
    1.29 +    }
    1.30 +    .hugeAndUnaligned {
    1.31 +      font-size: 35px;
    1.32 +      line-height: 35px;
    1.33 +      vertical-align: top;
    1.34 +    }
    1.35 +    .smallFont {
    1.36 +      font-size: 10px;
    1.37 +      line-height: 10px;
    1.38 +      /* Baseline is 0.8em = 8px from top */
    1.39 +    }
    1.40 +    * { vertical-align: top }
    1.41 +  </style>
    1.42 +</head>
    1.43 +<body>
    1.44 +  <div style="display: inline-block; margin-top: 12px">a</div>
    1.45 +  <div class="flexContainer" style="margin-top: 20px">
    1.46 +    <div class="smallFont">b</div
    1.47 +    ><div>c</div
    1.48 +    ><div class="hugeAndUnaligned">d</div>
    1.49 +  </div>
    1.50 +  <div class="flexContainer">
    1.51 +    <div class="hugeAndUnaligned">e</div
    1.52 +    ><div>f</div
    1.53 +    ><div class="smallFont">g</div>
    1.54 +  </div>
    1.55 +  <div class="flexContainer">
    1.56 +    <div class="hugeAndUnaligned">h</div
    1.57 +    ><div class="smallFont">i</div
    1.58 +    ><div>j</div>
    1.59 +  </div>
    1.60 +</body>
    1.61 +</html>

mercurial