[css-grid] Import additional grid layout tests and update TestExpectations
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / floating-not-effect-on-grid-items.html
1 <!DOCTYPE html>
2 <html>
3 <link href="resources/grid.css" rel="stylesheet">
4 <link href="resources/grid-alignment.css" rel="stylesheet">
5 <script src="../../resources/check-layout.js"></script>
6 <style>
7 .container {
8     background-color:grey;
9 }
10
11 .gridItem {
12     width: 50px;
13     height: 50px;
14 }
15 </style>
16 <body onload="checkLayout('.container')">
17
18 <p>This test checks that the grid's items are not affected by the 'float' and 'clear' properties.</p>
19
20 <div style="position: relative">
21     <div class="container grid justifyContentStart">
22         <div style="float: right;" class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
23         <div class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
24         <div style="float: left;" class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
25         <div style="float: left;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
26         <div style="clear: both;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
27         <div style="float: left;" class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
28     </div>
29 </div>
30
31 </body>
32 </html>