LayoutTests/ChangeLog

 12016-10-11 Sergio Villar Senin <svillar@igalia.com>
 2
 3 [css-grid] Fix intrinsic maximums resolution with fit-content and auto
 4 https://bugs.webkit.org/show_bug.cgi?id=163282
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 New test cases to verify that all tracks with intrinsic max track sizing functions are used
 9 in step 2.5 of the track sizing algorith. Some of the new test cases are commented due to
 10 http://wkb.ug/163283.
 11
 12 * fast/css-grid-layout/grid-intrinsic-maximums-expected.html: Added.
 13 * fast/css-grid-layout/grid-intrinsic-maximums.html: Added.
 14
1152016-10-11 Antoine Quint <graouts@apple.com>
216
317 [mac] LayoutTest media/modern-media-controls/play-pause-button/play-pause-button.html is a flaky failure

LayoutTests/fast/css-grid-layout/grid-intrinsic-maximums-expected.html

 1<!DOCTYPE html>
 2
 3<link href="resources/grid.css" rel="stylesheet">
 4<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 5
 6<style>
 7
 8.item {
 9 font: 10px/1 Ahem;
 10 background: cyan;
 11 grid-column: 1 / -1;
 12}
 13
 14.abs {
 15 width: 100%;
 16 height: 5px;
 17 position: absolute;
 18}
 19
 20.grid {
 21 border: 2px solid black;
 22 display: grid;
 23 position: relative;
 24 padding-top: 10px;
 25 margin-bottom: 10px;
 26 width: 100px;
 27 justify-items: start;
 28}
 29
 30.float {
 31 float: left;
 32 width: 200px;
 33}
 34
 35.col1 { grid-column: 1 / 2; background: orange; }
 36.col2 { grid-column: 2 / 3; background: indigo; }
 37.col3 { grid-column: 3 / 4; background: green; }
 38
 39</style>
 40
 41<div class="float">
 42
 43<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 -->
 44<!--
 45<div class="grid" style="grid-template: 20px / 10px 5px;">
 46 <div class="item" style="min-width: 15px;">XXXX XXXX</div>
 47 <div class="abs col1"></div>
 48 <div class="abs col2"></div>
 49</div>
 50-->
 51
 52<div class="grid" style="grid-template: 20px / 50px 5px;">
 53 <div class="item" style="min-width: 55px;">XXXX XXXX</div>
 54 <div class="abs col1"></div>
 55 <div class="abs col2"></div>
 56</div>
 57
 58<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 -->
 59<!--
 60<div class="grid" style="grid-template: 20px / 85px 5px;">
 61 <div class="item min-width-max-content">XXXX XXXX</div>
 62 <div class="abs col1"></div>
 63 <div class="abs col2"></div>
 64</div>
 65-->
 66
 67<div class="grid" style="grid-template: 20px / 5px 85px;">
 68 <div class="item" style="min-width: 15px;">XXXX XXXX</div>
 69 <div class="abs col1"></div>
 70 <div class="abs col2"></div>
 71</div>
 72
 73<div class="grid" style="grid-template: 20px / 5px 85px;">
 74 <div class="item" style="min-width: 55px;">XXXX XXXX</div>
 75 <div class="abs col1"></div>
 76 <div class="abs col2"></div>
 77</div>
 78
 79<div class="grid" style="grid-template: 20px / 5px 85px;">
 80 <div class="item min-width-max-content">XXXX XXXX</div>
 81 <div class="abs col1"></div>
 82 <div class="abs col2"></div>
 83</div>
 84
 85</div>
 86
 87<div class="float">
 88
 89<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 -->
 90<!--
 91<div class="grid" style="grid-template: 20px / repeat(2, 5px) 80px;">
 92 <div class="item" style="min-width: 15px;">XXXX XXXX</div>
 93 <div class="abs col1"></div>
 94 <div class="abs col2"></div>
 95 <div class="abs col3"></div>
 96</div>
 97-->
 98
 99<div class="grid" style="grid-template: 20px / 25px 5px 60px;">
 100 <div class="item" style="min-width: 55px;">XXXX XXXX</div>
 101 <div class="abs col1"></div>
 102 <div class="abs col2"></div>
 103 <div class="abs col3"></div>
 104</div>
 105
 106<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 -->
 107<!--
 108<div class="grid" style="grid-template: 20px / calc(85px / 2) 5px calc(85px / 2);">
 109 <div class="item min-width-max-content">XXXX XXXX</div>
 110 <div class="abs col1"></div>
 111 <div class="abs col2"></div>
 112 <div class="abs col3"></div>
 113</div>
 114-->
 115
 116<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 -->
 117<!--
 118<div class="grid" style="grid-template: 20px / 90px repeat(2, 5px);">
 119 <div class="item" style="min-width: 15px;">XXXX XXXX</div>
 120 <div class="abs col1"></div>
 121 <div class="abs col2"></div>
 122 <div class="abs col3"></div>
 123</div>
 124-->
 125
 126<div class="grid" style="grid-template: 20px / 70px 5px 25px;">
 127 <div class="item" style="min-width: 55px;">XXXX XXXX</div>
 128 <div class="abs col1"></div>
 129 <div class="abs col2"></div>
 130 <div class="abs col3"></div>
 131</div>
 132
 133<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 -->
 134<!--
 135<div class="grid" style="grid-template: 20px / calc(105px/2) 5px calc(85px/2);" style="justify-items: start">
 136 <div class="item min-width-max-content">XXXX XXXX</div>
 137 <div class="abs col1"></div>
 138 <div class="abs col2"></div>
 139 <div class="abs col3"></div>
 140</div>
 141-->
 142
 143</div>
 144
 145<div class="float">
 146
 147<div class="grid" style="grid-template: 20px / calc(60px - 15px/2) 5px calc(25px + 35px/2);">
 148 <div class="item" style="min-width: 15px;">XXXX XXXX</div>
 149 <div class="abs col1"></div>
 150 <div class="abs col2"></div>
 151 <div class="abs col3"></div>
 152</div>
 153
 154<div class="grid" style="grid-template: 20px / calc(60px + 25px/2) 5px calc(25px - 5px/2);">
 155 <div class="item" style="min-width: 55px;">XXXX XXXX</div>
 156 <div class="abs col1"></div>
 157 <div class="abs col2"></div>
 158 <div class="abs col3"></div>
 159</div>
 160
 161<div class="grid" style="grid-template: 20px / 90px 5px 5px;">
 162 <div class="item min-width-max-content">XXXX XXXX</div>
 163 <div class="abs col1"></div>
 164 <div class="abs col2"></div>
 165 <div class="abs col3"></div>
 166</div>
 167
 168</div>

