Chromium Code Reviews Chromium Code Reviews
Issue 273893002:
New Layout Test to verify 'float' and 'clear' don't affect grid's items. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/css-grid-layout/floating-not-effect-on-grid-items.html |
| diff --git a/LayoutTests/fast/css-grid-layout/floating-not-effect-on-grid-items.html b/LayoutTests/fast/css-grid-layout/floating-not-effect-on-grid-items.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..c0e7a0afc009738d9fa7c21c6d679f85928b034f |
| --- /dev/null |
| +++ b/LayoutTests/fast/css-grid-layout/floating-not-effect-on-grid-items.html |
| @@ -0,0 +1,44 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<link href="resources/grid.css" rel="stylesheet"> |
| +<script src="../../resources/check-layout.js"></script> |
| +<style> |
| +.container { |
| + background-color:grey; |
| +} |
| + |
| +.gridItem { |
| + width: 50px; |
| + height: 50px; |
| +} |
| +</style> |
| +<body onload="checkLayout('.container')"> |
| + |
| +<p>This test checks that the grid's items are not affected by the 'float' and 'clear' properties.</p> |
| + |
| +<div style="position: relative"> |
| + <div class="container grid"> |
| + <div style="float: right;" class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> |
| + <div class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> |
| + <div style="float: left;" class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> |
| + <div style="float: left;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div> |
| + <div style="clear: both;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div> |
| + <div style="float: left;" class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div> |
| + </div> |
| +</div> |
| + |
| +<p>This layout shows where the float blocks would be positioned without the grid.</p> |
|
ojan
2014/05/23 19:56:59
What's the value of testing the positioning withou
jfernandez
2014/05/26 09:18:39
Yeah, you're totally right. I thought it would hel
|
| + |
| +<div style="position: relative"> |
| + <div style="height: 200px; width: 400px;" class="container"> |
| + <div style="float: right;" class="gridItem firstRowFirstColumn" data-offset-x="350" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> |
| + <div class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> |
| + <div style="float: left;" class="gridItem firstRowSecondColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div> |
| + <div style="float: left;" class="gridItem secondRowFirstColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div> |
| + <div style="clear: both;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div> |
| + <div style="float: left;" class="gridItem secondRowSecondColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="50"></div> |
| + </div> |
| +</div> |
| + |
| +</body> |
| +</html> |
