Chromium Code Reviews Chromium Code Reviews
Issue 855643005:
[CSS Grid Layout] Handling overflow on Content Alignment properties. (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 <script src="../../resources/check-layout.js"></script> | |
| 6 <style> | |
| 7 body { | |
| 8 margin: 0; | |
| 9 } | |
| 10 | |
| 11 .grid { | |
| 12 grid-template-columns: 50px 50px; | |
| 13 grid-template-rows: 100px 100px; | |
| 14 } | |
| 15 | |
| 16 .overflowWidth { | |
| 17 width: 60px; | |
| 18 height: 300px; | |
| 19 } | |
| 20 | |
| 21 .overflowHeight { | |
| 22 width: 200px; | |
| 23 height: 150px; | |
| 24 } | |
| 25 | |
| 26 .noOverflow { | |
|
Julien - ping for review
2015/01/26 16:28:07
This is unused.
| |
| 27 width: 200px; | |
| 28 height: 300px; | |
| 29 } | |
| 30 | |
| 31 .center { | |
| 32 align-content: center; | |
| 33 justify-content: center; | |
| 34 } | |
| 35 | |
| 36 .centerSafe { | |
| 37 align-content: center safe; | |
| 38 justify-content: center safe; | |
| 39 } | |
| 40 | |
| 41 .centerTrue { | |
| 42 align-content: center true; | |
| 43 jusitfy-content: center true; | |
| 44 } | |
| 45 | |
| 46 .end { | |
| 47 align-content: end; | |
| 48 justify-content: end; | |
| 49 } | |
| 50 | |
| 51 .endSafe { | |
| 52 align-content: end safe; | |
| 53 justify-content: end safe; | |
| 54 } | |
| 55 | |
| 56 .endTrue { | |
| 57 align-content: end true; | |
| 58 justify-content: end true; | |
| 59 } | |
| 60 | |
| 61 </style> | |
| 62 </head> | |
| 63 <body onload="checkLayout('.grid')"> | |
| 64 | |
| 65 <p>This test checks that the 'overflow' keyword is applied correctly for Content Alignment properties.</p> | |
| 66 | |
| 67 <div style="position: relative"> | |
| 68 <div class="grid overflowWidth center" data-expected-width="60" data-expecte d-height="300"> | |
| 69 <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> | |
| 70 <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150 " data-expected-width="50" data-expected-height="100"></div> | |
| 71 <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> | |
| 72 <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150 " data-expected-width="50" data-expected-height="100"></div> | |
| 73 </div> | |
| 74 </div> | |
| 75 | |
| 76 <div style="position: relative"> | |
| 77 <div class="grid overflowHeight centerTrue" data-expected-width="200" data-e xpected-height="150"> | |
| 78 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="-25" d ata-expected-width="50" data-expected-height="100"></div> | |
| 79 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="75" d ata-expected-width="50" data-expected-height="100"></div> | |
| 80 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div> | |
| 81 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div> | |
| 82 </div> | |
| 83 </div> | |
| 84 | |
| 85 <div style="position: relative"> | |
| 86 <div class="grid overflowWidth centerSafe" data-expected-width="60" data-exp ected-height="300"> | |
| 87 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="50" da ta-expected-width="50" data-expected-height="100"></div> | |
| 88 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> | |
| 89 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> | |
| 90 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="150 " data-expected-width="50" data-expected-height="100"></div> | |
| 91 </div> | |
| 92 </div> | |
| 93 | |
| 94 <div style="position: relative"> | |
| 95 <div class="grid overflowHeight centerSafe" data-expected-width="200" data-e xpected-height="150"> | |
| 96 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" da ta-expected-width="50" data-expected-height="100"></div> | |
| 97 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> | |
| 98 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> | |
| 99 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="10 0" data-expected-width="50" data-expected-height="100"></div> | |
| 100 </div> | |
| 101 </div> | |
| 102 | |
| 103 <div style="position: relative"> | |
| 104 <div class="grid overflowWidth end" data-expected-width="60" data-expected-h eight="300"> | |
| 105 <div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> | |
| 106 <div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200 " data-expected-width="50" data-expected-height="100"></div> | |
| 107 <div class="firstRowSecondColumn" data-offset-x="10" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> | |
| 108 <div class="secondRowSecondColumn" data-offset-x="10" data-offset-y="200 " data-expected-width="50" data-expected-height="100"></div> | |
| 109 </div> | |
| 110 </div> | |
| 111 | |
| 112 <div style="position: relative"> | |
| 113 <div class="grid overflowHeight endTrue" data-expected-width="200" data-expe cted-height="150"> | |
| 114 <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div> | |
| 115 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> | |
| 116 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="-50 " data-expected-width="50" data-expected-height="100"></div> | |
| 117 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="50 " data-expected-width="50" data-expected-height="100"></div> | |
| 118 </div> | |
| 119 </div> | |
| 120 | |
| 121 <div style="position: relative"> | |
| 122 <div class="grid overflowWidth endSafe" data-expected-width="60" data-expect ed-height="300"> | |
| 123 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" d ata-expected-width="50" data-expected-height="100"></div> | |
| 124 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> | |
| 125 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> | |
| 126 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="200 " data-expected-width="50" data-expected-height="100"></div> | |
| 127 </div> | |
| 128 </div> | |
| 129 | |
| 130 <div style="position: relative"> | |
| 131 <div class="grid overflowHeight endSafe" data-expected-width="200" data-expe cted-height="150"> | |
| 132 <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" d ata-expected-width="50" data-expected-height="100"></div> | |
| 133 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100 " data-expected-width="50" data-expected-height="100"></div> | |
| 134 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> | |
| 135 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="10 0" data-expected-width="50" data-expected-height="100"></div> | |
| 136 </div> | |
| 137 </div> | |
| 138 | |
| 139 </body> | |
| 140 </html> | |
| OLD | NEW |
