projects / profile / ivi / webkit-efl.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 9bdef57)
[flexbox] rename classnames and methods in the tests to not assume horizontal
authorojan@chromium.org <ojan@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 21 Sep 2011 17:00:43 +0000 (17:00 +0000)
committerojan@chromium.org <ojan@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 21 Sep 2011 17:00:43 +0000 (17:00 +0000)
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:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@95644 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog patch | blob | history
LayoutTests/css3/flexbox/001.html patch | blob | history
LayoutTests/css3/flexbox/002.html patch | blob | history
LayoutTests/css3/flexbox/003.html patch | blob | history
LayoutTests/css3/flexbox/004.html patch | blob | history
LayoutTests/css3/flexbox/resources/flexbox.js patch | blob | history
LayoutTests/css3/flexbox/writing-modes.html patch | blob | history

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 4a7ebb1..19976d9 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,19 @@
+2011-09-21  Ojan Vafai  <ojan@chromium.org>
+
+        [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:
+
 2011-09-21  Mike Reed  <reed@google.com>
 
         need rebaseline for gradient speedup in skia
diff --git a/LayoutTests/css3/flexbox/001.html b/LayoutTests/css3/flexbox/001.html
index 396acce..509d9d4 100644 (file)
--- a/LayoutTests/css3/flexbox/001.html
+++ b/LayoutTests/css3/flexbox/001.html
@@ -4,21 +4,21 @@
 body {
     margin: 0;
 }
-.horizontal-box {
+.flexbox {
     width: 600px;
 }
-.horizontal-box div {
+.flexbox div {
     height: 20px;
     border: 0;
 }
 
-.horizontal-box :nth-child(1) {
+.flexbox :nth-child(1) {
     background-color: blue;
 }
-.horizontal-box :nth-child(2) {
+.flexbox :nth-child(2) {
     background-color: green;
 }
-.horizontal-box :nth-child(3) {
+.flexbox :nth-child(3) {
     background-color: red;
 }
 </style>
@@ -27,105 +27,105 @@ if (window.layoutTestController)
     layoutTestController.dumpAsText();
 </script>
 <script src="resources/flexbox.js"></script>
-<body onload="checkHorizontalBoxen()">
+<body onload="checkFlexBoxen()">
 
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="200" style="width: -webkit-flex(1)"></div>
   <div data-expected-width="200" style="width: -webkit-flex(1)"></div>
   <div data-expected-width="200" style="width: -webkit-flex(1)"></div>
 </div>
 
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="200" style="width: -webkit-flex(.5)"></div>
   <div data-expected-width="200" style="width: -webkit-flex(.5)"></div>
   <div data-expected-width="200" style="width: -webkit-flex(.5)"></div>
 </div>
 
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="300" style="width: -webkit-flex(3)"></div>
   <div data-expected-width="200" style="width: -webkit-flex(2)"></div>
   <div data-expected-width="100" style="width: -webkit-flex(1)"></div>
 </div>
 
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="250" style="width: -webkit-flex(1)"></div>
   <div data-expected-width="250" style="width: -webkit-flex(1)"></div>
   <div data-expected-width="100" style="width: 100px"></div>
 </div>
 
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="150" style="width: -webkit-flex(1)"></div>
   <div data-expected-width="150" style="width: -webkit-flex(1)"></div>
   <div data-expected-width="300" style="width: 50%"></div>
 </div>
 
 <!-- The first two boxes should fill the extra 300px evenly (each gets 150px extra). -->
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="150" style="width: -webkit-flex(1)"></div>
   <div data-expected-width="350" style="width: -webkit-flex(1 200px)"></div>
   <div data-expected-width="100" style="width: 100px"></div>
 </div>
 
 <!-- Like the last test, except the middle box gets more space than the first box. -->
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="100" style="width: -webkit-flex(1)"></div>
   <div data-expected-width="400" style="width: -webkit-flex(2 33.333333%)"></div>
   <div data-expected-width="100" style="width: 100px"></div>
 </div>
 
 <!-- Test some negative flexing. -->
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="200" style="width: -webkit-flex(1 1 300px)"></div>
   <div data-expected-width="200" style="width: -webkit-flex(2 1 300px)"></div>
   <div data-expected-width="200" style="width: -webkit-flex(3 1 300px)"></div>
 </div>
 
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="250" style="width: -webkit-flex(1 1 300px)"></div>
   <div data-expected-width="150" style="width: -webkit-flex(2 3 300px)"></div>
   <div data-expected-width="200" style="width: 200px"></div>
 </div>
 
 <!-- Test flexitem borders. -->
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="250" style="width: -webkit-flex(1); border-left: 150px solid black"></div>
   <div data-expected-width="250" style="width: -webkit-flex(1 0 0px); border-right: 150px solid orange"></div>
   <div data-expected-width="100" style="width: -webkit-flex(1 0 0px)"></div>
 </div>
 
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="300" style="width: 100px; border: 100px solid black"></div>
   <div data-expected-width="200" style="width: -webkit-flex(2)"></div>
   <div data-expected-width="100" style="width: -webkit-flex(1)"></div>
 </div>
 
 <!-- Test flexitem padding. -->
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="250" style="width: -webkit-flex(1); padding-left: 150px"></div>
   <div data-expected-width="250" style="width: -webkit-flex(1 0 0px); padding-right: 150px"></div>
   <div data-expected-width="100" style="width: -webkit-flex(1 0 0px)"></div>
 </div>
 
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="300" style="width: 100px; padding: 100px"></div>
   <div data-expected-width="200" style="width: -webkit-flex(2)"></div>
   <div data-expected-width="100" style="width: -webkit-flex(1)"></div>
 </div>
 
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="200" style="width: -webkit-flex(1); padding-left: 25%"></div>
   <div data-expected-width="150" style="width: -webkit-flex(3);"></div>
   <div data-expected-width="250" style="width: 100px; padding-right: 25%"></div>
 </div>
 
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="200" style="width: -webkit-flex(1); padding-left: 50px; border-right: 50px solid black"></div>
   <div data-expected-width="250" style="width: -webkit-flex(2); border-right: 50px solid orange"></div>
   <div data-expected-width="150" style="width: -webkit-flex(1); padding-right: 50px;"></div>
 </div>
 
 <!-- Test items with an intrinsic size. -->
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="120" style="width: -webkit-flex(1)">
       <div style="width: 100px; height: 100%;"></div>
   </div>
@@ -133,7 +133,7 @@ if (window.layoutTestController)
   <div data-expected-width="240" style="width: -webkit-flex(2)"></div>
 </div>
 
-<div style="display: -webkit-flexbox" class="horizontal-box">
+<div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="200" style="width: -webkit-flex(1 0 0)">
       <div style="width: 100px; height: 100%;"></div>
   </div>
@@ -143,7 +143,7 @@ if (window.layoutTestController)
 
 <!-- Test border/padding/margin on the flexbox itself. -->
 <div style="border: 10px solid; display: inline-block;">
-    <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 ">
+    <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 ">
       <div data-offset-x="100" data-expected-width="200" style="width: -webkit-flex(1)"></div>
       <div data-offset-x="300" data-expected-width="200" style="width: -webkit-flex(1)"></div>
       <div data-offset-x="500" data-expected-width="200" style="width: -webkit-flex(1)"></div>
diff --git a/LayoutTests/css3/flexbox/002.html b/LayoutTests/css3/flexbox/002.html
index 352d54b..94d883e 100644 (file)
--- a/LayoutTests/css3/flexbox/002.html
+++ b/LayoutTests/css3/flexbox/002.html
@@ -4,24 +4,24 @@
 body {
     margin: 0;
 }
-.horizontal-box {
+.flexbox {
     width: 600px;
     display: -webkit-flexbox;
     background-color: #aaa;
     position: relative;
 }
-.horizontal-box div {
+.flexbox div {
     height: 20px;
     border: 0;
 }
 
-.horizontal-box :nth-child(1) {
+.flexbox :nth-child(1) {
     background-color: blue;
 }
-.horizontal-box :nth-child(2) {
+.flexbox :nth-child(2) {
     background-color: green;
 }
-.horizontal-box :nth-child(3) {
+.flexbox :nth-child(3) {
     background-color: red;
 }
 </style>
@@ -30,59 +30,59 @@ if (window.layoutTestController)
     layoutTestController.dumpAsText();
 </script>
 <script src="resources/flexbox.js"></script>
-<body onload="checkHorizontalBoxen()">
-<div class="horizontal-box">
+<body onload="checkFlexBoxen()">
+<div class="flexbox">
   <div data-expected-width="200" style="width: -webkit-flex(1 0 0);"></div>
   <div data-expected-width="100" data-offset-x="250" style="width: 100px; margin: 0 50px;"></div>
   <div data-expected-width="200" data-offset-x="400" style="width: -webkit-flex(1 0 0)"></div>
 </div>
 
 <!-- Margins set to auto have a positive flex of 1.  In this example, the left and right margin should each be 100px. -->
-<div class="horizontal-box">
+<div class="flexbox">
   <div data-expected-width="100" style="width: -webkit-flex(1 0 0);"></div>
   <div data-expected-width="200" data-offset-x="200" style="width: 200px; margin: 0 auto;"></div>
   <div data-expected-width="100" data-offset-x="500" style="width: -webkit-flex(1 0 0)"></div>
 </div>
 
-<div class="horizontal-box">
+<div class="flexbox">
   <div data-expected-width="100" style="width: -webkit-flex(1 0 0);"></div>
   <div data-expected-width="200" data-offset-x="200" style="width: -webkit-flex(1 0 100px); margin-left: auto;"></div>
   <div data-expected-width="100" data-offset-x="400" style="width: -webkit-flex(1 0 0); margin-right: 100px"></div>
 </div>
 
 <!-- margin: auto has a negative flex of 0 -->
-<div class="horizontal-box">
+<div class="flexbox">
   <div data-expected-width="150" style="width: -webkit-flex(1 1 300px);"></div>
   <div data-expected-width="300" data-offset-x="150" style="width: -webkit-flex(1 0 300px); margin: 0 auto;"></div>
   <div data-expected-width="150" data-offset-x="450" style="width: -webkit-flex(1 1 300px);"></div>
 </div>
 
 <!-- The centering use case. -->
-<div class="horizontal-box">
+<div class="flexbox">
   <div data-expected-width="300px" data-offset-x="150" style="width: -webkit-flex(0 0 300px); margin: 0 auto;"></div>
 </div>
 
-<div class="horizontal-box">
+<div class="flexbox">
   <div data-expected-width="400px" data-offset-x="100" style="width: -webkit-flex(1 0 300px); margin: 0 auto;"></div>
 </div>
 
-<div class="horizontal-box">
+<div class="flexbox">
   <div data-expected-width="400" data-offset-x="100" style="width: -webkit-flex(4); margin: 0 auto;">
       <div style="width: 100px; height: 100%;"></div>
   </div>
 </div>
 
-<div class="horizontal-box" style="margin: 100px;">
+<div class="flexbox" style="margin: 100px;">
   <div data-expected-width="100" data-offset-x="100" style="width: -webkit-flex(1); margin: 0 auto;"></div>
   <div data-expected-width="100" data-offset-x="400" style="width: -webkit-flex(1); margin: 0 auto;"></div>
 </div>
 
-<div class="horizontal-box" style="padding: 100px;">
+<div class="flexbox" style="padding: 100px;">
   <div data-expected-width="100" data-offset-x="200" style="width: -webkit-flex(1 0 0px); margin: 0 auto;"></div>
   <div data-expected-width="100" data-offset-x="500" style="width: -webkit-flex(1 0 0em); margin: 0 auto;"></div>
 </div>
 
-<div class="horizontal-box">
+<div class="flexbox">
   <div data-expected-width="50" data-offset-x="50" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
   <div data-expected-width="300" data-offset-x="150" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
   <div data-expected-width="50" data-offset-x="550" style="width: -webkit-flex(1 0 0); margin-left: 100px;"></div>
diff --git a/LayoutTests/css3/flexbox/003.html b/LayoutTests/css3/flexbox/003.html
index 926e3ae..bc7ecf1 100644 (file)
--- a/LayoutTests/css3/flexbox/003.html
+++ b/LayoutTests/css3/flexbox/003.html
@@ -4,24 +4,24 @@
 body {
     margin: 0;
 }
-.horizontal-box {
+.flexbox {
     width: 600px;
     display: -webkit-flexbox;
     background-color: #aaa;
     position: relative;
 }
-.horizontal-box div {
+.flexbox div {
     height: 20px;
     border: 0;
 }
 
-.horizontal-box :nth-child(1) {
+.flexbox :nth-child(1) {
     background-color: blue;
 }
-.horizontal-box :nth-child(2) {
+.flexbox :nth-child(2) {
     background-color: green;
 }
-.horizontal-box :nth-child(3) {
+.flexbox :nth-child(3) {
     background-color: red;
 }
 </style>
@@ -30,47 +30,47 @@ if (window.layoutTestController)
     layoutTestController.dumpAsText();
 </script>
 <script src="resources/flexbox.js"></script>
-<body onload="checkHorizontalBoxen()">
-<div class="horizontal-box">
+<body onload="checkFlexBoxen()">
+<div class="flexbox">
   <div data-expected-width="100" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
   <div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
   <div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
 </div>
 
 <!-- The first two flexitems should hit their max width and the third item fills the remaining space. -->
-<div class="horizontal-box">
+<div class="flexbox">
   <div data-expected-width="50" style="width: -webkit-flex(1 0 0); max-width: 50px;"></div>
   <div data-expected-width="300" style="width: -webkit-flex(4 0 0); max-width: 300px;"></div>
   <div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
 </div>
 
-<div class="horizontal-box">
+<div class="flexbox">
   <div data-expected-width="100" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
   <div data-expected-width="300" style="width: -webkit-flex(1 0 200px); max-width: 300px;"></div>
   <div data-expected-width="200" style="width: -webkit-flex(1 0 0);"></div>
 </div>
 
 <!-- Test min-width. -->
-<div class="horizontal-box">
+<div class="flexbox">
   <div data-expected-width="350" style="width: -webkit-flex(1 1 400px); min-width: 350px;"></div>
   <div data-expected-width="250" style="width: -webkit-flex(1 1 400px);"></div>
 </div>
 
 <!-- The flex items can overflow the flexbox. -->
-<div class="horizontal-box">
+<div class="flexbox">
   <div data-expected-width="350" style="width: -webkit-flex(1 1 400px); min-width: 350px;"></div>
   <div data-expected-width="300" style="width: -webkit-flex(2 0 300px); max-width: 300px;"></div>
   <div data-expected-width="0" style="width: -webkit-flex(1 0 0);"></div>
 </div>
 
-<div class="horizontal-box">
+<div class="flexbox">
   <div data-expected-width="100" data-offset-x="100" style="width: -webkit-flex(1 0 0); margin: 0 auto; max-width: 100px;"></div>
   <div data-expected-width="200" data-offset-x="300" style="width: -webkit-flex(2 0 0);"></div>
   <div data-expected-width="100" data-offset-x="500" style="width: -webkit-flex(1 0 0);"></div>
 </div>
 
 <!-- min-width and max-width take priority over the preferred size. -->
-<div class="horizontal-box">
+<div class="flexbox">
   <div data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px"></div>
   <div data-expected-width="100" style="width: -webkit-flex(1 0 50%); max-width: 100px"></div>
 </div>
diff --git a/LayoutTests/css3/flexbox/004.html b/LayoutTests/css3/flexbox/004.html
index dda1b66..cc076bb 100644 (file)
--- a/LayoutTests/css3/flexbox/004.html
+++ b/LayoutTests/css3/flexbox/004.html
@@ -4,24 +4,24 @@
 body {
     margin: 0;
 }
-.horizontal-box {
+.flexbox {
     width: 600px;
     display: -webkit-flexbox;
     background-color: #aaa;
     position: relative;
 }
-.horizontal-box div {
+.flexbox div {
     height: 20px;
     border: 0;
 }
 
-.horizontal-box :nth-child(1) {
+.flexbox :nth-child(1) {
     background-color: blue;
 }
-.horizontal-box :nth-child(2) {
+.flexbox :nth-child(2) {
     background-color: green;
 }
-.horizontal-box :nth-child(3) {
+.flexbox :nth-child(3) {
     background-color: red;
 }
 </style>
@@ -30,45 +30,45 @@ if (window.layoutTestController)
     layoutTestController.dumpAsText();
 </script>
 <script src="resources/flexbox.js"></script>
-<body onload="checkHorizontalBoxen()">
-<div class="horizontal-box">
+<body onload="checkFlexBoxen()">
+<div class="flexbox">
   <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="100" style="width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="200" style="width: 100px;"></div>
 </div>
 
-<div class="horizontal-box" style="-webkit-flex-pack: end">
+<div class="flexbox" style="-webkit-flex-pack: end">
   <div data-expected-width="100" data-offset-x="300" style="width: -webkit-flex(0 0 100px);"></div>
   <div data-expected-width="100" data-offset-x="400" style="width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
 </div>
 
-<div class="horizontal-box" style="-webkit-flex-pack: center">
+<div class="flexbox" style="-webkit-flex-pack: center">
   <div data-expected-width="100" data-offset-x="150" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="350" style="width: 100px;"></div>
 </div>
 
-<div class="horizontal-box" style="-webkit-flex-pack: justify">
+<div class="flexbox" style="-webkit-flex-pack: justify">
   <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
 </div>
 
 <!-- If there's only one child, we pack start. -->
-<div class="horizontal-box" style="-webkit-flex-pack: justify">
+<div class="flexbox" style="-webkit-flex-pack: justify">
   <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
 </div>
 
 <!-- The flex-pack does nothing here because the margin:auto eats all the available space. -->
-<div class="horizontal-box" style="-webkit-flex-pack: end">
+<div class="flexbox" style="-webkit-flex-pack: end">
   <div data-expected-width="100" data-offset-x="0" style="width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="100" style="width: 100px; margin-right: auto"></div>
   <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
 </div>
 
 <!-- The flex-pack does nothing here because we are shrinking. -->
-<div class="horizontal-box" style="-webkit-flex-pack: end">
+<div class="flexbox" style="-webkit-flex-pack: end">
   <div data-expected-width="200" data-offset-x="0" style="width: -webkit-flex(0 1 300px);"></div>
   <div data-expected-width="200" data-offset-x="200" style="width: 200px;"></div>
   <div data-expected-width="200" data-offset-x="400" style="width: 200px;"></div>
diff --git a/LayoutTests/css3/flexbox/resources/flexbox.js b/LayoutTests/css3/flexbox/resources/flexbox.js
index 7e8731c..f816d1e 100644 (file)
--- a/LayoutTests/css3/flexbox/resources/flexbox.js
+++ b/LayoutTests/css3/flexbox/resources/flexbox.js
@@ -33,9 +33,9 @@ function checkExpectedValues(node, failures)
     }
 }
 
-function checkHorizontalBoxen()
+function checkFlexBoxen()
 {
-    var flexboxen = document.getElementsByClassName("horizontal-box");
+    var flexboxen = document.getElementsByClassName("flexbox");
     Array.prototype.forEach.call(flexboxen, function(flexbox) {
       var failures = [];
       checkExpectedValues(flexbox, failures);
diff --git a/LayoutTests/css3/flexbox/writing-modes.html b/LayoutTests/css3/flexbox/writing-modes.html
index 012ab8e..f55f264 100644 (file)
--- a/LayoutTests/css3/flexbox/writing-modes.html
+++ b/LayoutTests/css3/flexbox/writing-modes.html
@@ -4,12 +4,11 @@
 body {
     margin: 0;
 }
-/* FIXME: flexbox.js iterates over horizontal-box elements. Rename this to flexbox. */
-.horizontal-box {
+.flexbox {
     width: 600px;
     display: -webkit-flexbox;
 }
-.horizontal-box div {
+.flexbox div {
     height: 20px;
     border: 0;
 }
@@ -38,13 +37,13 @@ body {
     -webkit-writing-mode: vertical-lr;
 }
 
-.horizontal-box > :nth-child(1) {
+.flexbox > :nth-child(1) {
     background-color: blue;
 }
-.horizontal-box > :nth-child(2) {
+.flexbox > :nth-child(2) {
     background-color: green;
 }
-.horizontal-box > :nth-child(3) {
+.flexbox > :nth-child(3) {
     background-color: red;
 }
 </style>
@@ -53,28 +52,28 @@ if (window.layoutTestController)
     layoutTestController.dumpAsText();
 </script>
 <script src="resources/flexbox.js"></script>
-<body onload="checkHorizontalBoxen()">
+<body onload="checkFlexBoxen()">
 
-<div class="horizontal-box rtl">
+<div class="flexbox rtl">
   <div data-expected-width="50" data-offset-x="500" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
   <div data-expected-width="300" data-offset-x="150" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
   <div data-expected-width="50" data-offset-x="100" style="width: -webkit-flex(1 0 0); margin-left: 100px;"></div>
 </div>
 
-<div class="horizontal-box rtl">
+<div class="flexbox rtl">
   <div data-expected-width="50" data-offset-x="500" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
   <div data-expected-width="300" data-offset-x="150" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
   <div data-expected-width="50" data-offset-x="0" style="width: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
 </div>
 
-<div class="horizontal-box rtl" style="-webkit-margin-start: 20px;-webkit-margin-end: 50px;">
+<div class="flexbox rtl" style="-webkit-margin-start: 20px;-webkit-margin-end: 50px;">
   <div data-expected-width="50" data-offset-x="550" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
   <div data-expected-width="300" data-offset-x="200" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
   <div data-expected-width="50" data-offset-x="50" style="width: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
 </div>
 
 <div style="position:relative">
-<div class="horizontal-box vertical-lr">
+<div class="flexbox vertical-lr">
   <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0);"></div>
   <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
   <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
@@ -82,7 +81,7 @@ if (window.layoutTestController)
 </div>
 
 <div style="position:relative">
-<div class="horizontal-box vertical-lr">
+<div class="flexbox vertical-lr">
   <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0);"></div>
   <div data-expected-height="300" data-offset-y="150" class="bt" style="height: -webkit-flex(2 0 0);"></div>
   <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
@@ -90,7 +89,7 @@ if (window.layoutTestController)
 </div>
 
 <div style="position:relative">
-<div class="horizontal-box vertical-lr">
+<div class="flexbox vertical-lr">
   <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>
   <div data-expected-height="100" data-offset-y="450" style="height: -webkit-flex(2 0 0);"></div>
   <div data-expected-height="50" data-offset-y="550" style="height: -webkit-flex(1 0 0);"></div>
@@ -98,7 +97,7 @@ if (window.layoutTestController)
 </div>
 
 <div style="position:relative">
-<div class="horizontal-box vertical-lr">
+<div class="flexbox vertical-lr">
   <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>
   <div data-expected-height="200" data-offset-y="300" style="height: -webkit-flex(2 0 0);"></div>
   <div data-expected-height="100" data-offset-y="500" style="height: -webkit-flex(1 0 0);"></div>
@@ -107,7 +106,7 @@ if (window.layoutTestController)
 
 
 <div style="position:relative">
-<div class="horizontal-box vertical-lr">
+<div class="flexbox vertical-lr">
   <div data-expected-height="100" data-offset-y="100" style="height: -webkit-flex(1 0 0); margin: auto 0;"></div>
   <div data-expected-height="200" data-offset-y="300" style="height: -webkit-flex(2 0 0);"></div>
   <div data-expected-height="100" data-offset-y="500" style="height: -webkit-flex(1 0 0);"></div>
@@ -115,7 +114,7 @@ if (window.layoutTestController)
 </div>
 
 <div style="position:relative">
-<div class="horizontal-box vertical-lr">
+<div class="flexbox vertical-lr">
   <div data-expected-height="50" data-offset-y="50" style="height: -webkit-flex(1 0 0);margin: auto 0;"></div>
   <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>
   <div data-expected-height="50" data-offset-y="550" style="height: -webkit-flex(1 0 0);"></div>
@@ -123,7 +122,7 @@ if (window.layoutTestController)
 </div>
 
 <div style="position:relative">
-<div class="horizontal-box vertical-lr">
+<div class="flexbox vertical-lr">
   <div data-expected-height="50" data-offset-y="50" style="height: -webkit-flex(1 0 0);margin: auto 0;"></div>
   <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>
   <div data-expected-height="50" data-offset-y="550" style="height: -webkit-flex(1 0 0);"></div>
@@ -131,7 +130,7 @@ if (window.layoutTestController)
 </div>
 
 <div style="position:relative">
-<div class="horizontal-box vertical-lr">
+<div class="flexbox vertical-lr">
   <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>
   <div data-expected-height="200" data-offset-y="300" style="height: -webkit-flex(2 0 0);"></div>
   <div data-expected-height="100" data-offset-y="500" style="height: -webkit-flex(1 0 0);"></div>
@@ -139,7 +138,7 @@ if (window.layoutTestController)
 </div>
 
 <div style="position:relative">
-<div class="horizontal-box vertical-lr">
+<div class="flexbox vertical-lr">
   <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>
   <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
   <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
@@ -147,21 +146,21 @@ if (window.layoutTestController)
 </div>
 
 <div style="position:relative">
-<div class="horizontal-box vertical-lr rtl">
+<div class="flexbox vertical-lr rtl">
   <div data-expected-height="50" data-offset-y="500" style="height: -webkit-flex(1 0 0); margin: auto 0;"></div>
   <div data-expected-height="300" data-offset-y="150" class="bt" style="height: -webkit-flex(2 0 0); padding: 100px 0;"></div>
   <div data-expected-height="50" data-offset-y="0" style="height: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
 </div>
 </div>
 
-<div class="horizontal-box vertical-lr">
+<div class="flexbox vertical-lr">
   <div data-expected-height="350" style="height: -webkit-flex(1 1 400px); min-height: 350px;"></div>
   <div data-expected-height="250" style="height: -webkit-flex(1 1 400px);"></div>
 </div>
 
 <!-- FIXME: There's a bug where offsetLeft reports the wrong value in vertical-rl writing-mode.-->
 <div style="position:relative">
-<div class="horizontal-box vertical-rl">
+<div class="flexbox vertical-rl">
   <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="height: -webkit-flex(1 0 0);"></div>
   <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="height: -webkit-flex(2 0 0);"></div>
   <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="height: -webkit-flex(1 0 0);"></div>
@@ -170,7 +169,7 @@ if (window.layoutTestController)
 
 <!-- FIXME: There's a bug where offsetTop reports the wrong value in horizontal-bt writing-mode.-->
 <div style="position:relative">
-<div class="horizontal-box bt" style="height:200px">
+<div class="flexbox bt" style="height:200px">
   <div data-offset-y="180" data-offset-x="580" style="width: -webkit-flex(1 0 0);"></div>
   <div data-offset-y="180" data-offset-x="580" style="width: -webkit-flex(2 0 0);"></div>
   <div data-offset-y="180" data-offset-x="580" style="width: -webkit-flex(1 0 0);"></div>
Domain: Web Framework / Uncategorized;