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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html

Issue 1488493003: [css-grid] refactoring of layout tests (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Patch rebased and refactoring of alignment css rules. Created 4 years, 11 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
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context-expected.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE HTML> 1 <!DOCTYPE HTML>
2 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">
2 <link href="resources/grid.css" rel="stylesheet"> 3 <link href="resources/grid.css" rel="stylesheet">
3 <script src="../../resources/check-layout.js"></script> 4 <script src="../../resources/check-layout.js"></script>
4 <style> 5 <style>
5 .grid { 6 .grid {
6 width: -webkit-fit-content;
7 position: relative; 7 position: relative;
8 } 8 }
9 .content { 9 .content {
10 width: 200px; 10 width: 200px;
11 height: 200px; 11 height: 200px;
12 } 12 }
13 #fromFixedWidth { width: 150px; } 13 #fromFixedWidth { width: 150px; }
14 #fromFixedHeight { height: 100px; } 14 #fromFixedHeight { height: 100px; }
15 #fromMarginAuto { margin: auto; } 15 #fromMarginAuto { margin: auto; }
16 </style> 16 </style>
17 <p>The grids below had initially 'stretched' items, but we have changed 'height' , 'width' and 'margin' to values which don't allow stretch. This test verifies t hat the layout algorithm properly detects such changes and clear the override he ight and width accordingly.</p> 17 <p>The grids below had initially 'stretched' items, but we have changed 'height' , 'width' and 'margin' to values which don't allow stretch. This test verifies t hat the layout algorithm properly detects such changes and clear the override he ight and width accordingly.</p>
18 <div class="grid" style="grid-template: 200px 200px / 200px 200px;"> 18 <div class="grid fit-content" style="grid-template: 200px 200px / 200px 200px;">
19 <div id="toFixedHeight" class="firstRowFirstColumn" data-expected-width="200 " data-expected-height="100"></div> 19 <div id="toFixedHeight" class="firstRowFirstColumn" data-expected-width="200 " data-expected-height="100"></div>
20 <div class="firstRowSecondColumn" data-expected-width="200" data-expected-he ight="200"></div> 20 <div class="firstRowSecondColumn" data-expected-width="200" data-expected-he ight="200"></div>
21 <div class="secondRowFirstColumn" data-expected-width="200" data-expected-he ight="200"></div> 21 <div class="secondRowFirstColumn" data-expected-width="200" data-expected-he ight="200"></div>
22 <div id="fromFixedHeight" class="secondRowSecondColumn" data-expected-width= "200" data-expected-height="200"></div> 22 <div id="fromFixedHeight" class="secondRowSecondColumn" data-expected-width= "200" data-expected-height="200"></div>
23 </div> 23 </div>
24 <div class="grid" style="grid-template: 200px 200px / 200px 200px;"> 24 <div class="grid fit-content" style="grid-template: 200px 200px / 200px 200px;">
25 <div id="toFixedWidth" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="200"></div> 25 <div id="toFixedWidth" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="200"></div>
26 <div class="firstRowSecondColumn" data-expected-width="200" data-expected-he ight="200"></div> 26 <div class="firstRowSecondColumn" data-expected-width="200" data-expected-he ight="200"></div>
27 <div class="secondRowFirstColumn" data-expected-width="200" data-expected-he ight="200"></div> 27 <div class="secondRowFirstColumn" data-expected-width="200" data-expected-he ight="200"></div>
28 <div id="fromFixedWidth" class="secondRowSecondColumn" data-expected-width=" 200" data-expected-height="200"></div> 28 <div id="fromFixedWidth" class="secondRowSecondColumn" data-expected-width=" 200" data-expected-height="200"></div>
29 </div> 29 </div>
30 <div class="grid" style="grid-template: 200px 200px / 200px 200px;"> 30 <div class="grid fit-content" style="grid-template: 200px 200px / 200px 200px;">
31 <div id="toMarginAuto" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="100"> 31 <div id="toMarginAuto" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="100">
32 <div style="width: 150px; height: 100px"></div> 32 <div style="width: 150px; height: 100px"></div>
33 </div> 33 </div>
34 <div class="firstRowSecondColumn" data-expected-width="200" data-expected-he ight="200"></div> 34 <div class="firstRowSecondColumn" data-expected-width="200" data-expected-he ight="200"></div>
35 <div class="secondRowFirstColumn" data-expected-width="200" data-expected-he ight="200"></div> 35 <div class="secondRowFirstColumn" data-expected-width="200" data-expected-he ight="200"></div>
36 <div id="fromMarginAuto" class="secondRowSecondColumn" data-expected-width=" 200" data-expected-height="200"> 36 <div id="fromMarginAuto" class="secondRowSecondColumn" data-expected-width=" 200" data-expected-height="200">
37 <div style="width: 150px; height: 100px"></div> 37 <div style="width: 150px; height: 100px"></div>
38 </div> 38 </div>
39 </div> 39 </div>
40 <div class="grid"> 40 <div class="grid fit-content">
41 <div id="contentSized-toFixedHeight" class="firstRowFirstColumn" data-expect ed-width="200" data-expected-height="100"></div> 41 <div id="contentSized-toFixedHeight" class="firstRowFirstColumn" data-expect ed-width="200" data-expected-height="100"></div>
42 <div class="firstRowSecondColumn" data-expected-width="200" data-expected-he ight="200"><div class="content"></div></div> 42 <div class="firstRowSecondColumn" data-expected-width="200" data-expected-he ight="200"><div class="content"></div></div>
43 <div class="secondRowFirstColumn" data-expected-width="200" data-expected-he ight="200"><div class="content"></div></div> 43 <div class="secondRowFirstColumn" data-expected-width="200" data-expected-he ight="200"><div class="content"></div></div>
44 <div id="contentSized-fromFixedHeight" class="secondRowSecondColumn" data-ex pected-width="200" data-expected-height="200"></div> 44 <div id="contentSized-fromFixedHeight" class="secondRowSecondColumn" data-ex pected-width="200" data-expected-height="200"></div>
45 </div> 45 </div>
46 <div class="grid"> 46 <div class="grid fit-content">
47 <div id="contentSized-toFixedWidth" class="firstRowFirstColumn" data-expecte d-width="150" data-expected-height="200"></div> 47 <div id="contentSized-toFixedWidth" class="firstRowFirstColumn" data-expecte d-width="150" data-expected-height="200"></div>
48 <div class="firstRowSecondColumn" data-expected-width="200" data-expected-he ight="200"><div class="content"></div></div> 48 <div class="firstRowSecondColumn" data-expected-width="200" data-expected-he ight="200"><div class="content"></div></div>
49 <div class="secondRowFirstColumn" data-expected-width="200" data-expected-he ight="200"><div class="content"></div></div> 49 <div class="secondRowFirstColumn" data-expected-width="200" data-expected-he ight="200"><div class="content"></div></div>
50 <div id="contentSized-fromFixedWidth" class="secondRowSecondColumn" data-exp ected-width="200" data-expected-height="200"></div> 50 <div id="contentSized-fromFixedWidth" class="secondRowSecondColumn" data-exp ected-width="200" data-expected-height="200"></div>
51 </div> 51 </div>
52 <div class="grid"> 52 <div class="grid fit-content">
53 <div id="contentSized-toMarginAuto" class="firstRowFirstColumn" data-expecte d-width="150" data-expected-height="100"> 53 <div id="contentSized-toMarginAuto" class="firstRowFirstColumn" data-expecte d-width="150" data-expected-height="100">
54 <div style="width: 150px; height: 100px"></div> 54 <div style="width: 150px; height: 100px"></div>
55 </div> 55 </div>
56 <div class="firstRowSecondColumn" data-expected-width="200" data-expected-he ight="200"><div class="content"></div></div> 56 <div class="firstRowSecondColumn" data-expected-width="200" data-expected-he ight="200"><div class="content"></div></div>
57 <div class="secondRowFirstColumn" data-expected-width="200" data-expected-he ight="200"><div class="content"></div></div> 57 <div class="secondRowFirstColumn" data-expected-width="200" data-expected-he ight="200"><div class="content"></div></div>
58 <div id="contentSized-fromMarginAuto" class="secondRowSecondColumn" data-exp ected-width="200" data-expected-height="200"> 58 <div id="contentSized-fromMarginAuto" class="secondRowSecondColumn" data-exp ected-width="200" data-expected-height="200">
59 <div style="width: 150px; height: 100px"></div> 59 <div style="width: 150px; height: 100px"></div>
60 </div> 60 </div>
61 </div> 61 </div>
62 <script> 62 <script>
63 document.body.offsetLeft; 63 document.body.offsetLeft;
64 document.getElementById("fromFixedHeight").style.height = "auto"; 64 document.getElementById("fromFixedHeight").style.height = "auto";
65 document.getElementById("toFixedHeight").style.height = "100px"; 65 document.getElementById("toFixedHeight").style.height = "100px";
66 document.getElementById("fromFixedWidth").style.width = "auto"; 66 document.getElementById("fromFixedWidth").style.width = "auto";
67 document.getElementById("toFixedWidth").style.width = "150px"; 67 document.getElementById("toFixedWidth").style.width = "150px";
68 document.getElementById("fromMarginAuto").style.margin = "0"; 68 document.getElementById("fromMarginAuto").style.margin = "0";
69 document.getElementById("toMarginAuto").style.margin = "auto"; 69 document.getElementById("toMarginAuto").style.margin = "auto";
70 document.getElementById("contentSized-fromFixedHeight").style.height = "auto"; 70 document.getElementById("contentSized-fromFixedHeight").style.height = "auto";
71 document.getElementById("contentSized-toFixedHeight").style.height = "100px"; 71 document.getElementById("contentSized-toFixedHeight").style.height = "100px";
72 document.getElementById("contentSized-fromFixedWidth").style.width = "auto"; 72 document.getElementById("contentSized-fromFixedWidth").style.width = "auto";
73 document.getElementById("contentSized-toFixedWidth").style.width = "150px"; 73 document.getElementById("contentSized-toFixedWidth").style.width = "150px";
74 document.getElementById("contentSized-fromMarginAuto").style.margin = "0"; 74 document.getElementById("contentSized-fromMarginAuto").style.margin = "0";
75 document.getElementById("contentSized-toMarginAuto").style.margin = "auto"; 75 document.getElementById("contentSized-toMarginAuto").style.margin = "auto";
76 checkLayout(".grid"); 76 checkLayout(".grid");
77 </script> 77 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context-expected.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698