Chromium Code Reviews Chromium Code Reviews
Issue 146833018:
[CSS Grid Layout] Fix missing layout in flexible and content sized columns (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/css-grid-layout/flex-content-sized-columns-resize.html |
| diff --git a/LayoutTests/fast/css-grid-layout/flex-content-sized-columns-resize.html b/LayoutTests/fast/css-grid-layout/flex-content-sized-columns-resize.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..99c4ea9d8a47fc48a05a703b0cc5519a05b7901e |
| --- /dev/null |
| +++ b/LayoutTests/fast/css-grid-layout/flex-content-sized-columns-resize.html |
| @@ -0,0 +1,79 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<head> |
| + <link href="resources/grid.css" rel="stylesheet"> |
| + <style type="text/css"> |
| + #grid-1 { |
| + grid-template-columns: 1fr 1fr; |
| + } |
| + |
| + #firstColumnFloat { |
| + width: 50%; |
| + background-color: blue; |
| + } |
| + |
| + #secondColumnFloat { |
| + float: right; |
| + width: 50%; |
| + background-color: lime; |
| + } |
| + |
| + #grid-2 { |
| + grid-template-columns: auto; |
| + } |
| + |
| + #oneColumnRegular { |
| + background-color: blue; |
| + } |
| + </style> |
| + <script src="../../resources/js-test.js"></script> |
| + <script> |
| + function runTest() { |
| + if (window.testRunner) { |
| + testRunner.useUnfortunateSynchronousResizeMode(); |
|
Julien - ping for review
2014/02/07 00:13:57
O_o
|
| + testRunner.dumpAsText(); |
| + |
| + window.resizeTo(400, 400); |
| + window.resizeTo(600, 600); |
| + |
| + shouldBe("getComputedStyle(firstColumnGrid, '').getPropertyValue('width')", "getComputedStyle(firstColumnFloat, '').getPropertyValue('width')"); |
| + shouldBe("getComputedStyle(secondColumnGrid, '').getPropertyValue('width')", "getComputedStyle(secondColumnFloat, '').getPropertyValue('width')"); |
| + |
| + shouldBe("getComputedStyle(oneColumnGrid, '').getPropertyValue('width')", "getComputedStyle(oneColumnRegular, '').getPropertyValue('width')"); |
|
Julien - ping for review
2014/02/07 00:13:57
Can we have a check-layout.js test instead of manu
|
| + } |
| + } |
| + </script> |
| +</head> |
| +<body onLoad="runTest();"> |
| + <h1>Description</h1> |
| + <p>Grid flex and content sized 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 and regular cases.</p> |
|
Julien - ping for review
2014/02/07 00:13:57
Which float and regular case?
|
| + <h1>Grid 2 flex columns</h1> |
| + <div id="grid-1" class="grid"> |
| + <div id="firstColumnGrid" class="firstRowFirstColumn">first column</div> |
| + <div id="secondColumnGrid" class="firstRowSecondColumn">second column</div> |
| + </div> |
| + <h1>Float 2 columns</h1> |
| + <div> |
| + <div id="secondColumnFloat">second column</div> |
| + <div id="firstColumnFloat">first column</div> |
| + </div> |
| + <h1>Grid 1 auto column</h1> |
| + <div id="grid-2" class="grid"> |
| + <div id="oneColumnGrid" class="firstRowFirstColumn"> |
| + one column one column one column one column one column one column one column one column |
| + one column one column one column one column one column one column one column one column |
| + one column one column one column one column one column one column one column one column |
| + one column one column one column one column one column one column one column one column |
| + </div> |
| + </div> |
| + <h1>Regular 1 column</h1> |
| + <div> |
| + <div id="oneColumnRegular"> |
| + one column one column one column one column one column one column one column one column |
| + one column one column one column one column one column one column one column one column |
| + one column one column one column one column one column one column one column one column |
| + one column one column one column one column one column one column one column one column |
| + </div> |
| + </div> |
| +</body> |
| +</html> |
