summaryrefslogtreecommitdiffstats
path: root/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml
blob: fb583161af66ba3bff1f4923f242f439b9befc10 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<?xml version="1.0" encoding="UTF-8"?>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- Reference case for behavior of the 'baseline' value for align-items and
     align-self.

     NOTE: For multi-line 'display: block' flex items in the testcase, we use
     an inline-table here in the reference case, so that we get first-line
     baseline alignment. (If we used an inline-block instead, that would give
     us *last-line* baseline alignment.)
-->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style>
      .flexbox {
        display: block;
        border: 1px dashed blue;
        font: 14px sans-serif;
      }

      div   { display: inline-block; }
      table { display: inline-table; }

      .lime   { background: lime;   }
      .pink   { background: pink;   }
      .aqua   { background: aqua;   }

      i { display:inline-block; width:20px; height:2px; background:black; }
      .ref {
            -moz-appearance:none;
             -ms-appearance:none;
         -webkit-appearance:none;
                 appearance:none;
         border:none;
         margin:0;
         padding:0;
         border-bottom:2px solid black;
         width:20px;
      }
   </style>
  </head>
  <body>
    <div class="flexbox">
      <div class="lime">text</div
      ><button>btn</button
      ><label class="pink">label</label
      ><table cellspacing="0" cellpadding="0"  class="aqua">
        <label>lab<br/>el</label>
      </table
      ><table cellspacing="0" cellpadding="0">
        <fieldset>field<br/>set</fieldset>
      </table
      ><table cellspacing="0" cellpadding="0">
        <fieldset><legend>leg</legend>field<br/>set</fieldset>
      </table
      ><table cellspacing="0" cellpadding="0">
        <fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset>
      </table>
    </div>
    <div class="flexbox" style="font-size:0"><input type="radio"
     /><input type="checkbox"
     /><input type="checkbox" class="ref"/></div>
  </body>
</html>