layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-baseline-1.html

Thu, 15 Jan 2015 15:55:04 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 15 Jan 2015 15:55:04 +0100
branch
TOR_BUG_9701
changeset 9
a63d609f5ebe
permissions
-rw-r--r--

Back out 97036ab72558 which inappropriately compared turds to third parties.

     1 <!DOCTYPE html>
     2 <!--
     3      Any copyright is dedicated to the Public Domain.
     4      http://creativecommons.org/publicdomain/zero/1.0/
     5 -->
     6 <html>
     7 <head>
     8   <title>CSS Test: Testing that a collapsed flex item participates in baseline alignment only for the purpose of establishing container's cross size</title>
     9   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
    10   <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#algo-visibility">
    11   <link rel="match" href="flexbox-collapsed-item-baseline-1-ref.html">
    12   <meta charset="utf-8">
    13   <style>
    14     .flexContainer {
    15       display: flex;
    16       width: 50px;
    17       background: yellow;
    18       border: 1px dotted black;
    19       margin: 5px;
    20       align-items: baseline;
    21     }
    22     .collapse {
    23       visibility: collapse;
    24     }
    25     .largeFont {
    26       font-size: 20px;
    27       background: lightblue;
    28       /* Our flex items get padding on opposite sides (top/bottom) so that they
    29          produce a large combined height when baseline-aligned: */
    30       padding-top: 5px;
    31     }
    32     .smallFont {
    33       font-size: 10px;
    34       background: pink;
    35       /* Our flex items get padding on opposite sides (top/bottom) so that they
    36          produce a large combined height when baseline-aligned: */
    37       padding-bottom: 20px;
    38     }
    39   </style>
    40 </head>
    41 <body>
    42   <!-- Second item collapsed: -->
    43   <div class="flexContainer">
    44     <div class="largeFont">a</div>
    45     <div class="smallFont collapse">b</div>
    46   </div>
    48   <!-- First item collapsed: -->
    49   <div class="flexContainer">
    50     <div class="largeFont collapse">a</div>
    51     <div class="smallFont">b</div>
    52   </div>
    53 </body>
    54 </html>

mercurial