LayoutTests/fast/css-grid-layout/grid-intrinsic-maximums.html

 1<!DOCTYPE html>
 2
 3<link href="resources/grid.css" rel="stylesheet">
 4<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 5
 6<style>
 7
 8.item {
 9 font: 10px/1 Ahem;
 10 background: cyan;
 11 grid-column: 1 / -1;
 12}
 13
 14.abs {
 15 width: 100%;
 16 height: 5px;
 17 position: absolute;
 18}
 19
 20.grid {
 21 border: 2px solid black;
 22 display: grid;
 23 position: relative;
 24 padding-top: 10px;
 25 margin-bottom: 10px;
 26 width: 100px;
 27 justify-items: start;
 28}
 29
 30.float {
 31 float: left;
 32 width: 200px;
 33}
 34
 35.col1 { grid-column: 1 / 2; background: orange; }
 36.col2 { grid-column: 2 / 3; background: indigo; }
 37.col3 { grid-column: 3 / 4; background: green; }
 38
 39.gridMinContent { grid-template: 20px / minmax(0px, -webkit-min-content) 5px; }
 40.gridMaxContent { grid-template: 20px / 5px minmax(0px, -webkit-max-content); }
 41.gridMinMaxContent { grid-template: 20px / minmax(0px, -webkit-min-content) 5% minmax(0px, -webkit-max-content); }
 42.gridAutoMinContent { grid-template: 20px / minmax(0px, auto) 5px minmax(0px, -webkit-min-content); }
 43.gridFitContentAuto { grid-template: 20px / fit-content(100px) 5px minmax(0px, auto); }
 44
 45</style>
 46
 47<div class="float">
 48
 49<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 -->
 50<!--
 51<div class="grid gridMinContent">
 52 <div class="item" style="min-width: 15px;">XXXX XXXX</div>
 53 <div class="abs col1"></div>
 54 <div class="abs col2"></div>
 55</div>
 56-->
 57
 58<div class="grid gridMinContent">
 59 <div class="item" style="min-width: 55px;">XXXX XXXX</div>
 60 <div class="abs col1"></div>
 61 <div class="abs col2"></div>
 62</div>
 63
 64<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 -->
 65<!--
 66<div class="grid gridMinContent">
 67 <div class="item min-width-max-content">XXXX XXXX</div>
 68 <div class="abs col1"></div>
 69 <div class="abs col2"></div>
 70</div>
 71-->
 72
 73<div class="grid gridMaxContent">
 74 <div class="item" style="min-width: 15px;">XXXX XXXX</div>
 75 <div class="abs col1"></div>
 76 <div class="abs col2"></div>
 77</div>
 78
 79<div class="grid gridMaxContent">
 80 <div class="item" style="min-width: 55px;">XXXX XXXX</div>
 81 <div class="abs col1"></div>
 82 <div class="abs col2"></div>
 83</div>
 84
 85<div class="grid gridMaxContent">
 86 <div class="item min-width-max-content">XXXX XXXX</div>
 87 <div class="abs col1"></div>
 88 <div class="abs col2"></div>
 89</div>
 90
 91</div>
 92
 93<div class="float">
 94
 95<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 -->
 96<!--
 97<div class="grid gridMinMaxContent">
 98 <div class="item" style="min-width: 15px;">XXXX XXXX</div>
 99 <div class="abs col1"></div>
 100 <div class="abs col2"></div>
 101 <div class="abs col3"></div>
 102</div>
 103-->
 104
 105<div class="grid gridMinMaxContent">
 106 <div class="item" style="min-width: 55px;">XXXX XXXX</div>
 107 <div class="abs col1"></div>
 108 <div class="abs col2"></div>
 109 <div class="abs col3"></div>
 110</div>
 111
 112<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 -->
 113<!--
 114<div class="grid gridMinMaxContent">
 115 <div class="item min-width-max-content">XXXX XXXX</div>
 116 <div class="abs col1"></div>
 117 <div class="abs col2"></div>
 118 <div class="abs col3"></div>
 119</div>
 120
 121<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 -->
 122<!--
 123<div class="grid gridAutoMinContent">
 124 <div class="item" style="min-width: 15px;">XXXX XXXX</div>
 125 <div class="abs col1"></div>
 126 <div class="abs col2"></div>
 127 <div class="abs col3"></div>
 128</div>
 129-->
 130
 131<div class="grid gridAutoMinContent">
 132 <div class="item" style="min-width: 55px;">XXXX XXXX</div>
 133 <div class="abs col1"></div>
 134 <div class="abs col2"></div>
 135 <div class="abs col3"></div>
 136</div>
 137
 138<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=654737 -->
 139<!--
 140<div class="grid gridAutoMinContent" style="justify-items: start">
 141 <div class="item min-width-max-content">XXXX XXXX</div>
 142 <div class="abs col1"></div>
 143 <div class="abs col2"></div>
 144 <div class="abs col3"></div>
 145</div>
 146-->
 147
 148</div>
 149
 150<div class="float">
 151
 152<div class="grid gridFitContentAuto">
 153 <div class="item" style="min-width: 15px;">XXXX XXXX</div>
 154 <div class="abs col1"></div>
 155 <div class="abs col2"></div>
 156 <div class="abs col3"></div>
 157</div>
 158
 159<div class="grid gridFitContentAuto">
 160 <div class="item" style="min-width: 55px;">XXXX XXXX</div>
 161 <div class="abs col1"></div>
 162 <div class="abs col2"></div>
 163 <div class="abs col3"></div>
 164</div>
 165
 166<div class="grid gridFitContentAuto">
 167 <div class="item min-width-max-content">XXXX XXXX</div>
 168 <div class="abs col1"></div>
 169 <div class="abs col2"></div>
 170 <div class="abs col3"></div>
 171</div>
 172
 173</div>

