Chromium Code Reviews Chromium Code Reviews
Issue 448993002:
[CSSGridLayout] Skip items spanning flex tracks in track sizing algo (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <link href="resources/grid.css" rel="stylesheet"> | |
| 5 <style> | |
| 6 .grid { | |
| 7 font: 10px/1 Ahem; | |
| 8 } | |
| 9 | |
| 10 .gridFixedAndMinContentAndFlex { | |
| 11 grid-template-columns: 20px min-content 1fr; | |
| 12 } | |
| 13 | |
| 14 .gridMinMaxFixedFlexAndMaxContentAndAuto { | |
| 15 grid-template-columns: minmax(20px, 1fr) max-content auto; | |
| 16 } | |
| 17 | |
| 18 .gridMinMaxFlexFixedAndMinContentAndFixed { | |
| 19 grid-template-columns: minmax(0.5fr, 35px) min-content 25px; | |
| 20 } | |
| 21 | |
| 22 .gridMinContentAndMinMaxFixedMinContentAndFlex { | |
| 23 grid-template-columns: min-content minmax(20px, min-content) 2fr; | |
| 24 } | |
| 25 | |
| 26 .gridMaxContentAndMinMaxFixedMaxContentAndFlex { | |
| 27 grid-template-columns: max-content minmax(20px, max-content) 1fr; | |
| 28 } | |
| 29 | |
| 30 </style> | |
| 31 <script src="../../resources/js-test.js"></script> | |
| 32 </head> | |
| 33 <body> | |
| 34 | |
| 35 <p>Test that resolving auto tracks on grid items works properly.</p> | |
| 36 | |
| 37 <div style="position: relative; width: 100px;"> | |
| 38 <div id="gridFixedAndMinContentAndFlex" class="grid gridFixedAndMinContentAn dFlex"> | |
| 39 <div style="grid-column: 2 / span 2;">XXXXXXXX</div> | |
| 40 <div style="grid-column: 1 / span 2; grid-row: 2;">XXXXX</div> | |
| 41 </div> | |
| 42 </div> | |
| 43 | |
| 44 <div style="position: relative; width: 100px;"> | |
| 45 <div id="gridFixedAndMinContentAndFlexMultipleOverlap" class="grid gridFixed AndMinContentAndFlex"> | |
| 46 <div style="grid-column: 1 / span 2;">XXX XXX</div> | |
| 47 <div style="grid-column: 1 / -1; grid-row: 2;">XXXX</div> | |
| 48 </div> | |
| 49 </div> | |
| 50 | |
| 51 <div style="position: relative; width: 100px;"> | |
| 52 <div id="gridMinMaxFixedFlexAndMaxContentAndAuto" class="grid gridMinMaxFixe dFlexAndMaxContentAndAuto"> | |
| 53 <div style="grid-column: 1 / span 2;">XXX XXX</div> | |
| 54 <div style="grid-column: 2 / span 2; grid-row: 2;">XXXX</div> | |
| 55 </div> | |
| 56 </div> | |
| 57 | |
| 58 <div style="position: relative; width: 100px;"> | |
| 59 <div id="gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems" class=" grid gridMinMaxFixedFlexAndMaxContentAndAuto"> | |
| 60 <div style="grid-column: 1 / -1;">XXX XXX</div> | |
| 61 <div style="grid-column: 1 / span 2; grid-row: 2;">XXXX XXXX</div> | |
| 62 </div> | |
| 63 </div> | |
| 64 | |
| 65 <div style="position: relative; width: 100px;"> | |
| 66 <div id="gridMinMaxFlexFixedAndMinContentAndFixed" class="grid gridMinMaxFle xFixedAndMinContentAndFixed"> | |
| 67 <div style="grid-column: 1 / span 2;">XXXX XXXX</div> | |
| 68 <div style="grid-column: 2 / span 2; grid-row: 2;">XXX XXX</div> | |
| 69 <div style="grid-column: 1 / -1; grid-row: 3;">XXXXX XXXXX</div> | |
| 70 <div style="grid-column: 2 / span 2; grid-row: 4;">XX XX XX XX</div> | |
| 71 </div> | |
| 72 </div> | |
| 73 | |
| 74 <div style="position: relative; width: 100px;"> | |
| 75 <div id="gridMinContentAndMinMaxFixedMinContentAndFlex" class="grid gridMinC ontentAndMinMaxFixedMinContentAndFlex"> | |
| 76 <div style="grid-column: 2 / span 2;">XXXXX</div> | |
| 77 <div style="grid-column: 1 / -1; grid-row: 2;">XXX XXX XXX</div> | |
| 78 <div style="grid-column: 1 / span 2; grid-row: 3;">XXXX XXXX</div> | |
| 79 </div> | |
| 80 </div> | |
| 81 | |
| 82 <div style="position: relative; width: 100px;"> | |
| 83 <div id="gridMaxContentAndMinMaxFixedMaxContentAndFlex" class="grid gridMaxC ontentAndMinMaxFixedMaxContentAndFlex"> | |
| 84 <div style="grid-column: 2 / span 2;">XXXXX</div> | |
| 85 <div style="grid-column: 1 / -1; grid-row: 2;">XXX XXX XXX</div> | |
| 86 <div style="grid-column: 1 / span 2; grid-row: 3;">XXXX XXXX</div> | |
| 87 </div> | |
| 88 </div> | |
| 89 | |
| 90 </body> | |
| 91 <script src="resources/grid-definitions-parsing-utils.js"></script> | |
| 92 <script> | |
| 93 function checkColumns(gridId, columnValue) | |
| 94 { | |
| 95 window.gridElement = document.getElementById(gridId); | |
| 96 shouldBeEqualToString("window.getComputedStyle(" + gridId + ", '').getPrope rtyValue('grid-template-columns')", columnValue); | |
|
Julien - ping for review
2014/10/10 18:09:16
Shouldn't this be window.gridElement? (gridId is d
| |
| 97 } | |
| 98 | |
| 99 checkColumns("gridFixedAndMinContentAndFlex", "20px 30px 50px"); | |
| 100 checkColumns("gridFixedAndMinContentAndFlexMultipleOverlap", "20px 10px 70px"); | |
| 101 checkColumns("gridMinMaxFixedFlexAndMaxContentAndAuto", "60px 20px 20px"); | |
| 102 checkColumns("gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems", "100p x 0px 0px"); | |
| 103 checkColumns("gridMinMaxFlexFixedAndMinContentAndFixed", "35px 5px 25px"); | |
| 104 checkColumns("gridMinContentAndMinMaxFixedMinContentAndFlex", "20px 20px 60px"); | |
| 105 checkColumns("gridMaxContentAndMinMaxFixedMaxContentAndFlex", "70px 20px 10px"); | |
| 106 | |
| 107 </script> | |
| 108 </html> | |
| OLD | NEW |
