Index: LayoutTests/fast/css-grid-layout/flex-columns-resize.html |
diff --git a/LayoutTests/fast/css-grid-layout/flex-columns-resize.html b/LayoutTests/fast/css-grid-layout/flex-columns-resize.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..b8113aaa9e5ac44b430d71c632ebdace38f6dc9d |
--- /dev/null |
+++ b/LayoutTests/fast/css-grid-layout/flex-columns-resize.html |
@@ -0,0 +1,51 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+ <link href="resources/grid.css" rel="stylesheet"> |
+ <style type="text/css"> |
+ .grid { |
+ grid-definition-columns: 1fr 1fr; |
+ } |
+ |
+ #firstFloat { |
+ width: 50%; |
+ background-color: blue; |
+ } |
+ |
+ #secondFloat { |
+ float: right; |
+ width: 50%; |
+ background-color: lime; |
+ } |
+ </style> |
+ <script src="../../resources/js-test.js"></script> |
+ <script> |
+ function runTest() { |
+ if (window.testRunner) { |
+ testRunner.useUnfortunateSynchronousResizeMode(); |
+ testRunner.dumpAsText(); |
+ |
+ window.resizeTo(400, 400); |
+ window.resizeTo(600, 600); |
+ |
+ shouldBe("getComputedStyle(firstGrid, '').getPropertyValue('width')", "getComputedStyle(firstFloat, '').getPropertyValue('width')"); |
+ shouldBe("getComputedStyle(secondGrid, '').getPropertyValue('width')", "getComputedStyle(secondFloat, '').getPropertyValue('width')"); |
+ } |
+ } |
+ </script> |
+</head> |
+<body onLoad="runTest();"> |
+ <h1>Description</h1> |
+ <p>Grid flex columns width should be updated properly when you resize the window (you should not see the grid background in grey color). It should work like in the float case.</p> |
+ <h1>Grid</h1> |
+ <div class="grid"> |
+ <div id="firstGrid" class="firstRowFirstColumn">first column</div> |
+ <div id="secondGrid" class="firstRowSecondColumn">second column</div> |
+ </div> |
+ <h1>Float</h1> |
+ <div> |
+ <div id="secondFloat">second column</div> |
+ <div id="firstFloat">first column</div> |
+ </div> |
+</body> |
+</html> |