Changeset 183370 in webkit
- Timestamp:
- Apr 26, 2015 3:44:11 PM (9 years ago)
- Location:
- trunk
- Files:
-
- 2 added
- 11 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r183368 r183370 1 2015-04-26 Javier Fernandez <jfernandez@igalia.com> 2 3 [CSS Grid Layout] Support for align-self and align-items in grid layout 4 https://bugs.webkit.org/show_bug.cgi?id=133225 5 6 Reviewed by Darin Adler. 7 8 Implementation of align-self and align-items properties ifor grid. 9 10 Several layout tests were touched for adapting them to the new grid item's 11 column-axis position when using RTL direction. 12 13 * fast/css-grid-layout/grid-align-expected.txt: Added. 14 * fast/css-grid-layout/grid-align.html: Added. 15 * fast/css-grid-layout/grid-element-border-grid-item.html: 16 * fast/css-grid-layout/grid-element-border-padding-grid-item.html: 17 * fast/css-grid-layout/grid-element-padding-grid-item.html: 18 * fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html: 19 * fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html: 20 * fast/css-grid-layout/grid-item-margin-resolution.html: 21 1 22 2015-04-26 Doug Russell <d_russell@apple.com> 2 23 -
trunk/LayoutTests/fast/css-grid-layout/grid-element-border-grid-item.html
r168416 r183370 21 21 <div style="position: relative"> 22 22 <div class="grid" data-expected-width="280" data-expected-height="260"> 23 <div class=" sizedToGridAreafirstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>24 <div class=" sizedToGridAreafirstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>25 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>26 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>23 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 24 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 25 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 26 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 27 27 </div> 28 28 </div> … … 30 30 <div style="position: relative"> 31 31 <div class="grid verticalRL" data-expected-width="280" data-expected-height="260"> 32 <div class=" sizedToGridAreafirstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>33 <div class=" sizedToGridAreafirstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>34 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>35 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>32 <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 33 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 34 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 35 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 36 36 </div> 37 37 </div> … … 39 39 <div style="position: relative"> 40 40 <div class="grid verticalLR" data-expected-width="280" data-expected-height="260"> 41 <div class=" sizedToGridAreafirstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>42 <div class=" sizedToGridAreafirstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>43 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>44 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>41 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 42 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 43 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 44 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 45 45 </div> 46 46 </div> … … 48 48 <div style="position: relative"> 49 49 <div class="grid horizontalBT" data-expected-width="280" data-expected-height="260"> 50 <div class=" sizedToGridAreafirstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>51 <div class=" sizedToGridAreafirstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>52 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>53 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>50 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 51 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 52 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 53 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 54 54 </div> 55 55 </div> 56 56 57 <!-- rtl direc iton -->57 <!-- rtl direction --> 58 58 <div style="position: relative"> 59 59 <div class="grid directionRTL" data-expected-width="280" data-expected-height="260"> 60 <div class=" sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>61 <div class=" sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>62 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>63 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>60 <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 61 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 62 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 63 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 64 64 </div> 65 65 </div> … … 67 67 <div style="position: relative"> 68 68 <div class="grid verticalRL directionRTL" data-expected-width="280" data-expected-height="260"> 69 <div class=" sizedToGridArea firstRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>70 <div class=" sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>71 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>72 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>69 <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 70 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 71 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 72 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 73 73 </div> 74 74 </div> … … 76 76 <div style="position: relative"> 77 77 <div class="grid verticalLR directionRTL" data-expected-width="280" data-expected-height="260"> 78 <div class=" sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>79 <div class=" sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>80 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>81 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>78 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 79 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 80 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 81 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 82 82 </div> 83 83 </div> … … 85 85 <div style="position: relative"> 86 86 <div class="grid horizontalBT directionRTL" data-expected-width="280" data-expected-height="260"> 87 <div class=" sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>88 <div class=" sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>89 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>90 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>87 <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 88 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 89 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 90 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 91 91 </div> 92 92 </div> -
trunk/LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item.html
r168416 r183370 22 22 <div style="position: relative"> 23 23 <div class="grid" data-expected-width="280" data-expected-height="260"> 24 <div class=" sizedToGridAreafirstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>25 <div class=" sizedToGridAreafirstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>26 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>27 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>24 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 25 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 26 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 27 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 28 28 </div> 29 29 </div> … … 31 31 <div style="position: relative"> 32 32 <div class="grid verticalRL" data-expected-width="280" data-expected-height="260"> 33 <div class=" sizedToGridAreafirstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>34 <div class=" sizedToGridAreafirstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>35 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>36 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>33 <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 34 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 35 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 36 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 37 37 </div> 38 38 </div> … … 40 40 <div style="position: relative"> 41 41 <div class="grid verticalLR" data-expected-width="280" data-expected-height="260"> 42 <div class=" sizedToGridAreafirstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>43 <div class=" sizedToGridAreafirstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>44 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>45 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>42 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 43 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 44 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 45 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 46 46 </div> 47 47 </div> … … 49 49 <div style="position: relative"> 50 50 <div class="grid horizontalBT" data-expected-width="280" data-expected-height="260"> 51 <div class=" sizedToGridAreafirstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>52 <div class=" sizedToGridAreafirstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>53 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>54 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>51 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 52 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 53 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 54 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 55 55 </div> 56 56 </div> … … 59 59 <div style="position: relative"> 60 60 <div class="grid directionRTL" data-expected-width="280" data-expected-height="260"> 61 <div class=" sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>62 <div class=" sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>63 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>64 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>61 <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 62 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 63 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 64 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 65 65 </div> 66 66 </div> … … 68 68 <div style="position: relative"> 69 69 <div class="grid verticalRL directionRTL" data-expected-width="280" data-expected-height="260"> 70 <div class=" sizedToGridArea firstRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>71 <div class=" sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>72 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>73 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>70 <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 71 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 72 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 73 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 74 74 </div> 75 75 </div> … … 77 77 <div style="position: relative"> 78 78 <div class="grid verticalLR directionRTL" data-expected-width="280" data-expected-height="260"> 79 <div class=" sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>80 <div class=" sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>81 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>82 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>79 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 80 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 81 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 82 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 83 83 </div> 84 84 </div> … … 86 86 <div style="position: relative"> 87 87 <div class="grid horizontalBT directionRTL" data-expected-width="280" data-expected-height="260"> 88 <div class=" sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>89 <div class=" sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>90 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>91 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>88 <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 89 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 90 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 91 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 92 92 </div> 93 93 </div> -
trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item.html
r168416 r183370 18 18 <div style="position: relative"> 19 19 <div class="grid" data-expected-width="280" data-expected-height="260"> 20 <div class=" sizedToGridAreafirstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>21 <div class=" sizedToGridAreafirstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>22 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>23 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>20 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 21 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 22 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 23 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 24 24 </div> 25 25 </div> … … 27 27 <div style="position: relative"> 28 28 <div class="grid verticalRL" data-expected-width="280" data-expected-height="260"> 29 <div class=" sizedToGridAreafirstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>30 <div class=" sizedToGridAreafirstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>31 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>32 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>29 <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 30 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 31 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 32 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 33 33 </div> 34 34 </div> … … 36 36 <div style="position: relative"> 37 37 <div class="grid verticalLR" data-expected-width="280" data-expected-height="260"> 38 <div class=" sizedToGridAreafirstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>39 <div class=" sizedToGridAreafirstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>40 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>41 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>38 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 39 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 40 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 41 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 42 42 </div> 43 43 </div> … … 45 45 <div style="position: relative"> 46 46 <div class="grid horizontalBT" data-expected-width="280" data-expected-height="260"> 47 <div class=" sizedToGridAreafirstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>48 <div class=" sizedToGridAreafirstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>49 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>50 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>47 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 48 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 49 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 50 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 51 51 </div> 52 52 </div> … … 55 55 <div style="position: relative"> 56 56 <div class="grid directionRTL" data-expected-width="280" data-expected-height="260"> 57 <div class=" sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>58 <div class=" sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>59 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>60 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>57 <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 58 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 59 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 60 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 61 61 </div> 62 62 </div> … … 64 64 <div style="position: relative"> 65 65 <div class="grid verticalRL directionRTL" data-expected-width="280" data-expected-height="260"> 66 <div class=" sizedToGridArea firstRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>67 <div class=" sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>68 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>69 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>66 <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 67 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 68 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 69 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 70 70 </div> 71 71 </div> … … 73 73 <div style="position: relative"> 74 74 <div class="grid verticalLR directionRTL" data-expected-width="280" data-expected-height="260"> 75 <div class=" sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>76 <div class=" sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>77 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>78 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>75 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 76 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 77 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 78 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 79 79 </div> 80 80 </div> … … 82 82 <div style="position: relative"> 83 83 <div class="grid horizontalBT directionRTL" data-expected-width="280" data-expected-height="260"> 84 <div class=" sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>85 <div class=" sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>86 <div class="s izedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>87 <div class="s izedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>84 <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 85 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div> 86 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 87 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div> 88 88 </div> 89 89 </div> -
trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html
r169197 r183370 54 54 <div class="testContainer"> 55 55 <div class="grid gridLong"> 56 <div class="gridItem firstRowFirstColumn" style=" top: 20px;"></div>57 <div class="gridItem firstRowSecondColumn" style="left: 20px;"></div>58 <div class="gridItem secondRowFirstColumn" style=" top: 60px;"></div>59 <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>56 <div class="gridItem firstRowFirstColumn" style="left: 20px; top: 20px;"></div> 57 <div class="gridItem firstRowSecondColumn" style="left: 0px"></div> 58 <div class="gridItem secondRowFirstColumn" style="left: 20px; top: 60px;"></div> 59 <div class="gridItem secondRowSecondColumn" style="left: 0px; top: 60px;"></div> 60 60 </div> 61 61 </div> … … 63 63 <div class="testContainer"> 64 64 <div class="grid gridShort"> 65 <div class="gridItem firstRowFirstColumn" style=" top: 20px;"></div>66 <div class="gridItem firstRowSecondColumn" style="left: 20px;"></div>67 <div class="gridItem secondRowFirstColumn" style=" top: 60px;"></div>68 <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>65 <div class="gridItem firstRowFirstColumn" style="left: 20px; top: 20px;"></div> 66 <div class="gridItem firstRowSecondColumn" style="left: 0px;"></div> 67 <div class="gridItem secondRowFirstColumn" style="left: 20px; top: 60px;"></div> 68 <div class="gridItem secondRowSecondColumn" style="left: 0px; top: 60px;"></div> 69 69 </div> 70 70 </div> … … 72 72 <div class="testContainer"> 73 73 <div class="grid gridLong"> 74 <div class="gridItem firstRowFirstColumn" style=" top: 80px;"></div>75 <div class="gridItem firstRowSecondColumn" style="left: 20px; top: 80px;"></div>76 <div class="gridItem secondRowFirstColumn" style="left: 0px;"></div>77 <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 20px;"></div>74 <div class="gridItem firstRowFirstColumn" style="left: 20px; top: 80px;"></div> 75 <div class="gridItem firstRowSecondColumn" style="left: 0px; top: 80px;"></div> 76 <div class="gridItem secondRowFirstColumn" style="left: 20px;"></div> 77 <div class="gridItem secondRowSecondColumn" style="left: 0px; top: 20px;"></div> 78 78 </div> 79 79 </div> … … 81 81 <div class="testContainer"> 82 82 <div class="grid gridShort"> 83 <div class="gridItem firstRowFirstColumn" style=" top: 60px;"></div>84 <div class="gridItem firstRowSecondColumn" style="left: 20px; top: 40px;"></div>85 <div class="gridItem secondRowFirstColumn" style="left: 0px;"></div>86 <div class="gridItem secondRowSecondColumn" style="left: 20px;"></div>83 <div class="gridItem firstRowFirstColumn" style="left: 20px; top: 60px;"></div> 84 <div class="gridItem firstRowSecondColumn" style="left: 0px; top: 40px;"></div> 85 <div class="gridItem secondRowFirstColumn" style="left: 20px;"></div> 86 <div class="gridItem secondRowSecondColumn" style="left: 0px;"></div> 87 87 </div> 88 88 </div> -
trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html
r169197 r183370 54 54 <div class="testContainer"> 55 55 <div class="grid gridLong"> 56 <div class="gridItem firstRowFirstColumn" style="left: 180px; "></div>57 <div class="gridItem firstRowSecondColumn" style="left: 180px; top: 60px;"></div>58 <div class="gridItem secondRowFirstColumn" style="left: 160px; "></div>59 <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 80px;"></div>56 <div class="gridItem firstRowFirstColumn" style="left: 180px; top: 80px;"></div> 57 <div class="gridItem firstRowSecondColumn" style="left: 180px; top: 20px;"></div> 58 <div class="gridItem secondRowFirstColumn" style="left: 160px; top: 80px;"></div> 59 <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 0px;"></div> 60 60 </div> 61 61 </div> … … 63 63 <div class="testContainer"> 64 64 <div class="grid gridShort"> 65 <div class="gridItem firstRowFirstColumn" style="left: 180px; "></div>66 <div class="gridItem firstRowSecondColumn" style="left: 180px; top: 60px;"></div>67 <div class="gridItem secondRowFirstColumn" style="left: 160px; top: 20px;"></div>68 <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 60px;"></div>65 <div class="gridItem firstRowFirstColumn" style="left: 180px; top: 60px;"></div> 66 <div class="gridItem firstRowSecondColumn" style="left: 180px; top: 0px;"></div> 67 <div class="gridItem secondRowFirstColumn" style="left: 160px; top: 40px;"></div> 68 <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 0px;"></div> 69 69 </div> 70 70 </div> … … 72 72 <div class="testContainer"> 73 73 <div class="grid gridLong"> 74 <div class="gridItem firstRowFirstColumn" style="top: 0px;"></div>75 <div class="gridItem firstRowSecondColumn" style="top: 60px;"></div>76 <div class="gridItem secondRowFirstColumn" style="left: 20px; "></div>77 <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 80px;"></div>74 <div class="gridItem firstRowFirstColumn" style="top: 80px;"></div> 75 <div class="gridItem firstRowSecondColumn" style="top: 20px;"></div> 76 <div class="gridItem secondRowFirstColumn" style="left: 20px; top: 80px"></div> 77 <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 0px;"></div> 78 78 </div> 79 79 </div> … … 81 81 <div class="testContainer"> 82 82 <div class="grid gridShort"> 83 <div class="gridItem firstRowFirstColumn" style="top: 0px;"></div>84 <div class="gridItem firstRowSecondColumn" style="top: 60px;"></div>85 <div class="gridItem secondRowFirstColumn" style="left: 20px; top: 20px;" ></div>86 <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>83 <div class="gridItem firstRowFirstColumn" style="top: 60px;"></div> 84 <div class="gridItem firstRowSecondColumn" style="top: 0px;"></div> 85 <div class="gridItem secondRowFirstColumn" style="left: 20px; top: 40px;" ></div> 86 <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 0px;"></div> 87 87 </div> 88 88 </div> -
trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-resolution.html
r168416 r183370 61 61 <div style="position: relative"> 62 62 <div class="grid directionRTL" data-expected-width="200" data-expected-height="200"> 63 <div class="gridItem firstRowFirstColumn" data-offset-x=" 30" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>64 <div class="gridItem firstRowSecondColumn" data-offset-x=" 130" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>65 <div class="gridItem secondRowFirstColumn" data-offset-x=" 30" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>66 <div class="gridItem secondRowSecondColumn" data-offset-x=" 130" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>63 <div class="gridItem firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div> 64 <div class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div> 65 <div class="gridItem secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 66 <div class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 67 67 </div> 68 68 </div> … … 70 70 <div style="position: relative"> 71 71 <div class="grid verticalRL directionRTL" data-expected-width="200" data-expected-height="200"> 72 <div class="gridItem firstRowFirstColumn" data-offset-x="150" data-offset-y=" 40" data-expected-width="20" data-expected-height="40"></div>73 <div class="gridItem firstRowSecondColumn" data-offset-x="150" data-offset-y=" 140" data-expected-width="20" data-expected-height="40"></div>74 <div class="gridItem secondRowFirstColumn" data-offset-x="50" data-offset-y=" 40" data-expected-width="20" data-expected-height="40"></div>75 <div class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y=" 140" data-expected-width="20" data-expected-height="40"></div>72 <div class="gridItem firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 73 <div class="gridItem firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div> 74 <div class="gridItem secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 75 <div class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div> 76 76 </div> 77 77 </div> … … 79 79 <div style="position: relative"> 80 80 <div class="grid verticalLR directionRTL" data-expected-width="200" data-expected-height="200"> 81 <div class="gridItem firstRowFirstColumn" data-offset-x="50" data-offset-y=" 40" data-expected-width="20" data-expected-height="40"></div>82 <div class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y=" 140" data-expected-width="20" data-expected-height="40"></div>83 <div class="gridItem secondRowFirstColumn" data-offset-x="150" data-offset-y=" 40" data-expected-width="20" data-expected-height="40"></div>84 <div class="gridItem secondRowSecondColumn" data-offset-x="150" data-offset-y=" 140" data-expected-width="20" data-expected-height="40"></div>81 <div class="gridItem firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 82 <div class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div> 83 <div class="gridItem secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 84 <div class="gridItem secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div> 85 85 </div> 86 86 </div> … … 88 88 <div style="position: relative"> 89 89 <div class="grid horizontalBT directionRTL" data-expected-width="200" data-expected-height="200"> 90 <div class="gridItem firstRowFirstColumn" data-offset-x=" 30" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>91 <div class="gridItem firstRowSecondColumn" data-offset-x=" 130" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>92 <div class="gridItem secondRowFirstColumn" data-offset-x=" 30" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>93 <div class="gridItem secondRowSecondColumn" data-offset-x=" 130" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>90 <div class="gridItem firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 91 <div class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 92 <div class="gridItem secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div> 93 <div class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div> 94 94 </div> 95 95 </div> -
trunk/Source/WebCore/ChangeLog
r183368 r183370 1 2015-04-26 Javier Fernandez <jfernandez@igalia.com> 2 3 [CSS Grid Layout] Support for align-self and align-items in grid layout 4 https://bugs.webkit.org/show_bug.cgi?id=133225 5 6 Reviewed by Darin Adler. 7 8 Implementation of align-self and align-items properties for grid. It supports 9 different writing-modes and direction. Margins, borders and paddings are also 10 considered when computing the final position and stretched size. 11 12 Overflow handling is still missing and will be added when implemented row-axis 13 alignment support. 14 15 Test: fast/css-grid-layout/grid-align.html 16 17 * rendering/RenderBox.cpp: 18 (WebCore::RenderBox::computeLogicalHeight): 19 * rendering/RenderGrid.cpp: 20 (WebCore::RenderGrid::logicalContentHeightForChild): 21 (WebCore::RenderGrid::layoutGridItems): 22 (WebCore::computeOverflowAlignmentOffset): 23 (WebCore::RenderGrid::endOfRowForChild): 24 (WebCore::RenderGrid::startOfRowForChild): 25 (WebCore::RenderGrid::centeredRowPositionForChild): 26 (WebCore::marginWidthForChild): 27 (WebCore::marginHeightForChild): 28 (WebCore::RenderGrid::allowedToStretchLogicalHeightForChild): 29 (WebCore::RenderGrid::needToStretchChildLogicalHeight): 30 (WebCore::RenderGrid::marginLogicalHeightForChild): 31 (WebCore::RenderGrid::availableAlignmentSpaceForChildBeforeStretching): 32 (WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded): 33 (WebCore::RenderGrid::rowPositionForChild): 34 (WebCore::RenderGrid::findChildLogicalPosition): 35 (WebCore::RenderGrid::populateGridPositions): Deleted. 36 * rendering/RenderGrid.h: 37 1 38 2015-04-26 Doug Russell <d_russell@apple.com> 2 39 -
trunk/Source/WebCore/rendering/RenderBox.cpp
r183100 r183370 2713 2713 // FIXME: Account for block-flow in flexible boxes. 2714 2714 // https://bugs.webkit.org/show_bug.cgi?id=46418 2715 if (hasOverrideLogicalContentHeight() && parent()->isFlexibleBoxIncludingDeprecated())2715 if (hasOverrideLogicalContentHeight() && (parent()->isFlexibleBoxIncludingDeprecated() || parent()->isRenderGrid())) 2716 2716 h = Length(overrideLogicalContentHeight(), Fixed); 2717 2717 else if (treatAsReplaced) -
trunk/Source/WebCore/rendering/RenderGrid.cpp
r183065 r183370 41 41 static const int infinity = -1; 42 42 43 enum GridAxisPosition {GridAxisStart, GridAxisEnd, GridAxisCenter}; 44 43 45 class GridTrack { 44 46 public: … … 549 551 LayoutUnit oldOverrideContainingBlockContentLogicalWidth = child.hasOverrideContainingBlockLogicalWidth() ? child.overrideContainingBlockContentLogicalWidth() : LayoutUnit(); 550 552 LayoutUnit overrideContainingBlockContentLogicalWidth = gridAreaBreadthForChild(child, ForColumns, columnTracks); 551 if (child.hasRelativeLogicalHeight() || oldOverrideContainingBlockContentLogicalWidth != overrideContainingBlockContentLogicalWidth) 553 if (child.hasRelativeLogicalHeight() || oldOverrideContainingBlockContentLogicalWidth != overrideContainingBlockContentLogicalWidth) { 552 554 child.setNeedsLayout(MarkOnlyThis); 555 // We need to clear the stretched height to properly compute logical height during layout. 556 child.clearOverrideLogicalContentHeight(); 557 } 553 558 554 559 child.setOverrideContainingBlockContentLogicalWidth(overrideContainingBlockContentLogicalWidth); … … 1175 1180 LayoutRect oldChildRect = child->frameRect(); 1176 1181 1177 // FIXME: Grid items should stretch to fill their cells. Once we 1178 // implement grid-{column,row}-align, we can also shrink to fit. For 1179 // now, just size as if we were a regular child. 1182 // Stretching logic might force a child layout, so we need to run it before the layoutIfNeeded 1183 // call to avoid unnecessary relayouts. This might imply that child margins, needed to correctly 1184 // determine the available space before stretching, are not set yet. 1185 applyStretchAlignmentToChildIfNeeded(*child, overrideContainingBlockContentLogicalHeight); 1186 1180 1187 child->layoutIfNeeded(); 1181 1188 … … 1234 1241 } 1235 1242 1236 LayoutPoint RenderGrid::findChildLogicalPosition(RenderBox& child, const GridSizingData& sizingData) 1243 LayoutUnit RenderGrid::endOfRowForChild(const RenderBox& child) const 1244 { 1245 const GridCoordinate& coordinate = cachedGridCoordinate(child); 1246 1247 LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()]; 1248 // The grid items should be inside the grid container's border box, that's why they need to be shifted. 1249 LayoutUnit rowPosition = startOfRow + marginBeforeForChild(child); 1250 1251 LayoutUnit endOfRow = m_rowPositions[coordinate.rows.resolvedFinalPosition.next().toInt()]; 1252 // FIXME: This should account for the grid item's <overflow-position>. 1253 return rowPosition + std::max<LayoutUnit>(0, endOfRow - startOfRow - child.logicalHeight()); 1254 } 1255 1256 LayoutUnit RenderGrid::startOfRowForChild(const RenderBox& child) const 1257 { 1258 const GridCoordinate& coordinate = cachedGridCoordinate(child); 1259 1260 LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()]; 1261 // The grid items should be inside the grid container's border box, that's why they need to be shifted. 1262 // FIXME: This should account for the grid item's <overflow-position>. 1263 LayoutUnit rowPosition = startOfRow + marginBeforeForChild(child); 1264 1265 return rowPosition; 1266 } 1267 1268 LayoutUnit RenderGrid::centeredRowPositionForChild(const RenderBox& child) const 1269 { 1270 const GridCoordinate& coordinate = cachedGridCoordinate(child); 1271 1272 // The grid items should be inside the grid container's border box, that's why they need to be shifted. 1273 LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()]; 1274 LayoutUnit endOfRow = m_rowPositions[coordinate.rows.resolvedFinalPosition.next().toInt()]; 1275 // FIXME: This should account for the grid item's <overflow-position>. 1276 return startOfRow + std::max<LayoutUnit>(0, endOfRow - startOfRow - child.logicalHeight()) / 2; 1277 } 1278 1279 bool RenderGrid::allowedToStretchLogicalHeightForChild(const RenderBox& child) const 1280 { 1281 return child.style().logicalHeight().isAuto() && !child.style().marginBeforeUsing(&style()).isAuto() && !child.style().marginAfterUsing(&style()).isAuto(); 1282 } 1283 1284 // FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox. 1285 bool RenderGrid::needToStretchChildLogicalHeight(const RenderBox& child) const 1286 { 1287 if (RenderStyle::resolveAlignment(style(), child.style(), ItemPositionStretch) != ItemPositionStretch) 1288 return false; 1289 1290 return isHorizontalWritingMode() && child.style().height().isAuto(); 1291 } 1292 1293 // FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox. 1294 LayoutUnit RenderGrid::marginLogicalHeightForChild(const RenderBox& child) const 1295 { 1296 return isHorizontalWritingMode() ? child.verticalMarginExtent() : child.horizontalMarginExtent(); 1297 } 1298 1299 LayoutUnit RenderGrid::availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox& child) const 1300 { 1301 return gridAreaBreadthForChild - marginLogicalHeightForChild(child); 1302 } 1303 1304 // FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox. 1305 void RenderGrid::applyStretchAlignmentToChildIfNeeded(RenderBox& child, LayoutUnit gridAreaBreadthForChild) 1306 { 1307 if (RenderStyle::resolveAlignment(style(), child.style(), ItemPositionStretch) != ItemPositionStretch) 1308 return; 1309 1310 bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode(); 1311 if (allowedToStretchLogicalHeightForChild(child)) { 1312 // FIXME: If the child has orthogonal flow, then it already has an override height set, so use it. 1313 // FIXME: grid track sizing and positioning do not support orthogonal modes yet. 1314 if (!hasOrthogonalWritingMode) { 1315 LayoutUnit stretchedLogicalHeight = availableAlignmentSpaceForChildBeforeStretching(gridAreaBreadthForChild, child); 1316 LayoutUnit desiredLogicalHeight = child.constrainLogicalHeightByMinMax(stretchedLogicalHeight); 1317 1318 // FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905. 1319 bool childNeedsRelayout = desiredLogicalHeight != child.logicalHeight(); 1320 if (childNeedsRelayout || !child.hasOverrideLogicalContentHeight()) 1321 child.setOverrideLogicalContentHeight(desiredLogicalHeight - child.borderAndPaddingLogicalHeight()); 1322 if (childNeedsRelayout) { 1323 child.setLogicalHeight(0); 1324 child.setNeedsLayout(); 1325 } 1326 } 1327 } 1328 } 1329 1330 static GridAxisPosition columnAxisPosition(ItemPosition position, bool hasOrthogonalWritingMode, bool hasSameWritingMode) 1331 { 1332 switch (position) { 1333 case ItemPositionSelfStart: 1334 // If orthogonal writing-modes, this computes to 'start'. 1335 // FIXME: grid track sizing and positioning do not support orthogonal modes yet. 1336 // self-start is based on the child's block axis direction. That's why we need to check against the grid container's block flow. 1337 return (hasOrthogonalWritingMode || hasSameWritingMode) ? GridAxisStart : GridAxisEnd; 1338 case ItemPositionSelfEnd: 1339 // If orthogonal writing-modes, this computes to 'end'. 1340 // FIXME: grid track sizing and positioning do not support orthogonal modes yet. 1341 // self-end is based on the child's block axis direction. That's why we need to check against the grid container's block flow. 1342 return (hasOrthogonalWritingMode || hasSameWritingMode) ? GridAxisEnd : GridAxisStart; 1343 case ItemPositionLeft: 1344 // The alignment axis (column axis) and the inline axis are parallell in 1345 // orthogonal writing mode. Otherwise this this is equivalent to 'start'. 1346 // FIXME: grid track sizing and positioning do not support orthogonal modes yet. 1347 return GridAxisStart; 1348 case ItemPositionRight: 1349 // The alignment axis (column axis) and the inline axis are parallell in 1350 // orthogonal writing mode. Otherwise this this is equivalent to 'start'. 1351 // FIXME: grid track sizing and positioning do not support orthogonal modes yet. 1352 return hasOrthogonalWritingMode ? GridAxisEnd : GridAxisStart; 1353 case ItemPositionCenter: 1354 return GridAxisCenter; 1355 case ItemPositionFlexStart: // Only used in flex layout, otherwise equivalent to 'start'. 1356 case ItemPositionStart: 1357 return GridAxisStart; 1358 case ItemPositionFlexEnd: // Only used in flex layout, otherwise equivalent to 'end'. 1359 case ItemPositionEnd: 1360 return GridAxisEnd; 1361 case ItemPositionStretch: 1362 return GridAxisStart; 1363 case ItemPositionBaseline: 1364 case ItemPositionLastBaseline: 1365 // FIXME: Implement the ItemPositionBaseline value. For now, we always 'start' align the child. 1366 return GridAxisStart; 1367 case ItemPositionAuto: 1368 break; 1369 } 1370 1371 ASSERT_NOT_REACHED(); 1372 return GridAxisStart; 1373 } 1374 1375 LayoutUnit RenderGrid::rowPositionForChild(const RenderBox& child) const 1376 { 1377 bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode(); 1378 bool hasSameWritingMode = child.style().writingMode() == style().writingMode(); 1379 ItemPosition position = RenderStyle::resolveAlignment(style(), child.style(), ItemPositionStretch); 1380 1381 switch (columnAxisPosition(position, hasOrthogonalWritingMode, hasSameWritingMode)) { 1382 case GridAxisStart: 1383 return startOfRowForChild(child); 1384 case GridAxisEnd: 1385 return endOfRowForChild(child); 1386 case GridAxisCenter: 1387 return centeredRowPositionForChild(child); 1388 } 1389 1390 ASSERT_NOT_REACHED(); 1391 return 0; 1392 } 1393 1394 LayoutPoint RenderGrid::findChildLogicalPosition(const RenderBox& child, const GridSizingData& sizingData) const 1237 1395 { 1238 1396 const GridCoordinate& coordinate = cachedGridCoordinate(child); … … 1240 1398 ASSERT_UNUSED(sizingData, coordinate.rows.resolvedInitialPosition.toInt() < sizingData.rowTracks.size()); 1241 1399 1400 LayoutUnit columnPosition = m_columnPositions[coordinate.columns.resolvedInitialPosition.toInt()] + marginStartForChild(child); 1401 // We stored m_columnPositions's data ignoring the direction, hence we might need now 1402 // to translate positions from RTL to LTR, as it's more convenient for painting. 1403 if (!style().isLeftToRightDirection()) 1404 columnPosition = (m_columnPositions[m_columnPositions.size() - 1] + borderAndPaddingLogicalLeft()) - columnPosition - child.logicalWidth(); 1405 1242 1406 // The grid items should be inside the grid container's border box, that's why they need to be shifted. 1243 return LayoutPoint( m_columnPositions[coordinate.columns.resolvedInitialPosition.toInt()] + marginStartForChild(child), m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()] + marginBeforeForChild(child));1407 return LayoutPoint(columnPosition, rowPositionForChild(child)); 1244 1408 } 1245 1409 -
trunk/Source/WebCore/rendering/RenderGrid.h
r182780 r183370 118 118 LayoutUnit minContentForChild(RenderBox&, GridTrackSizingDirection, Vector<GridTrack>& columnTracks); 119 119 LayoutUnit maxContentForChild(RenderBox&, GridTrackSizingDirection, Vector<GridTrack>& columnTracks); 120 LayoutPoint findChildLogicalPosition(RenderBox&, const GridSizingData&); 120 LayoutUnit startOfRowForChild(const RenderBox&) const; 121 LayoutUnit endOfRowForChild(const RenderBox&) const; 122 LayoutUnit centeredRowPositionForChild(const RenderBox&) const; 123 LayoutUnit rowPositionForChild(const RenderBox&) const; 124 LayoutPoint findChildLogicalPosition(const RenderBox&, const GridSizingData&) const; 121 125 GridCoordinate cachedGridCoordinate(const RenderBox&) const; 122 126 … … 124 128 125 129 virtual void paintChildren(PaintInfo& forSelf, const LayoutPoint& paintOffset, PaintInfo& forChild, bool usePrintRect) override; 130 bool allowedToStretchLogicalHeightForChild(const RenderBox&) const; 131 bool needToStretchChildLogicalHeight(const RenderBox&) const; 132 LayoutUnit marginLogicalHeightForChild(const RenderBox&) const; 133 LayoutUnit computeMarginLogicalHeightForChild(const RenderBox&) const; 134 LayoutUnit availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox&) const; 135 void applyStretchAlignmentToChildIfNeeded(RenderBox&, LayoutUnit gridAreaBreadthForChild); 126 136 127 137 #ifndef NDEBUG
Note: See TracChangeset
for help on using the changeset viewer.