Changeset 147183 in webkit


Ignore:
Timestamp:
Mar 28, 2013, 4:46:09 PM (12 years ago)
Author:
tony@chromium.org
Message:

Convert some flexbox layout tests to using flexbox.css
​https://bugs.webkit.org/show_bug.cgi?id=113534

Reviewed by Ojan Vafai.

This allows tests to be run without the -webkit prefix for flexbox tests allowing
some of them to run in Firefox.

  • css3/flexbox/flex-align-baseline.html:
  • css3/flexbox/flex-align-column.html:
  • css3/flexbox/flex-align-end.html:
  • css3/flexbox/flex-align-max.html:
  • css3/flexbox/flex-align-percent-height.html:
  • css3/flexbox/flex-align-stretch.html:
  • css3/flexbox/flex-align-vertical-writing-mode.html:
  • css3/flexbox/flex-align.html:
Location:
trunk/LayoutTests
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r147182 r147183  
     12013-03-28  Tony Chang  <tony@chromium.org>
     2
     3        Convert some flexbox layout tests to using flexbox.css
     4        https://bugs.webkit.org/show_bug.cgi?id=113534
     5
     6        Reviewed by Ojan Vafai.
     7
     8        This allows tests to be run without the -webkit prefix for flexbox tests allowing
     9        some of them to run in Firefox.
     10
     11        * css3/flexbox/flex-align-baseline.html:
     12        * css3/flexbox/flex-align-column.html:
     13        * css3/flexbox/flex-align-end.html:
     14        * css3/flexbox/flex-align-max.html:
     15        * css3/flexbox/flex-align-percent-height.html:
     16        * css3/flexbox/flex-align-stretch.html:
     17        * css3/flexbox/flex-align-vertical-writing-mode.html:
     18        * css3/flexbox/flex-align.html:
     19
    1202013-03-28  Tony Chang  <tony@chromium.org>
    221

  • trunk/LayoutTests/css3/flexbox/flex-align-baseline.html

    r130110 r147183  
    11<!DOCTYPE html>
    22<html>
     3<link href="resources/flexbox.css" rel="stylesheet">
    34<style>
    45.flexbox {
    … …  
    67    width: 100px;
    78    height: 100px;
    8     display: -webkit-flex;
    99    background-color: #aaa;
    1010    position: relative;
    … …  
    4141.vertical-lr {
    4242    -webkit-writing-mode: vertical-lr;
    43 }
    44 .row-reverse {
    45     -webkit-flex-flow: row-reverse;
    46 }
    47 .column {
    48     -webkit-flex-flow: column;
    49 }
    50 .column-reverse {
    51     -webkit-flex-flow: column-reverse;
    5243}
    5344</style>

  • trunk/LayoutTests/css3/flexbox/flex-align-column.html

    r130979 r147183  
    11<!DOCTYPE html>
    22<html>
     3<link href="resources/flexbox.css" rel="stylesheet">
    34<style>
    45body {
    … …  
    89    width: 600px;
    910    height: 240px;
    10     display: -webkit-flex;
    1111    background-color: #aaa;
    1212    position: relative;
    13     -webkit-flex-flow: column;
    1413}
    1514.vertical {
    … …  
    4140<body onload="checkLayout('.flexbox')">
    4241
    43 <div class="flexbox">
     42<div class="flexbox column">
    4443    <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="-webkit-flex: 1;"></div>
    4544    <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="-webkit-flex: 1; -webkit-align-self: stretch; "></div>
    … …  
    5049</div>
    5150
    52 <div class="flexbox vertical">
     51<div class="flexbox column vertical">
    5352    <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="-webkit-flex: 1;"></div>
    5453    <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="-webkit-flex: 1; -webkit-align-self: stretch; "></div>

  • trunk/LayoutTests/css3/flexbox/flex-align-end.html

    r130979 r147183  
    11<!DOCTYPE html>
    22<html>
     3<link href="resources/flexbox.css" rel="stylesheet">
    34<style>
    45.flexbox {
    … …  
    67    width: 100px;
    78    height: 100px;
    8     display: -webkit-flex;
    99    background-color: #aaa;
    1010    position: relative;
    … …  
    1717    height: 110px;
    1818    width: 110px;
    19     -webkit-flex: none;
    2019}
    2120.flexbox :nth-child(1) {
    … …  
    4241.vertical-lr {
    4342    -webkit-writing-mode: vertical-lr;
    44 }
    45 .row-reverse {
    46     -webkit-flex-flow: row-reverse;
    47 }
    48 .column {
    49     -webkit-flex-flow: column;
    50 }
    51 .column-reverse {
    52     -webkit-flex-flow: column-reverse;
    5343}
    5444</style>
    … …  
    10494
    10595            var container = document.createElement('div');
    106             container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" style="-webkit-align-items: flex-end;">\n' +
    107                 '<div ' + positionAsString(expectations[writingMode][flexFlow][direction]) + '></div><div></div>\n' +
     96            container.innerHTML = '<div class="flexbox align-items-flex-end ' + flexboxClassName + '">\n' +
     97                '<div class="flex-none" ' + positionAsString(expectations[writingMode][flexFlow][direction]) + '></div><div class="flex-none"></div>\n' +
    10898            '</div>';
    10999

  • trunk/LayoutTests/css3/flexbox/flex-align-max.html

    r130979 r147183  
    11<!DOCTYPE html>
    22<html>
     3<link href="resources/flexbox.css" rel="stylesheet">
    34<style>
    45body {
    … …  
    67}
    78.flexbox {
    8     display: -webkit-flex;
    99    background-color: #aaa;
    1010    position: relative;
    … …  
    1212.flexbox div {
    1313    border: 0;
    14 }
    15 .column {
    16     -webkit-flex-flow: column;
    1714}
    1815.vertical-rl {

  • trunk/LayoutTests/css3/flexbox/flex-align-percent-height.html

    r130979 r147183  
    11<!DOCTYPE html>
    22<html>
     3<link href="resources/flexbox.css" rel="stylesheet">
    34<style>
    45body {
    … …  
    1213.flexbox {
    1314    width: 600px;
    14     display: -webkit-flex;
    1515    background-color: #aaa;
    1616    position: relative;
    … …  
    3333
    3434<div class="flexbox" style="height: 50%;">
    35   <div data-expected-height="50"  data-offset-y="0" style="-webkit-flex: 1; height: 50px;"></div>
    36   <div data-expected-height="300" data-offset-y="0" style="-webkit-flex: 1;"></div>
     35  <div data-expected-height="50"  data-offset-y="0" class="flex-one" style="height: 50px;"></div>
     36  <div data-expected-height="300" data-offset-y="0" class="flex-one"></div>
    3737</div>
    3838

  • trunk/LayoutTests/css3/flexbox/flex-align-stretch.html

    r130979 r147183  
    11<!DOCTYPE html>
    22<html>
     3<link href="resources/flexbox.css" rel="stylesheet">
    34<style>
    45body {
    … …  
    67}
    78.flexbox {
    8     display: -webkit-flex;
    99    background-color: #aaa;
    1010    position: relative;
    … …  
    3434<body onload="checkLayout('.flexbox')">
    3535<div class="flexbox" style="width: 600px">
    36   <div data-expected-height="100" style="-webkit-flex: 1 0 0; position: relative">
     36  <div data-expected-height="100" class="flex-one" style="position: relative">
    3737    <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
    3838  </div>
    39   <div data-expected-height="100" style="-webkit-flex: 1 0 0; height: 100px"></div>
    40   <div data-expected-height="100" style="-webkit-flex: 1 0 0; position: relative">
     39  <div data-expected-height="100" class="flex-one" style="height: 100px"></div>
     40  <div data-expected-height="100" class="flex-one" style="position: relative">
    4141    <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
    4242  </div>
    … …  
    4545<div style="-webkit-writing-mode: horizontal-bt">
    4646<div class="flexbox" style="width: 600px">
    47   <div data-expected-height="100" style="-webkit-flex: 1 0 0; position: relative">
     47  <div data-expected-height="100" class="flex-one" style="position: relative">
    4848    <div data-offset-x="0" data-offset-y="0" class="absolute" style="top:0;"></div>
    4949  </div>
    50   <div data-expected-height="100" style="-webkit-flex: 1 0 0; height: 100px"></div>
    51   <div data-expected-height="100" style="-webkit-flex: 1 0 0; position: relative">
     50  <div data-expected-height="100" class="flex-one" style="height: 100px"></div>
     51  <div data-expected-height="100" class="flex-one" style="position: relative">
    5252    <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
    5353  </div>
    … …  
    5757<div style="-webkit-writing-mode: vertical-rl">
    5858<div class="flexbox" style="height: 200px">
    59   <div data-expected-width="100" style="-webkit-flex: 1 0 0; position: relative">
     59  <div data-expected-width="100" class="flex-one" style="position: relative">
    6060    <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
    6161  </div>
    62   <div data-expected-width="100" style="-webkit-flex: 1 0 0; width: 100px"></div>
    63   <div data-expected-width="100" style="-webkit-flex: 1 0 0; position: relative">
     62  <div data-expected-width="100" class="flex-one" style="width: 100px"></div>
     63  <div data-expected-width="100" class="flex-one" style="position: relative">
    6464    <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
    6565  </div>
    … …  
    6969<div style="-webkit-writing-mode: vertical-lr">
    7070<div class="flexbox" style="height: 200px">
    71   <div data-expected-width="100" style="-webkit-flex: 1 0 0; position: relative">
     71  <div data-expected-width="100" class="flex-one" style="position: relative">
    7272    <div data-offset-x="50" data-offset-y="0" class="absolute" style="right:0;"></div>
    7373  </div>
    74   <div data-expected-width="100" style="-webkit-flex: 1 0 0; width: 100px"></div>
    75   <div data-expected-width="100" style="-webkit-flex: 1 0 0; position: relative">
     74  <div data-expected-width="100" class="flex-one" style="width: 100px"></div>
     75  <div data-expected-width="100" class="flex-one" style="position: relative">
    7676    <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
    7777  </div>
    … …  
    8585</div>
    8686
    87 <div class="flexbox" style="-webkit-flex-direction: column; width: 100px;">
     87<div class="flexbox column" style="width: 100px;">
    8888  <div data-expected-width="100" data-expected-height="50" style="background-color: yellow;">
    8989    <div data-expected-width="200" style="height: 50px; width: 200px; background-color: orange"></div>

  • trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html

    r130979 r147183  
    11<!DOCTYPE html>
    22<html>
     3<link href="resources/flexbox.css" rel="stylesheet">
    34<style>
    45body {
    … …  
    78.flexbox {
    89    height: 100px;
    9     display: -webkit-flex;
    1010    background-color: #aaa;
    1111    position: relative;
    … …  
    5555<!-- stretch is the default align-items so these flexitems should all have the same height. -->
    5656<div class="flexbox">
    57   <div data-expected-width="100" style="-webkit-flex: 1 0 0;"></div>
    58   <div data-expected-width="100" style="-webkit-flex: 1 0 0; width: 100px"></div>
    59   <div data-expected-width="100" style="-webkit-flex: 1 0 0;"></div>
    60 </div>
    61 
    62 <div class="flexbox">
    63   <div data-expected-width="60"  data-offset-x="60" style="-webkit-flex: 1 0 0; width: 60px;"></div>
    64   <div data-expected-width="120" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
    65   <div data-expected-width="60"  data-offset-x="30" style="-webkit-flex: 1 0 0; width: 60px; margin: auto;"></div>
    66   <div data-expected-width="0" data-offset-x="60" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
    67   <div data-expected-width="100" data-offset-x="10" style="-webkit-flex: 1 0 0; width: 100px; margin: 0 10px;"></div>
    68   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px; margin: 0 20px 0 10px;"></div>
    69   <div data-expected-width="90" data-offset-x="10" style="-webkit-flex: 1 0 0; margin: 0 20px 0 10px;"></div>
    70   <div data-expected-width="120" data-offset-x="0" style="-webkit-flex: 1 0 0;">
     57  <div data-expected-width="100" class="flex-one"></div>
     58  <div data-expected-width="100" class="flex-one" style="width: 100px"></div>
     59  <div data-expected-width="100" class="flex-one"></div>
     60</div>
     61
     62<div class="flexbox">
     63  <div data-expected-width="60"  data-offset-x="60" class="flex-one" style="width: 60px;"></div>
     64  <div data-expected-width="120" data-offset-x="0" class="flex-one"></div>
     65  <div data-expected-width="60"  data-offset-x="30" class="flex-one" style="width: 60px; margin: auto;"></div>
     66  <div data-expected-width="0" data-offset-x="60" class="flex-one" style="margin: 0 auto;"></div>
     67  <div data-expected-width="100" data-offset-x="10" class="flex-one" style="width: 100px; margin: 0 10px;"></div>
     68  <div data-expected-width="50" data-offset-x="50" class="flex-one" style="width: 50px; margin: 0 20px 0 10px;"></div>
     69  <div data-expected-width="90" data-offset-x="10" class="flex-one" style="margin: 0 20px 0 10px;"></div>
     70  <div data-expected-width="120" data-offset-x="0" class="flex-one">
    7171    <!-- Since no parent has a fixed height, this div shrink-wraps. -->
    7272    <div data-expected-width="0" style="width: 100%; background-color:black"></div>
    … …  
    7575
    7676<div class="flexbox" style="width: 100px;">
    77   <div data-expected-width="50"  data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px;"></div>
    78   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
    79   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100%;">
     77  <div data-expected-width="50"  data-offset-x="50" class="flex-one" style="width: 50px;"></div>
     78  <div data-expected-width="100" data-offset-x="0" class="flex-one"></div>
     79  <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100%;">
    8080    <div data-expected-width="100" style="width: 100%; background-color:black"></div>
    8181  </div>
    … …  
    8383
    8484<div class="flexbox" style="width: 100px;">
    85   <div data-expected-width="50"  data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px;"></div>
    86   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
    87 </div>
    88 
    89 <div class="flexbox">
    90   <div data-expected-width="0" data-offset-x="100" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start;"></div>
    91   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start; width: 50px;"></div>
    92   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start; width: 50px; margin: 0 auto"></div>
    93   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start; width: 50px; margin: 0 auto 0 0"></div>
    94   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start; width: 50px; margin: 0 0 0 auto"></div>
    95   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start; width: 50px; margin: 0 25px"></div>
    96   <div data-expected-width="50" data-offset-x="30" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start; width: 50px; margin: 0 20px 0 10px;"></div>
    97   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
    98 </div>
    99 
    100 <div class="flexbox">
    101   <div data-expected-width="0" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end;"></div>
    102   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; width: 50px;"></div>
    103   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; width: 50px; margin: 0 auto"></div>
    104   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; width: 50px; margin: 0 auto 0 0"></div>
    105   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; width: 50px; margin: 0 0 0 auto"></div>
    106   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; width: 50px; margin: 0 25px"></div>
    107   <div data-expected-width="50" data-offset-x="10" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; width: 50px; margin: 0 20px 0 10px;"></div>
    108   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
    109 </div>
    110 
    111 <div class="flexbox">
    112   <div data-expected-width="0" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-align-self: center;"></div>
    113   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center; width: 50px;"></div>
    114   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center; width: 50px; margin: 0 auto"></div>
    115   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-align-self: center; width: 50px; margin: 0 auto 0 0"></div>
    116   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-align-self: center; width: 50px; margin: 0 0 0 auto"></div>
    117   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center; width: 50px; margin: 0 25px"></div>
    118   <div data-expected-width="50" data-offset-x="20" style="-webkit-flex: 1 0 0; -webkit-align-self: center; width: 50px; margin: 0 20px 0 10px;"></div>
    119   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
    120 </div>
    121 
    122 <div class="flexbox">
    123   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start; width: 50px;"></div>
    124   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center; width: 50px;"></div>
    125   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; width: 50px;"></div>
    126   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px; margin: auto 0"></div>
    127   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
    128   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
    129 </div>
    130 
    131 <div class="flexbox">
    132   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
    133   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
    134   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
    135   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px; margin: auto 0; -webkit-writing-mode: horizontal-tb;"></div>
    136   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px; -webkit-writing-mode: horizontal-tb;"></div>
    137 </div>
    138 
    139 <div class="flexbox">
    140   <div data-expected-width="20" data-offset-x="70" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline; width: 20px;"></div>
    141   <div data-expected-width="10" data-offset-x="70" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline; width: 10px; margin: 0 20px 0 10px;"></div>
    142   <div data-expected-width="10" data-offset-x="70" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline; width: 10px; margin: 0 20px 0 0;"></div>
    143   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
    144 </div>
    145 
    146 <div class="flexbox">
    147   <div id="baseline1" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;">ahem</div>
    148   <div id="baseline2" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
    149   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
    150   <div id="baseline3" data-expected-width="50" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
    151   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
    152 </div>
    153 
    154 <div class="flexbox">
    155   <div id="baseline4" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;">ahem</div>
    156   <div id="baseline5" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
    157   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
    158   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
     85  <div data-expected-width="50"  data-offset-x="50" class="flex-one" style="width: 50px;"></div>
     86  <div data-expected-width="100" data-offset-x="0" class="flex-one"></div>
     87</div>
     88
     89<div class="flexbox">
     90  <div data-expected-width="0" data-offset-x="100" class="flex-one align-self-flex-start"></div>
     91  <div data-expected-width="50" data-offset-x="50" class="flex-one align-self-flex-start" style="width: 50px;"></div>
     92  <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-flex-start" style="width: 50px; margin: 0 auto"></div>
     93  <div data-expected-width="50" data-offset-x="50" class="flex-one align-self-flex-start" style="width: 50px; margin: 0 auto 0 0"></div>
     94  <div data-expected-width="50" data-offset-x="0" class="flex-one align-self-flex-start" style="width: 50px; margin: 0 0 0 auto"></div>
     95  <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-flex-start" style="width: 50px; margin: 0 25px"></div>
     96  <div data-expected-width="50" data-offset-x="30" class="flex-one align-self-flex-start" style="width: 50px; margin: 0 20px 0 10px;"></div>
     97  <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
     98</div>
     99
     100<div class="flexbox">
     101  <div data-expected-width="0" data-offset-x="0" class="flex-one align-self-flex-end"></div>
     102  <div data-expected-width="50" data-offset-x="0" class="flex-one align-self-flex-end" style="width: 50px;"></div>
     103  <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-flex-end" style="width: 50px; margin: 0 auto"></div>
     104  <div data-expected-width="50" data-offset-x="50" class="flex-one align-self-flex-end" style="width: 50px; margin: 0 auto 0 0"></div>
     105  <div data-expected-width="50" data-offset-x="0" class="flex-one align-self-flex-end" style="width: 50px; margin: 0 0 0 auto"></div>
     106  <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-flex-end" style="width: 50px; margin: 0 25px"></div>
     107  <div data-expected-width="50" data-offset-x="10" class="flex-one align-self-flex-end" style="width: 50px; margin: 0 20px 0 10px;"></div>
     108  <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
     109</div>
     110
     111<div class="flexbox">
     112  <div data-expected-width="0" data-offset-x="50" class="flex-one align-self-center"></div>
     113  <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-center" style="width: 50px;"></div>
     114  <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-center" style="width: 50px; margin: 0 auto"></div>
     115  <div data-expected-width="50" data-offset-x="50" class="flex-one align-self-center" style="width: 50px; margin: 0 auto 0 0"></div>
     116  <div data-expected-width="50" data-offset-x="0" class="flex-one align-self-center" style="width: 50px; margin: 0 0 0 auto"></div>
     117  <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-center" style="width: 50px; margin: 0 25px"></div>
     118  <div data-expected-width="50" data-offset-x="20" class="flex-one align-self-center" style="width: 50px; margin: 0 20px 0 10px;"></div>
     119  <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
     120</div>
     121
     122<div class="flexbox">
     123  <div data-expected-width="50" data-offset-x="50" class="flex-one align-self-flex-start" style="width: 50px;"></div>
     124  <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-center" style="width: 50px;"></div>
     125  <div data-expected-width="50" data-offset-x="0" class="flex-one align-self-flex-end" style="width: 50px;"></div>
     126  <div data-expected-width="50" data-offset-x="50" class="flex-one" style="width: 50px; margin: auto 0"></div>
     127  <div data-expected-width="100" data-offset-x="0" class="flex-one"></div>
     128  <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
     129</div>
     130
     131<div class="flexbox">
     132  <div data-expected-width="50" data-offset-x="50" class="flex-one align-self-flex-start" style="width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
     133  <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-center" style="width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
     134  <div data-expected-width="50" data-offset-x="0" class="flex-one align-self-flex-end" style="width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
     135  <div data-expected-width="50" data-offset-x="50" class="flex-one" style="width: 50px; margin: auto 0; -webkit-writing-mode: horizontal-tb;"></div>
     136  <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px; -webkit-writing-mode: horizontal-tb;"></div>
     137</div>
     138
     139<div class="flexbox">
     140  <div data-expected-width="20" data-offset-x="70" class="flex-one align-self-baseline" style="width: 20px;"></div>
     141  <div data-expected-width="10" data-offset-x="70" class="flex-one align-self-baseline" style="width: 10px; margin: 0 20px 0 10px;"></div>
     142  <div data-expected-width="10" data-offset-x="70" class="flex-one align-self-baseline" style="width: 10px; margin: 0 20px 0 0;"></div>
     143  <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
     144</div>
     145
     146<div class="flexbox">
     147  <div id="baseline1" class="flex-one align-self-baseline">ahem</div>
     148  <div id="baseline2" class="flex-one align-self-baseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
     149  <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-center"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
     150  <div id="baseline3" data-expected-width="50" class="flex-one align-self-baseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
     151  <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
     152</div>
     153
     154<div class="flexbox">
     155  <div id="baseline4" class="flex-one align-self-baseline">ahem</div>
     156  <div id="baseline5" class="flex-one align-self-baseline"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
     157  <div data-expected-width="50" data-offset-x="50" class="flex-one align-self-baseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
     158  <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
    159159</div>
    160160
    161161<div class="flexbox" style="-webkit-writing-mode: vertical-lr">
    162   <div id="baseline6" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;">ahem</div>
    163   <div id="baseline7" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
    164   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
    165   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
    166   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
     162  <div id="baseline6" class="flex-one align-self-baseline">ahem</div>
     163  <div id="baseline7" class="flex-one align-self-baseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
     164  <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-center"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
     165  <div data-expected-width="50" data-offset-x="0" class="flex-one align-self-baseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
     166  <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
    167167</div>
    168168
    169169<div class="flexbox" style="-webkit-writing-mode: vertical-lr">
    170   <div id="baseline8" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;">ahem</div>
    171   <div id="baseline9" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
    172   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
    173   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
     170  <div id="baseline8" class="flex-one align-self-baseline">ahem</div>
     171  <div id="baseline9" class="flex-one align-self-baseline"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
     172  <div data-expected-width="50" data-offset-x="0" class="flex-one align-self-baseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
     173  <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
    174174</div>
    175175

  • trunk/LayoutTests/css3/flexbox/flex-align.html

    r130979 r147183  
    11<!DOCTYPE html>
    22<html>
     3<link href="resources/flexbox.css" rel="stylesheet">
    34<style>
    45body {
    … …  
    78.flexbox {
    89    width: 600px;
    9     display: -webkit-flex;
    1010    background-color: #aaa;
    1111    position: relative;
Note: See TracChangeset for help on using the changeset viewer.