Diff
Modified: trunk/LayoutTests/ChangeLog (104784 => 104785)
--- trunk/LayoutTests/ChangeLog 2012-01-12 03:53:22 UTC (rev 104784)
+++ trunk/LayoutTests/ChangeLog 2012-01-12 03:55:38 UTC (rev 104785)
@@ -1,3 +1,16 @@
+2012-01-11 Tony Chang <[email protected]>
+
+ Overflow on flexitems doesn't work
+ https://bugs.webkit.org/show_bug.cgi?id=70979
+
+ Reviewed by Ojan Vafai.
+
+ Add test cases for flex items that overflow. There should be
+ non-disabled scrollbars.
+
+ * css3/flexbox/child-overflow-expected.html: Added.
+ * css3/flexbox/child-overflow.html: Added.
+
2012-01-11 Mike Lawther <[email protected]>
margin test for CSS3 calc
Added: trunk/LayoutTests/css3/flexbox/child-overflow-expected.html (0 => 104785)
--- trunk/LayoutTests/css3/flexbox/child-overflow-expected.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/child-overflow-expected.html 2012-01-12 03:55:38 UTC (rev 104785)
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.container {
+ display: inline-block;
+ margin-right: 5px;
+}
+
+.container > div {
+ border: 5px solid pink;
+ overflow: auto;
+ height: 100px;
+ width: 100px;
+}
+
+.container > div > div {
+ width: 120px;
+ height: 120px;
+ background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
+}
+</style>
+</head>
+<body>
+ <p>Scrollbars should work in all the flexboxes and each row should show four identical boxes.</p>
+</body>
+<script>
+var origins = ['', 'bottomLeft', 'topRight', ''];
+
+origins.forEach(function(origin) {
+ for (var i = 0; i < 4; ++i) {
+ var containerClass = 'container ' + origin;
+ document.body.innerHTML +=
+ "<div class='" + containerClass + "'>" +
+ "<div><div></div></div>" +
+ "</div>";
+ }
+ document.body.innerHTML += "<br>";
+});
+
+Array.prototype.forEach.call(document.querySelectorAll('.bottomLeft'), function(element) {
+ element.firstChild.scrollTop = 1000;
+});
+
+Array.prototype.forEach.call(document.querySelectorAll('.topRight'), function(element) {
+ element.firstChild.scrollLeft = 1000;
+});
+
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/css3/flexbox/child-overflow.html (0 => 104785)
--- trunk/LayoutTests/css3/flexbox/child-overflow.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/child-overflow.html 2012-01-12 03:55:38 UTC (rev 104785)
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.container {
+ display: inline-block;
+ margin-right: 5px;
+}
+
+.horizontal-tb {
+ -webkit-writing-mode: horizontal-tb;
+}
+
+.horizontal-bt {
+ -webkit-writing-mode: horizontal-bt;
+}
+
+.vertical-rl {
+ -webkit-writing-mode: vertical-rl;
+}
+
+.vertical-lr {
+ -webkit-writing-mode: vertical-lr;
+}
+
+.row {
+ -webkit-flex-direction: row;
+}
+
+.row-reverse {
+ -webkit-flex-direction: row-reverse;
+}
+
+.column {
+ -webkit-flex-direction: column;
+}
+
+.column-reverse {
+ -webkit-flex-direction: column-reverse;
+}
+
+.flexbox {
+ border: 5px solid pink;
+ display: -webkit-flexbox;
+ height: 100px;
+ width: 100px;
+}
+
+.flexbox > div {
+ overflow: auto;
+}
+
+.flexbox > div > div {
+ width: 120px;
+ height: 120px;
+ background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
+}
+</style>
+</head>
+<body>
+ <p>Scrollbars should work in all the flexboxes and each row should show four identical boxes.</p>
+</body>
+<script>
+var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
+var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
+writingModes.forEach(function(writingMode) {
+ flexDirections.forEach(function(flexDirection) {
+ var containerClass = 'container ' + writingMode;
+ var flexboxClass = 'flexbox ' + flexDirection;
+ document.body.innerHTML +=
+ "<div class='" + containerClass + "'>" +
+ "<div class='" + flexboxClass + "'>" +
+ "<div style='width: -webkit-flex(0 1 auto); height: -webkit-flex(0 1 auto)'><div></div></div>" +
+ "</div>" +
+ "</div>";
+ });
+ document.body.innerHTML += "<br>";
+});
+
+</script>
+</body>
+</html>
