Title: [104504] trunk/LayoutTests
- Revision
- 104504
- Author
- [email protected]
- Date
- 2012-01-09 16:03:12 -0800 (Mon, 09 Jan 2012)
Log Message
Tests for nested flexboxes
https://bugs.webkit.org/show_bug.cgi?id=70776
Reviewed by Tony Chang.
* css3/flexbox/orthogonal-flex-directions-expected.txt: Added.
* css3/flexbox/orthogonal-flex-directions.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (104503 => 104504)
--- trunk/LayoutTests/ChangeLog 2012-01-10 00:01:49 UTC (rev 104503)
+++ trunk/LayoutTests/ChangeLog 2012-01-10 00:03:12 UTC (rev 104504)
@@ -1,3 +1,13 @@
+2012-01-09 Ojan Vafai <[email protected]>
+
+ Tests for nested flexboxes
+ https://bugs.webkit.org/show_bug.cgi?id=70776
+
+ Reviewed by Tony Chang.
+
+ * css3/flexbox/orthogonal-flex-directions-expected.txt: Added.
+ * css3/flexbox/orthogonal-flex-directions.html: Added.
+
2012-01-09 Gavin Barraclough <[email protected]>
https://bugs.webkit.org/show_bug.cgi?id=75692
Added: trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions-expected.txt (0 => 104504)
--- trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions-expected.txt 2012-01-10 00:03:12 UTC (rev 104504)
@@ -0,0 +1,7 @@
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
Property changes on: trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions.html (0 => 104504)
--- trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions.html 2012-01-10 00:03:12 UTC (rev 104504)
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+ margin: 0;
+}
+.flexbox {
+ width: 600px;
+ display: -webkit-flexbox;
+ background-color: #aaa;
+ position: relative;
+}
+.flexbox > :nth-child(1) {
+ background-color: blue;
+}
+.flexbox > :nth-child(2) {
+ background-color: green;
+}
+
+.flexbox > div > :nth-child(1) {
+ background-color: pink;
+}
+.flexbox > div > :nth-child(2) {
+ background-color: purple;
+}
+
+.flexbox > div > div > :nth-child(1) {
+ background-color: red;
+}
+.flexbox > div > div > :nth-child(2) {
+ background-color: yellow;
+}
+
+.nested {
+ display: -webkit-flexbox;
+ background-color: #ddd;
+}
+
+.rtl {
+ direction: rtl;
+}
+.bt {
+ -webkit-writing-mode: horizontal-bt;
+}
+.vertical-rl {
+ -webkit-writing-mode: vertical-rl;
+}
+.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;
+}
+
+.align-start {
+ -webkit-flex-align: start;
+}
+</style>
+<script>
+if (window.layoutTestController)
+ layoutTestController.dumpAsText();
+</script>
+<script src=""
+<body _onload_="checkFlexBoxen()">
+
+<div class="flexbox">
+ <div class="column nested">
+ <div data-expected-height="50" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+ <div data-expected-height="50" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+ </div>
+ <div data-expected-width="500" style="width: -webkit-flex(1 0 0); height:100px;"></div>
+</div>
+
+<div class="flexbox">
+ <div class="column nested align-start">
+ <div data-expected-height="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+ <div data-expected-height="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+ </div>
+ <div data-expected-width="500" style="width: -webkit-flex(1 0 0); height:100px;"></div>
+</div>
+
+<div class="flexbox">
+ <div class="column nested align-start" style="height: 50px">
+ <div data-expected-height="25" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+ <div data-expected-height="25" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+ </div>
+ <div data-expected-width="500" style="width: -webkit-flex(1 0 0); height:100px;"></div>
+</div>
+
+<div class="flexbox">
+ <div class="column nested" style="height: 50px">
+ <div class="nested" style="height: -webkit-flex(1); width: 100px;">
+ <div data-expected-height="25" style="width: -webkit-flex(1 0 auto);"></div>
+ <div data-expected-height="25" style="width: -webkit-flex(1 0 auto);"></div>
+ </div>
+ <div style="height: -webkit-flex(1);"></div>
+ </div>
+ <div data-expected-width="500" style="width: -webkit-flex(1 0 0); height:100px;"></div>
+</div>
+
+<div class="flexbox column" style="height: 100px">
+ <div class="row-reverse nested" style="height: -webkit-flex(1); width: 100px;">
+ <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
+ <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
+ </div>
+ <div data-expected-height="50" style="height: -webkit-flex(1 0 0);"></div>
+</div>
+
+<div class="flexbox column-reverse" style="height: 100px">
+ <div class="row-reverse nested" style="height: -webkit-flex(1); width: 100px;">
+ <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
+ <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
+ </div>
+ <div data-expected-height="50" style="height: -webkit-flex(1 0 0);"></div>
+</div>
+
+<div class="flexbox vertical-lr" style="height: 100px">
+ <div class="column nested" style="height: -webkit-flex(1); width: 100px;">
+ <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
+ <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
+ </div>
+ <div data-expected-height="50" style="height: -webkit-flex(1 0 0);"></div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
Property changes on: trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions.html
___________________________________________________________________
Added: svn:eol-style
_______________________________________________
webkit-changes mailing list
[email protected]
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes
