Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(72)

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-spanning-and-orthogonal-flows.html

Issue 1407633003: [css-grid] Implementation of Baseline Self-Alignment (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Get advantage of recomputing the intrinsic size to solve the issues with orthogonal flows. Created 3 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <link href="resources/grid.css" rel="stylesheet"> 2 <link href="resources/grid.css" rel="stylesheet">
3 <link href="resources/grid-alignment.css" rel="stylesheet"> 3 <link href="resources/grid-alignment.css" rel="stylesheet">
4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel =stylesheet> 4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel =stylesheet>
5 <style> 5 <style>
6 body { 6 body {
7 margin: 0; 7 margin: 0;
8 } 8 }
9 9
10 .container { 10 .container {
(...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after
76 <div class="container"> 76 <div class="container">
77 <p>Grid: <b>auto</b> | align: <b>start</b> | fixed-sized: <b>300 x 200</b> | font: <b>10px</b> | Blue(LR) - <b>row: 1 / 3</b> col: 1 | Magenta - row: 1 col: 3 | Orange(LR) - <b>row: 2 / 4 col: 2 / 3</b></p> 77 <p>Grid: <b>auto</b> | align: <b>start</b> | fixed-sized: <b>300 x 200</b> | font: <b>10px</b> | Blue(LR) - <b>row: 1 / 3</b> col: 1 | Magenta - row: 1 col: 3 | Orange(LR) - <b>row: 2 / 4 col: 2 / 3</b></p>
78 <div class="grid fixedSize itemsStart"> 78 <div class="grid fixedSize itemsStart">
79 <div class="verticalLR" style="grid-row: 1 / 3; grid-column: 1" dat a-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-hei ght="115">XX XXX X XXX XX</div> 79 <div class="verticalLR" style="grid-row: 1 / 3; grid-column: 1" dat a-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-hei ght="115">XX XXX X XXX XX</div>
80 <div class="" style="grid-row: 1; grid-column: 2" dat a-offset-x="20" data-offset-y="0" data-expected-width="280" data-expected-hei ght="30">XXXX XX X XX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX X XXX XX XX</div > 80 <div class="" style="grid-row: 1; grid-column: 2" dat a-offset-x="20" data-offset-y="0" data-expected-width="280" data-expected-hei ght="30">XXXX XX X XX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX X XXX XX XX</div >
81 <div class="verticalLR" style="grid-row: 2 / 4; grid-column: 2 / 3;" dat a-offset-x="20" data-offset-y="30" data-expected-width="100" data-expected-hei ght="170">XXX X XXX XXX XXX XX X XXXXX XXX XX X XXXXX XX X XX XX X XXX XXX XXX X X X XXXX XXX XXX XXX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX XXX XXX XX X XXX XX X XXX XX XX</div> 81 <div class="verticalLR" style="grid-row: 2 / 4; grid-column: 2 / 3;" dat a-offset-x="20" data-offset-y="30" data-expected-width="100" data-expected-hei ght="170">XXX X XXX XXX XXX XX X XXXXX XXX XX X XXXXX XX X XX XX X XXX XXX XXX X X X XXXX XXX XXX XXX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX XXX XXX XX X XXX XX X XXX XX XX</div>
82 </div> 82 </div>
83 </div> 83 </div>
84 84
85 <p>Grid: <b>min-content</b> / <b>min-content min-content</b> | align: <b>stretch </b> | content-sized: <b>fit-content x auto</b> | font: <b>50px</b> | Blue(LR) - <b>row: 1 / 3</b> col: 1 - <b>XX X X</b> | Magenta - row: 1 col: 1 - <b>X X</b> </p> 85 <p>Grid: <b>min-content</b> / <b>min-content min-content</b> | align: <b>stretch </b> | content-sized: <b>fit-content x auto</b> | font: <b>50px</b> | Blue(LR) - <b>row: 1 / 3</b> col: 1 - <b>XX X X</b> | Magenta - row: 1 col: 1 - <b>X X</b> </p>
86 <div class="grid itemsStart oneMinContentColTwoMinContentRows fit-content" data- expected-width="50" data-expected-height="100"> 86 <div class="grid itemsStart oneMinContentColTwoMinContentRows fit-content" data- expected-width="150" data-expected-height="100">
87 <div class="verticalLR" style="grid-row: 1 / 3; grid-column: 1" data-exp ected-width="150" data-expected-height="100">XX X X</div> 87 <div class="verticalLR" style="grid-row: 1 / 3; grid-column: 1" data-exp ected-width="150" data-expected-height="100">XX X X</div>
88 <div class="" style="grid-row: 1; grid-column: 1" data-exp ected-width="150" data-expected-height="50">X X</div> 88 <div class="" style="grid-row: 1; grid-column: 1" data-exp ected-width="150" data-expected-height="50">X X</div>
89 </div> 89 </div>
90 90
91 </body> 91 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698