Source/WebCore/ChangeLog

 12016-10-11 Sergio Villar Senin <svillar@igalia.com>
 2
 3 [css-grid] Fix intrinsic maximums resolution with fit-content and auto
 4 https://bugs.webkit.org/show_bug.cgi?id=163282
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 The step 2.5 in section 12.5 https://drafts.csswg.org/css-grid/#algo-content of the specs,
 9 details how to sizes tracks with intrinsic max track sizing functions.
 10
 11 Not so long ago there were only two max track sizing functions min-content and max-content
 12 (auto was always resolved to max-content). However there were some recent changes that force
 13 us to consider 2 new values: auto (which is not internally translated to max-content
 14 although it still works the same) and specially the newly added fit-content.
 15
 16 Some of the new test cases are commented due to bug http://wkb.ug/163283.
 17
 18 Test: fast/css-grid-layout/grid-intrinsic-maximums.html
 19
 20 * rendering/RenderGrid.cpp:
 21 (WebCore::RenderGrid::shouldProcessTrackForTrackSizeComputationPhase):
 22 * rendering/style/GridTrackSize.h:
 23 (WebCore::GridTrackSize::cacheMinMaxTrackBreadthTypes):
 24 (WebCore::GridTrackSize::hasIntrinsicMinTrackBreadth):
 25 (WebCore::GridTrackSize::hasIntrinsicMaxTrackBreadth):
 26 (WebCore::GridTrackSize::hasAutoOrMinContentMinTrackBreadthAndIntrinsicMaxTrackBreadth):
 27
