Diff
Modified: trunk/LayoutTests/ChangeLog (147182 => 147183)
--- trunk/LayoutTests/ChangeLog 2013-03-28 23:43:14 UTC (rev 147182)
+++ trunk/LayoutTests/ChangeLog 2013-03-28 23:46:09 UTC (rev 147183)
@@ -1,5 +1,24 @@
2013-03-28 Tony Chang <t...@chromium.org>
+ 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:
+
+2013-03-28 Tony Chang <t...@chromium.org>
+
[chromium] Unreviewed, fix up some lint errors in TestExpectations.
* platform/chromium/TestExpectations:
Modified: trunk/LayoutTests/css3/flexbox/flex-align-baseline.html (147182 => 147183)
--- trunk/LayoutTests/css3/flexbox/flex-align-baseline.html 2013-03-28 23:43:14 UTC (rev 147182)
+++ trunk/LayoutTests/css3/flexbox/flex-align-baseline.html 2013-03-28 23:46:09 UTC (rev 147183)
@@ -1,11 +1,11 @@
<!DOCTYPE html>
<html>
+<link href="" rel="stylesheet">
<style>
.flexbox {
margin: 120px;
width: 100px;
height: 100px;
- display: -webkit-flex;
background-color: #aaa;
position: relative;
outline: 2px solid red;
@@ -41,15 +41,6 @@
.vertical-lr {
-webkit-writing-mode: vertical-lr;
}
-.row-reverse {
- -webkit-flex-flow: row-reverse;
-}
-.column {
- -webkit-flex-flow: column;
-}
-.column-reverse {
- -webkit-flex-flow: column-reverse;
-}
</style>
<script>
if (window.testRunner)
Modified: trunk/LayoutTests/css3/flexbox/flex-align-column.html (147182 => 147183)
--- trunk/LayoutTests/css3/flexbox/flex-align-column.html 2013-03-28 23:43:14 UTC (rev 147182)
+++ trunk/LayoutTests/css3/flexbox/flex-align-column.html 2013-03-28 23:46:09 UTC (rev 147183)
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
+<link href="" rel="stylesheet">
<style>
body {
margin: 0;
@@ -7,10 +8,8 @@
.flexbox {
width: 600px;
height: 240px;
- display: -webkit-flex;
background-color: #aaa;
position: relative;
- -webkit-flex-flow: column;
}
.vertical {
-webkit-writing-mode: vertical-lr;
@@ -40,7 +39,7 @@
<script src=""
<body _onload_="checkLayout('.flexbox')">
-<div class="flexbox">
+<div class="flexbox column">
<div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="-webkit-flex: 1;"></div>
<div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="-webkit-flex: 1; -webkit-align-self: stretch; "></div>
<div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="-webkit-flex: 1; -webkit-align-self: flex-start; width: 20px;"></div>
@@ -49,7 +48,7 @@
<div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="-webkit-flex: 1; -webkit-align-self: baseline; width: 20px;"></div>
</div>
-<div class="flexbox vertical">
+<div class="flexbox column vertical">
<div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="-webkit-flex: 1;"></div>
<div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="-webkit-flex: 1; -webkit-align-self: stretch; "></div>
<div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="-webkit-flex: 1; -webkit-align-self: flex-start; height: 20px;"></div>
Modified: trunk/LayoutTests/css3/flexbox/flex-align-end.html (147182 => 147183)
--- trunk/LayoutTests/css3/flexbox/flex-align-end.html 2013-03-28 23:43:14 UTC (rev 147182)
+++ trunk/LayoutTests/css3/flexbox/flex-align-end.html 2013-03-28 23:46:09 UTC (rev 147183)
@@ -1,11 +1,11 @@
<!DOCTYPE html>
<html>
+<link href="" rel="stylesheet">
<style>
.flexbox {
margin: 120px;
width: 100px;
height: 100px;
- display: -webkit-flex;
background-color: #aaa;
position: relative;
outline: 2px solid red;
@@ -16,7 +16,6 @@
.flexbox > div {
height: 110px;
width: 110px;
- -webkit-flex: none;
}
.flexbox :nth-child(1) {
background-color: blue;
@@ -42,15 +41,6 @@
.vertical-lr {
-webkit-writing-mode: vertical-lr;
}
-.row-reverse {
- -webkit-flex-flow: row-reverse;
-}
-.column {
- -webkit-flex-flow: column;
-}
-.column-reverse {
- -webkit-flex-flow: column-reverse;
-}
</style>
<script src=""
<body _onload_="checkLayout('.flexbox')">
@@ -103,8 +93,8 @@
document.body.appendChild(title);
var container = document.createElement('div');
- container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" style="-webkit-align-items: flex-end;">\n' +
- '<div ' + positionAsString(expectations[writingMode][flexFlow][direction]) + '></div><div></div>\n' +
+ container.innerHTML = '<div class="flexbox align-items-flex-end ' + flexboxClassName + '">\n' +
+ '<div class="flex-none" ' + positionAsString(expectations[writingMode][flexFlow][direction]) + '></div><div class="flex-none"></div>\n' +
'</div>';
document.body.appendChild(container);
Modified: trunk/LayoutTests/css3/flexbox/flex-align-max.html (147182 => 147183)
--- trunk/LayoutTests/css3/flexbox/flex-align-max.html 2013-03-28 23:43:14 UTC (rev 147182)
+++ trunk/LayoutTests/css3/flexbox/flex-align-max.html 2013-03-28 23:46:09 UTC (rev 147183)
@@ -1,20 +1,17 @@
<!DOCTYPE html>
<html>
+<link href="" rel="stylesheet">
<style>
body {
margin: 0;
}
.flexbox {
- display: -webkit-flex;
background-color: #aaa;
position: relative;
}
.flexbox div {
border: 0;
}
-.column {
- -webkit-flex-flow: column;
-}
.vertical-rl {
-webkit-writing-mode: vertical-rl;
}
Modified: trunk/LayoutTests/css3/flexbox/flex-align-percent-height.html (147182 => 147183)
--- trunk/LayoutTests/css3/flexbox/flex-align-percent-height.html 2013-03-28 23:43:14 UTC (rev 147182)
+++ trunk/LayoutTests/css3/flexbox/flex-align-percent-height.html 2013-03-28 23:46:09 UTC (rev 147183)
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
+<link href="" rel="stylesheet">
<style>
body {
margin: 0;
@@ -11,7 +12,6 @@
.flexbox {
width: 600px;
- display: -webkit-flex;
background-color: #aaa;
position: relative;
}
@@ -32,8 +32,8 @@
<body _onload_="checkLayout('.flexbox')">
<div class="flexbox" style="height: 50%;">
- <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1; height: 50px;"></div>
- <div data-expected-height="300" data-offset-y="0" style="-webkit-flex: 1;"></div>
+ <div data-expected-height="50" data-offset-y="0" class="flex-one" style="height: 50px;"></div>
+ <div data-expected-height="300" data-offset-y="0" class="flex-one"></div>
</div>
</body>
Modified: trunk/LayoutTests/css3/flexbox/flex-align-stretch.html (147182 => 147183)
--- trunk/LayoutTests/css3/flexbox/flex-align-stretch.html 2013-03-28 23:43:14 UTC (rev 147182)
+++ trunk/LayoutTests/css3/flexbox/flex-align-stretch.html 2013-03-28 23:46:09 UTC (rev 147183)
@@ -1,11 +1,11 @@
<!DOCTYPE html>
<html>
+<link href="" rel="stylesheet">
<style>
body {
margin: 0;
}
.flexbox {
- display: -webkit-flex;
background-color: #aaa;
position: relative;
}
@@ -33,22 +33,22 @@
<script src=""
<body _onload_="checkLayout('.flexbox')">
<div class="flexbox" style="width: 600px">
- <div data-expected-height="100" style="-webkit-flex: 1 0 0; position: relative">
+ <div data-expected-height="100" class="flex-one" style="position: relative">
<div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
</div>
- <div data-expected-height="100" style="-webkit-flex: 1 0 0; height: 100px"></div>
- <div data-expected-height="100" style="-webkit-flex: 1 0 0; position: relative">
+ <div data-expected-height="100" class="flex-one" style="height: 100px"></div>
+ <div data-expected-height="100" class="flex-one" style="position: relative">
<div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
</div>
</div>
<div style="-webkit-writing-mode: horizontal-bt">
<div class="flexbox" style="width: 600px">
- <div data-expected-height="100" style="-webkit-flex: 1 0 0; position: relative">
+ <div data-expected-height="100" class="flex-one" style="position: relative">
<div data-offset-x="0" data-offset-y="0" class="absolute" style="top:0;"></div>
</div>
- <div data-expected-height="100" style="-webkit-flex: 1 0 0; height: 100px"></div>
- <div data-expected-height="100" style="-webkit-flex: 1 0 0; position: relative">
+ <div data-expected-height="100" class="flex-one" style="height: 100px"></div>
+ <div data-expected-height="100" class="flex-one" style="position: relative">
<div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
</div>
</div>
@@ -56,11 +56,11 @@
<div style="-webkit-writing-mode: vertical-rl">
<div class="flexbox" style="height: 200px">
- <div data-expected-width="100" style="-webkit-flex: 1 0 0; position: relative">
+ <div data-expected-width="100" class="flex-one" style="position: relative">
<div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
</div>
- <div data-expected-width="100" style="-webkit-flex: 1 0 0; width: 100px"></div>
- <div data-expected-width="100" style="-webkit-flex: 1 0 0; position: relative">
+ <div data-expected-width="100" class="flex-one" style="width: 100px"></div>
+ <div data-expected-width="100" class="flex-one" style="position: relative">
<div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
</div>
</div>
@@ -68,11 +68,11 @@
<div style="-webkit-writing-mode: vertical-lr">
<div class="flexbox" style="height: 200px">
- <div data-expected-width="100" style="-webkit-flex: 1 0 0; position: relative">
+ <div data-expected-width="100" class="flex-one" style="position: relative">
<div data-offset-x="50" data-offset-y="0" class="absolute" style="right:0;"></div>
</div>
- <div data-expected-width="100" style="-webkit-flex: 1 0 0; width: 100px"></div>
- <div data-expected-width="100" style="-webkit-flex: 1 0 0; position: relative">
+ <div data-expected-width="100" class="flex-one" style="width: 100px"></div>
+ <div data-expected-width="100" class="flex-one" style="position: relative">
<div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
</div>
</div>
@@ -84,7 +84,7 @@
</div>
</div>
-<div class="flexbox" style="-webkit-flex-direction: column; width: 100px;">
+<div class="flexbox column" style="width: 100px;">
<div data-expected-width="100" data-expected-height="50" style="background-color: yellow;">
<div data-expected-width="200" style="height: 50px; width: 200px; background-color: orange"></div>
</div>
Modified: trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html (147182 => 147183)
--- trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html 2013-03-28 23:43:14 UTC (rev 147182)
+++ trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html 2013-03-28 23:46:09 UTC (rev 147183)
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html>
+<link href="" rel="stylesheet">
<style>
body {
margin: 0;
}
.flexbox {
height: 100px;
- display: -webkit-flex;
background-color: #aaa;
position: relative;
-webkit-writing-mode: vertical-rl;
@@ -54,123 +54,123 @@
<!-- stretch is the default align-items so these flexitems should all have the same height. -->
<div class="flexbox">
- <div data-expected-width="100" style="-webkit-flex: 1 0 0;"></div>
- <div data-expected-width="100" style="-webkit-flex: 1 0 0; width: 100px"></div>
- <div data-expected-width="100" style="-webkit-flex: 1 0 0;"></div>
+ <div data-expected-width="100" class="flex-one"></div>
+ <div data-expected-width="100" class="flex-one" style="width: 100px"></div>
+ <div data-expected-width="100" class="flex-one"></div>
</div>
<div class="flexbox">
- <div data-expected-width="60" data-offset-x="60" style="-webkit-flex: 1 0 0; width: 60px;"></div>
- <div data-expected-width="120" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
- <div data-expected-width="60" data-offset-x="30" style="-webkit-flex: 1 0 0; width: 60px; margin: auto;"></div>
- <div data-expected-width="0" data-offset-x="60" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
- <div data-expected-width="100" data-offset-x="10" style="-webkit-flex: 1 0 0; width: 100px; margin: 0 10px;"></div>
- <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px; margin: 0 20px 0 10px;"></div>
- <div data-expected-width="90" data-offset-x="10" style="-webkit-flex: 1 0 0; margin: 0 20px 0 10px;"></div>
- <div data-expected-width="120" data-offset-x="0" style="-webkit-flex: 1 0 0;">
+ <div data-expected-width="60" data-offset-x="60" class="flex-one" style="width: 60px;"></div>
+ <div data-expected-width="120" data-offset-x="0" class="flex-one"></div>
+ <div data-expected-width="60" data-offset-x="30" class="flex-one" style="width: 60px; margin: auto;"></div>
+ <div data-expected-width="0" data-offset-x="60" class="flex-one" style="margin: 0 auto;"></div>
+ <div data-expected-width="100" data-offset-x="10" class="flex-one" style="width: 100px; margin: 0 10px;"></div>
+ <div data-expected-width="50" data-offset-x="50" class="flex-one" style="width: 50px; margin: 0 20px 0 10px;"></div>
+ <div data-expected-width="90" data-offset-x="10" class="flex-one" style="margin: 0 20px 0 10px;"></div>
+ <div data-expected-width="120" data-offset-x="0" class="flex-one">
<!-- Since no parent has a fixed height, this div shrink-wraps. -->
<div data-expected-width="0" style="width: 100%; background-color:black"></div>
</div>
</div>
<div class="flexbox" style="width: 100px;">
- <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px;"></div>
- <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
- <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100%;">
+ <div data-expected-width="50" data-offset-x="50" class="flex-one" style="width: 50px;"></div>
+ <div data-expected-width="100" data-offset-x="0" class="flex-one"></div>
+ <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100%;">
<div data-expected-width="100" style="width: 100%; background-color:black"></div>
</div>
</div>
<div class="flexbox" style="width: 100px;">
- <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px;"></div>
- <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
+ <div data-expected-width="50" data-offset-x="50" class="flex-one" style="width: 50px;"></div>
+ <div data-expected-width="100" data-offset-x="0" class="flex-one"></div>
</div>
<div class="flexbox">
- <div data-expected-width="0" data-offset-x="100" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start;"></div>
- <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start; width: 50px;"></div>
- <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>
- <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>
- <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>
- <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>
- <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>
- <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
+ <div data-expected-width="0" data-offset-x="100" class="flex-one align-self-flex-start"></div>
+ <div data-expected-width="50" data-offset-x="50" class="flex-one align-self-flex-start" style="width: 50px;"></div>
+ <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-flex-start" style="width: 50px; margin: 0 auto"></div>
+ <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>
+ <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>
+ <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-flex-start" style="width: 50px; margin: 0 25px"></div>
+ <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>
+ <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
</div>
<div class="flexbox">
- <div data-expected-width="0" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end;"></div>
- <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; width: 50px;"></div>
- <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>
- <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>
- <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>
- <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>
- <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>
- <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
+ <div data-expected-width="0" data-offset-x="0" class="flex-one align-self-flex-end"></div>
+ <div data-expected-width="50" data-offset-x="0" class="flex-one align-self-flex-end" style="width: 50px;"></div>
+ <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-flex-end" style="width: 50px; margin: 0 auto"></div>
+ <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>
+ <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>
+ <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-flex-end" style="width: 50px; margin: 0 25px"></div>
+ <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>
+ <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
</div>
<div class="flexbox">
- <div data-expected-width="0" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-align-self: center;"></div>
- <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center; width: 50px;"></div>
- <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>
- <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>
- <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>
- <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>
- <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>
- <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
+ <div data-expected-width="0" data-offset-x="50" class="flex-one align-self-center"></div>
+ <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-center" style="width: 50px;"></div>
+ <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-center" style="width: 50px; margin: 0 auto"></div>
+ <div data-expected-width="50" data-offset-x="50" class="flex-one align-self-center" style="width: 50px; margin: 0 auto 0 0"></div>
+ <div data-expected-width="50" data-offset-x="0" class="flex-one align-self-center" style="width: 50px; margin: 0 0 0 auto"></div>
+ <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-center" style="width: 50px; margin: 0 25px"></div>
+ <div data-expected-width="50" data-offset-x="20" class="flex-one align-self-center" style="width: 50px; margin: 0 20px 0 10px;"></div>
+ <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
</div>
<div class="flexbox">
- <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start; width: 50px;"></div>
- <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center; width: 50px;"></div>
- <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; width: 50px;"></div>
- <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px; margin: auto 0"></div>
- <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
- <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
+ <div data-expected-width="50" data-offset-x="50" class="flex-one align-self-flex-start" style="width: 50px;"></div>
+ <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-center" style="width: 50px;"></div>
+ <div data-expected-width="50" data-offset-x="0" class="flex-one align-self-flex-end" style="width: 50px;"></div>
+ <div data-expected-width="50" data-offset-x="50" class="flex-one" style="width: 50px; margin: auto 0"></div>
+ <div data-expected-width="100" data-offset-x="0" class="flex-one"></div>
+ <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
</div>
<div class="flexbox">
- <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>
- <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>
- <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>
- <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>
- <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px; -webkit-writing-mode: horizontal-tb;"></div>
+ <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>
+ <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-center" style="width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
+ <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>
+ <div data-expected-width="50" data-offset-x="50" class="flex-one" style="width: 50px; margin: auto 0; -webkit-writing-mode: horizontal-tb;"></div>
+ <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px; -webkit-writing-mode: horizontal-tb;"></div>
</div>
<div class="flexbox">
- <div data-expected-width="20" data-offset-x="70" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline; width: 20px;"></div>
- <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>
- <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>
- <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
+ <div data-expected-width="20" data-offset-x="70" class="flex-one align-self-baseline" style="width: 20px;"></div>
+ <div data-expected-width="10" data-offset-x="70" class="flex-one align-self-baseline" style="width: 10px; margin: 0 20px 0 10px;"></div>
+ <div data-expected-width="10" data-offset-x="70" class="flex-one align-self-baseline" style="width: 10px; margin: 0 20px 0 0;"></div>
+ <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
</div>
<div class="flexbox">
- <div id="baseline1" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;">ahem</div>
- <div id="baseline2" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><img src="" style="width: 50px;"></div>
- <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center;"><img src="" style="width: 50px; vertical-align: middle"></div>
- <div id="baseline3" data-expected-width="50" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><img src="" style="width: 50px; vertical-align: middle"></div>
- <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
+ <div id="baseline1" class="flex-one align-self-baseline">ahem</div>
+ <div id="baseline2" class="flex-one align-self-baseline"><img src="" style="width: 50px;"></div>
+ <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-center"><img src="" style="width: 50px; vertical-align: middle"></div>
+ <div id="baseline3" data-expected-width="50" class="flex-one align-self-baseline"><img src="" style="width: 50px; vertical-align: middle"></div>
+ <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
</div>
<div class="flexbox">
- <div id="baseline4" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;">ahem</div>
- <div id="baseline5" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><br><img src="" style="width: 50px;"></div>
- <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><img src="" style="width: 50px; vertical-align: middle"></div>
- <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
+ <div id="baseline4" class="flex-one align-self-baseline">ahem</div>
+ <div id="baseline5" class="flex-one align-self-baseline"><br><img src="" style="width: 50px;"></div>
+ <div data-expected-width="50" data-offset-x="50" class="flex-one align-self-baseline"><img src="" style="width: 50px; vertical-align: middle"></div>
+ <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
</div>
<div class="flexbox" style="-webkit-writing-mode: vertical-lr">
- <div id="baseline6" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;">ahem</div>
- <div id="baseline7" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><img src="" style="width: 50px;"></div>
- <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center;"><img src="" style="width: 50px; vertical-align: middle"></div>
- <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><img src="" style="width: 50px; vertical-align: middle"></div>
- <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
+ <div id="baseline6" class="flex-one align-self-baseline">ahem</div>
+ <div id="baseline7" class="flex-one align-self-baseline"><img src="" style="width: 50px;"></div>
+ <div data-expected-width="50" data-offset-x="25" class="flex-one align-self-center"><img src="" style="width: 50px; vertical-align: middle"></div>
+ <div data-expected-width="50" data-offset-x="0" class="flex-one align-self-baseline"><img src="" style="width: 50px; vertical-align: middle"></div>
+ <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
</div>
<div class="flexbox" style="-webkit-writing-mode: vertical-lr">
- <div id="baseline8" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;">ahem</div>
- <div id="baseline9" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><br><img src="" style="width: 50px;"></div>
- <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;"><img src="" style="width: 50px; vertical-align: middle"></div>
- <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
+ <div id="baseline8" class="flex-one align-self-baseline">ahem</div>
+ <div id="baseline9" class="flex-one align-self-baseline"><br><img src="" style="width: 50px;"></div>
+ <div data-expected-width="50" data-offset-x="0" class="flex-one align-self-baseline"><img src="" style="width: 50px; vertical-align: middle"></div>
+ <div data-expected-width="100" data-offset-x="0" class="flex-one" style="width: 100px;"></div>
</div>
<div id="results"></div>
Modified: trunk/LayoutTests/css3/flexbox/flex-align.html (147182 => 147183)
--- trunk/LayoutTests/css3/flexbox/flex-align.html 2013-03-28 23:43:14 UTC (rev 147182)
+++ trunk/LayoutTests/css3/flexbox/flex-align.html 2013-03-28 23:46:09 UTC (rev 147183)
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html>
+<link href="" rel="stylesheet">
<style>
body {
margin: 0;
}
.flexbox {
width: 600px;
- display: -webkit-flex;
background-color: #aaa;
position: relative;
}
