Changeset 95644 in webkit


Ignore:
Timestamp:
Sep 21, 2011 10:00:43 AM (13 years ago)
Author:
ojan@chromium.org
Message:

[flexbox] rename classnames and methods in the tests to not assume horizontal
https://bugs.webkit.org/show_bug.cgi?id=68498

Reviewed by Tony Chang.

  • css3/flexbox/001.html:
  • css3/flexbox/002.html:
  • css3/flexbox/003.html:
  • css3/flexbox/004.html:
  • css3/flexbox/resources/flexbox.js:

(checkFlexBoxen):

  • css3/flexbox/writing-modes.html:
  • platform/mac/Skipped:
Location:
trunk/LayoutTests
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r95643 r95644  
     12011-09-21  Ojan Vafai  <ojan@chromium.org>
     2
     3        [flexbox] rename classnames and methods in the tests to not assume horizontal
     4        https://bugs.webkit.org/show_bug.cgi?id=68498
     5
     6        Reviewed by Tony Chang.
     7
     8        * css3/flexbox/001.html:
     9        * css3/flexbox/002.html:
     10        * css3/flexbox/003.html:
     11        * css3/flexbox/004.html:
     12        * css3/flexbox/resources/flexbox.js:
     13        (checkFlexBoxen):
     14        * css3/flexbox/writing-modes.html:
     15        * platform/mac/Skipped:
     16
    1172011-09-21  Mike Reed  <reed@google.com>
    218
  • trunk/LayoutTests/css3/flexbox/001.html

    r94137 r95644  
    55    margin: 0;
    66}
    7 .horizontal-box {
     7.flexbox {
    88    width: 600px;
    99}
    10 .horizontal-box div {
     10.flexbox div {
    1111    height: 20px;
    1212    border: 0;
    1313}
    1414
    15 .horizontal-box :nth-child(1) {
     15.flexbox :nth-child(1) {
    1616    background-color: blue;
    1717}
    18 .horizontal-box :nth-child(2) {
     18.flexbox :nth-child(2) {
    1919    background-color: green;
    2020}
    21 .horizontal-box :nth-child(3) {
     21.flexbox :nth-child(3) {
    2222    background-color: red;
    2323}
     
    2828</script>
    2929<script src="resources/flexbox.js"></script>
    30 <body onload="checkHorizontalBoxen()">
     30<body onload="checkFlexBoxen()">
    3131
    32 <div style="display: -webkit-flexbox" class="horizontal-box">
     32<div style="display: -webkit-flexbox" class="flexbox">
    3333  <div data-expected-width="200" style="width: -webkit-flex(1)"></div>
    3434  <div data-expected-width="200" style="width: -webkit-flex(1)"></div>
     
    3636</div>
    3737
    38 <div style="display: -webkit-flexbox" class="horizontal-box">
     38<div style="display: -webkit-flexbox" class="flexbox">
    3939  <div data-expected-width="200" style="width: -webkit-flex(.5)"></div>
    4040  <div data-expected-width="200" style="width: -webkit-flex(.5)"></div>
     
    4242</div>
    4343
    44 <div style="display: -webkit-flexbox" class="horizontal-box">
     44<div style="display: -webkit-flexbox" class="flexbox">
    4545  <div data-expected-width="300" style="width: -webkit-flex(3)"></div>
    4646  <div data-expected-width="200" style="width: -webkit-flex(2)"></div>
     
    4848</div>
    4949
    50 <div style="display: -webkit-flexbox" class="horizontal-box">
     50<div style="display: -webkit-flexbox" class="flexbox">
    5151  <div data-expected-width="250" style="width: -webkit-flex(1)"></div>
    5252  <div data-expected-width="250" style="width: -webkit-flex(1)"></div>
     
    5454</div>
    5555
    56 <div style="display: -webkit-flexbox" class="horizontal-box">
     56<div style="display: -webkit-flexbox" class="flexbox">
    5757  <div data-expected-width="150" style="width: -webkit-flex(1)"></div>
    5858  <div data-expected-width="150" style="width: -webkit-flex(1)"></div>
     
    6161
    6262<!-- The first two boxes should fill the extra 300px evenly (each gets 150px extra). -->
    63 <div style="display: -webkit-flexbox" class="horizontal-box">
     63<div style="display: -webkit-flexbox" class="flexbox">
    6464  <div data-expected-width="150" style="width: -webkit-flex(1)"></div>
    6565  <div data-expected-width="350" style="width: -webkit-flex(1 200px)"></div>
     
    6868
    6969<!-- Like the last test, except the middle box gets more space than the first box. -->
    70 <div style="display: -webkit-flexbox" class="horizontal-box">
     70<div style="display: -webkit-flexbox" class="flexbox">
    7171  <div data-expected-width="100" style="width: -webkit-flex(1)"></div>
    7272  <div data-expected-width="400" style="width: -webkit-flex(2 33.333333%)"></div>
     
    7575
    7676<!-- Test some negative flexing. -->
    77 <div style="display: -webkit-flexbox" class="horizontal-box">
     77<div style="display: -webkit-flexbox" class="flexbox">
    7878  <div data-expected-width="200" style="width: -webkit-flex(1 1 300px)"></div>
    7979  <div data-expected-width="200" style="width: -webkit-flex(2 1 300px)"></div>
     
    8181</div>
    8282
    83 <div style="display: -webkit-flexbox" class="horizontal-box">
     83<div style="display: -webkit-flexbox" class="flexbox">
    8484  <div data-expected-width="250" style="width: -webkit-flex(1 1 300px)"></div>
    8585  <div data-expected-width="150" style="width: -webkit-flex(2 3 300px)"></div>
     
    8888
    8989<!-- Test flexitem borders. -->
    90 <div style="display: -webkit-flexbox" class="horizontal-box">
     90<div style="display: -webkit-flexbox" class="flexbox">
    9191  <div data-expected-width="250" style="width: -webkit-flex(1); border-left: 150px solid black"></div>
    9292  <div data-expected-width="250" style="width: -webkit-flex(1 0 0px); border-right: 150px solid orange"></div>
     
    9494</div>
    9595
    96 <div style="display: -webkit-flexbox" class="horizontal-box">
     96<div style="display: -webkit-flexbox" class="flexbox">
    9797  <div data-expected-width="300" style="width: 100px; border: 100px solid black"></div>
    9898  <div data-expected-width="200" style="width: -webkit-flex(2)"></div>
     
    101101
    102102<!-- Test flexitem padding. -->
    103 <div style="display: -webkit-flexbox" class="horizontal-box">
     103<div style="display: -webkit-flexbox" class="flexbox">
    104104  <div data-expected-width="250" style="width: -webkit-flex(1); padding-left: 150px"></div>
    105105  <div data-expected-width="250" style="width: -webkit-flex(1 0 0px); padding-right: 150px"></div>
     
    107107</div>
    108108
    109 <div style="display: -webkit-flexbox" class="horizontal-box">
     109<div style="display: -webkit-flexbox" class="flexbox">
    110110  <div data-expected-width="300" style="width: 100px; padding: 100px"></div>
    111111  <div data-expected-width="200" style="width: -webkit-flex(2)"></div>
     
    113113</div>
    114114
    115 <div style="display: -webkit-flexbox" class="horizontal-box">
     115<div style="display: -webkit-flexbox" class="flexbox">
    116116  <div data-expected-width="200" style="width: -webkit-flex(1); padding-left: 25%"></div>
    117117  <div data-expected-width="150" style="width: -webkit-flex(3);"></div>
     
    119119</div>
    120120
    121 <div style="display: -webkit-flexbox" class="horizontal-box">
     121<div style="display: -webkit-flexbox" class="flexbox">
    122122  <div data-expected-width="200" style="width: -webkit-flex(1); padding-left: 50px; border-right: 50px solid black"></div>
    123123  <div data-expected-width="250" style="width: -webkit-flex(2); border-right: 50px solid orange"></div>
     
    126126
    127127<!-- Test items with an intrinsic size. -->
    128 <div style="display: -webkit-flexbox" class="horizontal-box">
     128<div style="display: -webkit-flexbox" class="flexbox">
    129129  <div data-expected-width="120" style="width: -webkit-flex(1)">
    130130      <div style="width: 100px; height: 100%;"></div>
     
    134134</div>
    135135
    136 <div style="display: -webkit-flexbox" class="horizontal-box">
     136<div style="display: -webkit-flexbox" class="flexbox">
    137137  <div data-expected-width="200" style="width: -webkit-flex(1 0 0)">
    138138      <div style="width: 100px; height: 100%;"></div>
     
    144144<!-- Test border/padding/margin on the flexbox itself. -->
    145145<div style="border: 10px solid; display: inline-block;">
    146     <div data-expected-width="700" style="display: -webkit-flexbox; padding-left: 10px; padding-right: 20px; border-left: 30px solid; border-right: 40px solid; margin-left: 50px; margin-right:60px;" class="horizontal-box ">
     146    <div data-expected-width="700" style="display: -webkit-flexbox; padding-left: 10px; padding-right: 20px; border-left: 30px solid; border-right: 40px solid; margin-left: 50px; margin-right:60px;" class="flexbox ">
    147147      <div data-offset-x="100" data-expected-width="200" style="width: -webkit-flex(1)"></div>
    148148      <div data-offset-x="300" data-expected-width="200" style="width: -webkit-flex(1)"></div>
  • trunk/LayoutTests/css3/flexbox/002.html

    r93921 r95644  
    55    margin: 0;
    66}
    7 .horizontal-box {
     7.flexbox {
    88    width: 600px;
    99    display: -webkit-flexbox;
     
    1111    position: relative;
    1212}
    13 .horizontal-box div {
     13.flexbox div {
    1414    height: 20px;
    1515    border: 0;
    1616}
    1717
    18 .horizontal-box :nth-child(1) {
     18.flexbox :nth-child(1) {
    1919    background-color: blue;
    2020}
    21 .horizontal-box :nth-child(2) {
     21.flexbox :nth-child(2) {
    2222    background-color: green;
    2323}
    24 .horizontal-box :nth-child(3) {
     24.flexbox :nth-child(3) {
    2525    background-color: red;
    2626}
     
    3131</script>
    3232<script src="resources/flexbox.js"></script>
    33 <body onload="checkHorizontalBoxen()">
    34 <div class="horizontal-box">
     33<body onload="checkFlexBoxen()">
     34<div class="flexbox">
    3535  <div data-expected-width="200" style="width: -webkit-flex(1 0 0);"></div>
    3636  <div data-expected-width="100" data-offset-x="250" style="width: 100px; margin: 0 50px;"></div>
     
    3939
    4040<!-- Margins set to auto have a positive flex of 1.  In this example, the left and right margin should each be 100px. -->
    41 <div class="horizontal-box">
     41<div class="flexbox">
    4242  <div data-expected-width="100" style="width: -webkit-flex(1 0 0);"></div>
    4343  <div data-expected-width="200" data-offset-x="200" style="width: 200px; margin: 0 auto;"></div>
     
    4545</div>
    4646
    47 <div class="horizontal-box">
     47<div class="flexbox">
    4848  <div data-expected-width="100" style="width: -webkit-flex(1 0 0);"></div>
    4949  <div data-expected-width="200" data-offset-x="200" style="width: -webkit-flex(1 0 100px); margin-left: auto;"></div>
     
    5252
    5353<!-- margin: auto has a negative flex of 0 -->
    54 <div class="horizontal-box">
     54<div class="flexbox">
    5555  <div data-expected-width="150" style="width: -webkit-flex(1 1 300px);"></div>
    5656  <div data-expected-width="300" data-offset-x="150" style="width: -webkit-flex(1 0 300px); margin: 0 auto;"></div>
     
    5959
    6060<!-- The centering use case. -->
    61 <div class="horizontal-box">
     61<div class="flexbox">
    6262  <div data-expected-width="300px" data-offset-x="150" style="width: -webkit-flex(0 0 300px); margin: 0 auto;"></div>
    6363</div>
    6464
    65 <div class="horizontal-box">
     65<div class="flexbox">
    6666  <div data-expected-width="400px" data-offset-x="100" style="width: -webkit-flex(1 0 300px); margin: 0 auto;"></div>
    6767</div>
    6868
    69 <div class="horizontal-box">
     69<div class="flexbox">
    7070  <div data-expected-width="400" data-offset-x="100" style="width: -webkit-flex(4); margin: 0 auto;">
    7171      <div style="width: 100px; height: 100%;"></div>
     
    7373</div>
    7474
    75 <div class="horizontal-box" style="margin: 100px;">
     75<div class="flexbox" style="margin: 100px;">
    7676  <div data-expected-width="100" data-offset-x="100" style="width: -webkit-flex(1); margin: 0 auto;"></div>
    7777  <div data-expected-width="100" data-offset-x="400" style="width: -webkit-flex(1); margin: 0 auto;"></div>
    7878</div>
    7979
    80 <div class="horizontal-box" style="padding: 100px;">
     80<div class="flexbox" style="padding: 100px;">
    8181  <div data-expected-width="100" data-offset-x="200" style="width: -webkit-flex(1 0 0px); margin: 0 auto;"></div>
    8282  <div data-expected-width="100" data-offset-x="500" style="width: -webkit-flex(1 0 0em); margin: 0 auto;"></div>
    8383</div>
    8484
    85 <div class="horizontal-box">
     85<div class="flexbox">
    8686  <div data-expected-width="50" data-offset-x="50" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
    8787  <div data-expected-width="300" data-offset-x="150" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
  • trunk/LayoutTests/css3/flexbox/003.html

    r93651 r95644  
    55    margin: 0;
    66}
    7 .horizontal-box {
     7.flexbox {
    88    width: 600px;
    99    display: -webkit-flexbox;
     
    1111    position: relative;
    1212}
    13 .horizontal-box div {
     13.flexbox div {
    1414    height: 20px;
    1515    border: 0;
    1616}
    1717
    18 .horizontal-box :nth-child(1) {
     18.flexbox :nth-child(1) {
    1919    background-color: blue;
    2020}
    21 .horizontal-box :nth-child(2) {
     21.flexbox :nth-child(2) {
    2222    background-color: green;
    2323}
    24 .horizontal-box :nth-child(3) {
     24.flexbox :nth-child(3) {
    2525    background-color: red;
    2626}
     
    3131</script>
    3232<script src="resources/flexbox.js"></script>
    33 <body onload="checkHorizontalBoxen()">
    34 <div class="horizontal-box">
     33<body onload="checkFlexBoxen()">
     34<div class="flexbox">
    3535  <div data-expected-width="100" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
    3636  <div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
     
    3939
    4040<!-- The first two flexitems should hit their max width and the third item fills the remaining space. -->
    41 <div class="horizontal-box">
     41<div class="flexbox">
    4242  <div data-expected-width="50" style="width: -webkit-flex(1 0 0); max-width: 50px;"></div>
    4343  <div data-expected-width="300" style="width: -webkit-flex(4 0 0); max-width: 300px;"></div>
     
    4545</div>
    4646
    47 <div class="horizontal-box">
     47<div class="flexbox">
    4848  <div data-expected-width="100" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
    4949  <div data-expected-width="300" style="width: -webkit-flex(1 0 200px); max-width: 300px;"></div>
     
    5252
    5353<!-- Test min-width. -->
    54 <div class="horizontal-box">
     54<div class="flexbox">
    5555  <div data-expected-width="350" style="width: -webkit-flex(1 1 400px); min-width: 350px;"></div>
    5656  <div data-expected-width="250" style="width: -webkit-flex(1 1 400px);"></div>
     
    5858
    5959<!-- The flex items can overflow the flexbox. -->
    60 <div class="horizontal-box">
     60<div class="flexbox">
    6161  <div data-expected-width="350" style="width: -webkit-flex(1 1 400px); min-width: 350px;"></div>
    6262  <div data-expected-width="300" style="width: -webkit-flex(2 0 300px); max-width: 300px;"></div>
     
    6464</div>
    6565
    66 <div class="horizontal-box">
     66<div class="flexbox">
    6767  <div data-expected-width="100" data-offset-x="100" style="width: -webkit-flex(1 0 0); margin: 0 auto; max-width: 100px;"></div>
    6868  <div data-expected-width="200" data-offset-x="300" style="width: -webkit-flex(2 0 0);"></div>
     
    7171
    7272<!-- min-width and max-width take priority over the preferred size. -->
    73 <div class="horizontal-box">
     73<div class="flexbox">
    7474  <div data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px"></div>
    7575  <div data-expected-width="100" style="width: -webkit-flex(1 0 50%); max-width: 100px"></div>
  • trunk/LayoutTests/css3/flexbox/004.html

    r93996 r95644  
    55    margin: 0;
    66}
    7 .horizontal-box {
     7.flexbox {
    88    width: 600px;
    99    display: -webkit-flexbox;
     
    1111    position: relative;
    1212}
    13 .horizontal-box div {
     13.flexbox div {
    1414    height: 20px;
    1515    border: 0;
    1616}
    1717
    18 .horizontal-box :nth-child(1) {
     18.flexbox :nth-child(1) {
    1919    background-color: blue;
    2020}
    21 .horizontal-box :nth-child(2) {
     21.flexbox :nth-child(2) {
    2222    background-color: green;
    2323}
    24 .horizontal-box :nth-child(3) {
     24.flexbox :nth-child(3) {
    2525    background-color: red;
    2626}
     
    3131</script>
    3232<script src="resources/flexbox.js"></script>
    33 <body onload="checkHorizontalBoxen()">
    34 <div class="horizontal-box">
     33<body onload="checkFlexBoxen()">
     34<div class="flexbox">
    3535  <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
    3636  <div data-expected-width="100" data-offset-x="100" style="width: 100px;"></div>
     
    3838</div>
    3939
    40 <div class="horizontal-box" style="-webkit-flex-pack: end">
     40<div class="flexbox" style="-webkit-flex-pack: end">
    4141  <div data-expected-width="100" data-offset-x="300" style="width: -webkit-flex(0 0 100px);"></div>
    4242  <div data-expected-width="100" data-offset-x="400" style="width: 100px;"></div>
     
    4444</div>
    4545
    46 <div class="horizontal-box" style="-webkit-flex-pack: center">
     46<div class="flexbox" style="-webkit-flex-pack: center">
    4747  <div data-expected-width="100" data-offset-x="150" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
    4848  <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div>
     
    5050</div>
    5151
    52 <div class="horizontal-box" style="-webkit-flex-pack: justify">
     52<div class="flexbox" style="-webkit-flex-pack: justify">
    5353  <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
    5454  <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div>
     
    5757
    5858<!-- If there's only one child, we pack start. -->
    59 <div class="horizontal-box" style="-webkit-flex-pack: justify">
     59<div class="flexbox" style="-webkit-flex-pack: justify">
    6060  <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
    6161</div>
    6262
    6363<!-- The flex-pack does nothing here because the margin:auto eats all the available space. -->
    64 <div class="horizontal-box" style="-webkit-flex-pack: end">
     64<div class="flexbox" style="-webkit-flex-pack: end">
    6565  <div data-expected-width="100" data-offset-x="0" style="width: 100px;"></div>
    6666  <div data-expected-width="100" data-offset-x="100" style="width: 100px; margin-right: auto"></div>
     
    6969
    7070<!-- The flex-pack does nothing here because we are shrinking. -->
    71 <div class="horizontal-box" style="-webkit-flex-pack: end">
     71<div class="flexbox" style="-webkit-flex-pack: end">
    7272  <div data-expected-width="200" data-offset-x="0" style="width: -webkit-flex(0 1 300px);"></div>
    7373  <div data-expected-width="200" data-offset-x="200" style="width: 200px;"></div>
  • trunk/LayoutTests/css3/flexbox/resources/flexbox.js

    r95577 r95644  
    3434}
    3535
    36 function checkHorizontalBoxen()
     36function checkFlexBoxen()
    3737{
    38     var flexboxen = document.getElementsByClassName("horizontal-box");
     38    var flexboxen = document.getElementsByClassName("flexbox");
    3939    Array.prototype.forEach.call(flexboxen, function(flexbox) {
    4040      var failures = [];
  • trunk/LayoutTests/css3/flexbox/writing-modes.html

    r95577 r95644  
    55    margin: 0;
    66}
    7 /* FIXME: flexbox.js iterates over horizontal-box elements. Rename this to flexbox. */
    8 .horizontal-box {
     7.flexbox {
    98    width: 600px;
    109    display: -webkit-flexbox;
    1110}
    12 .horizontal-box div {
     11.flexbox div {
    1312    height: 20px;
    1413    border: 0;
     
    3938}
    4039
    41 .horizontal-box > :nth-child(1) {
     40.flexbox > :nth-child(1) {
    4241    background-color: blue;
    4342}
    44 .horizontal-box > :nth-child(2) {
     43.flexbox > :nth-child(2) {
    4544    background-color: green;
    4645}
    47 .horizontal-box > :nth-child(3) {
     46.flexbox > :nth-child(3) {
    4847    background-color: red;
    4948}
     
    5453</script>
    5554<script src="resources/flexbox.js"></script>
    56 <body onload="checkHorizontalBoxen()">
     55<body onload="checkFlexBoxen()">
    5756
    58 <div class="horizontal-box rtl">
     57<div class="flexbox rtl">
    5958  <div data-expected-width="50" data-offset-x="500" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
    6059  <div data-expected-width="300" data-offset-x="150" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
     
    6261</div>
    6362
    64 <div class="horizontal-box rtl">
     63<div class="flexbox rtl">
    6564  <div data-expected-width="50" data-offset-x="500" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
    6665  <div data-expected-width="300" data-offset-x="150" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
     
    6867</div>
    6968
    70 <div class="horizontal-box rtl" style="-webkit-margin-start: 20px;-webkit-margin-end: 50px;">
     69<div class="flexbox rtl" style="-webkit-margin-start: 20px;-webkit-margin-end: 50px;">
    7170  <div data-expected-width="50" data-offset-x="550" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
    7271  <div data-expected-width="300" data-offset-x="200" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
     
    7574
    7675<div style="position:relative">
    77 <div class="horizontal-box vertical-lr">
     76<div class="flexbox vertical-lr">
    7877  <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0);"></div>
    7978  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
     
    8382
    8483<div style="position:relative">
    85 <div class="horizontal-box vertical-lr">
     84<div class="flexbox vertical-lr">
    8685  <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0);"></div>
    8786  <div data-expected-height="300" data-offset-y="150" class="bt" style="height: -webkit-flex(2 0 0);"></div>
     
    9190
    9291<div style="position:relative">
    93 <div class="horizontal-box vertical-lr">
     92<div class="flexbox vertical-lr">
    9493  <div data-expected-height="450" data-offset-y="0" style="height: -webkit-flex(1 0 0);-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;"></div>
    9594  <div data-expected-height="100" data-offset-y="450" style="height: -webkit-flex(2 0 0);"></div>
     
    9998
    10099<div style="position:relative">
    101 <div class="horizontal-box vertical-lr">
     100<div class="flexbox vertical-lr">
    102101  <div data-expected-height="300" data-offset-y="0" class="bt" style="height: -webkit-flex(1 0 0);-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;"></div>
    103102  <div data-expected-height="200" data-offset-y="300" style="height: -webkit-flex(2 0 0);"></div>
     
    108107
    109108<div style="position:relative">
    110 <div class="horizontal-box vertical-lr">
     109<div class="flexbox vertical-lr">
    111110  <div data-expected-height="100" data-offset-y="100" style="height: -webkit-flex(1 0 0); margin: auto 0;"></div>
    112111  <div data-expected-height="200" data-offset-y="300" style="height: -webkit-flex(2 0 0);"></div>
     
    116115
    117116<div style="position:relative">
    118 <div class="horizontal-box vertical-lr">
     117<div class="flexbox vertical-lr">
    119118  <div data-expected-height="50" data-offset-y="50" style="height: -webkit-flex(1 0 0);margin: auto 0;"></div>
    120119  <div data-expected-height="400" data-offset-y="150" style="height: -webkit-flex(2 0 auto);"><div style="width:200px;height:300px;background-color:orange;"></div></div>
     
    124123
    125124<div style="position:relative">
    126 <div class="horizontal-box vertical-lr">
     125<div class="flexbox vertical-lr">
    127126  <div data-expected-height="50" data-offset-y="50" style="height: -webkit-flex(1 0 0);margin: auto 0;"></div>
    128127  <div data-expected-height="400" data-offset-y="150" class="bt" style="height: -webkit-flex(2 0 auto);"><div style="width:200px;height:300px;background-color:orange;"></div></div>
     
    132131
    133132<div style="position:relative">
    134 <div class="horizontal-box vertical-lr">
     133<div class="flexbox vertical-lr">
    135134  <div data-expected-height="100" data-offset-y="100" style="height: -webkit-flex(1 0 0);-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;"></div>
    136135  <div data-expected-height="200" data-offset-y="300" style="height: -webkit-flex(2 0 0);"></div>
     
    140139
    141140<div style="position:relative">
    142 <div class="horizontal-box vertical-lr">
     141<div class="flexbox vertical-lr">
    143142  <div data-expected-height="150" data-offset-y="0" class="bt" style="height: -webkit-flex(1 0 0);-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;"></div>
    144143  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
     
    148147
    149148<div style="position:relative">
    150 <div class="horizontal-box vertical-lr rtl">
     149<div class="flexbox vertical-lr rtl">
    151150  <div data-expected-height="50" data-offset-y="500" style="height: -webkit-flex(1 0 0); margin: auto 0;"></div>
    152151  <div data-expected-height="300" data-offset-y="150" class="bt" style="height: -webkit-flex(2 0 0); padding: 100px 0;"></div>
     
    155154</div>
    156155
    157 <div class="horizontal-box vertical-lr">
     156<div class="flexbox vertical-lr">
    158157  <div data-expected-height="350" style="height: -webkit-flex(1 1 400px); min-height: 350px;"></div>
    159158  <div data-expected-height="250" style="height: -webkit-flex(1 1 400px);"></div>
     
    162161<!-- FIXME: There's a bug where offsetLeft reports the wrong value in vertical-rl writing-mode.-->
    163162<div style="position:relative">
    164 <div class="horizontal-box vertical-rl">
     163<div class="flexbox vertical-rl">
    165164  <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="height: -webkit-flex(1 0 0);"></div>
    166165  <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="height: -webkit-flex(2 0 0);"></div>
     
    171170<!-- FIXME: There's a bug where offsetTop reports the wrong value in horizontal-bt writing-mode.-->
    172171<div style="position:relative">
    173 <div class="horizontal-box bt" style="height:200px">
     172<div class="flexbox bt" style="height:200px">
    174173  <div data-offset-y="180" data-offset-x="580" style="width: -webkit-flex(1 0 0);"></div>
    175174  <div data-offset-y="180" data-offset-x="580" style="width: -webkit-flex(2 0 0);"></div>
Note: See TracChangeset for help on using the changeset viewer.