1282016-10-11 Per Arne Vollan <pvollan@apple.com>
229
330 [Win] Compile fix.

Source/WebCore/rendering/RenderGrid.cpp

@@bool RenderGrid::shouldProcessTrackForTrackSizeComputationPhase(TrackSizeComputa
12121212 case ResolveMaxContentMinimums:
12131213 return trackSize.hasMaxContentMinTrackBreadth();
12141214 case ResolveIntrinsicMaximums:
1215  return trackSize.hasMinOrMaxContentMaxTrackBreadth();
 1215 return trackSize.hasIntrinsicMaxTrackBreadth();
12161216 case ResolveMaxContentMaximums:
12171217 return trackSize.hasMaxContentOrAutoMaxTrackBreadth();
12181218 case MaximizeTracks:

Source/WebCore/rendering/style/GridTrackSize.h

@@public:
104104 m_maxTrackBreadthIsMaxContent = maxTrackBreadth().isLength() && maxTrackBreadth().length().isMaxContent();
105105 m_maxTrackBreadthIsMinContent = maxTrackBreadth().isLength() && maxTrackBreadth().length().isMinContent();
106106 m_maxTrackBreadthIsAuto = maxTrackBreadth().isLength() && maxTrackBreadth().length().isAuto();
 107
 108 // This values depend on the above ones so keep them here.
 109 m_minTrackBreadthIsIntrinsic = m_minTrackBreadthIsMaxContent || m_minTrackBreadthIsMinContent
 110 || m_minTrackBreadthIsAuto || isFitContent();
 111 m_maxTrackBreadthIsIntrinsic = m_maxTrackBreadthIsMaxContent || m_maxTrackBreadthIsMinContent
 112 || m_maxTrackBreadthIsAuto || isFitContent();
107113 }
108114
109  bool hasIntrinsicMinTrackBreadth() const { return m_minTrackBreadthIsMaxContent || m_minTrackBreadthIsMinContent || m_minTrackBreadthIsAuto; }
 115 bool hasIntrinsicMinTrackBreadth() const { return m_minTrackBreadthIsIntrinsic; }
 116 bool hasIntrinsicMaxTrackBreadth() const { return m_maxTrackBreadthIsIntrinsic; }
110117 bool hasMinOrMaxContentMinTrackBreadth() const { return m_minTrackBreadthIsMaxContent || m_minTrackBreadthIsMinContent; }
111118 bool hasAutoMinTrackBreadth() const { return m_minTrackBreadthIsAuto; }
112119 bool hasAutoMaxTrackBreadth() const { return m_maxTrackBreadthIsAuto; }

@@public:
117124 bool hasMaxContentMinTrackBreadth() const { return m_minTrackBreadthIsMaxContent; }
118125 bool hasMinContentMinTrackBreadth() const { return m_minTrackBreadthIsMinContent; }
119126 bool hasMaxContentMinTrackBreadthAndMaxContentMaxTrackBreadth() const { return m_minTrackBreadthIsMaxContent && m_maxTrackBreadthIsMaxContent; }
120  bool hasAutoOrMinContentMinTrackBreadthAndIntrinsicMaxTrackBreadth() const { return (m_minTrackBreadthIsMinContent || m_minTrackBreadthIsAuto) && (m_maxTrackBreadthIsAuto || hasMinOrMaxContentMaxTrackBreadth()); }
 127 bool hasAutoOrMinContentMinTrackBreadthAndIntrinsicMaxTrackBreadth() const { return (m_minTrackBreadthIsMinContent || m_minTrackBreadthIsAuto) && m_maxTrackBreadthIsIntrinsic; }
121128
122129private:
123130 GridTrackSizeType m_type;

@@private:
131138 bool m_minTrackBreadthIsMinContent : 1;
132139 bool m_maxTrackBreadthIsMaxContent : 1;
133140 bool m_maxTrackBreadthIsMinContent : 1;
 141 bool m_minTrackBreadthIsIntrinsic : 1;
 142 bool m_maxTrackBreadthIsIntrinsic : 1;
134143};
135144
136145} // namespace WebCore