Changeset 219315 in webkit
- Timestamp:
- Jul 10, 2017 4:56:21 PM (7 years ago)
- Location:
- trunk
- Files:
-
- 31 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r219313 r219315 1 2017-07-10 Javier Fernandez <jfernandez@igalia.com> 2 3 [css-align][css-flex][css-grid] 'auto' values of align-self and justify-self must not be resolved 4 https://bugs.webkit.org/show_bug.cgi?id=172707 5 6 Reviewed by Antti Koivisto. 7 8 Updated layout tests so that resolved value is as specified, even for 'auto' values. 9 10 * TestExpectations: 11 * css3/flexbox/css-properties-expected.txt: 12 * css3/flexbox/css-properties.html: 13 * css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled-expected.txt: 14 * css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled.html: 15 * css3/parse-align-self.html: 16 * css3/parse-alignment-of-root-elements-expected.txt: 17 * css3/parse-alignment-of-root-elements.html: 18 * css3/parse-place-items.html: 19 * css3/parse-place-self.html: 20 * fast/css/ensure-flexbox-compatibility-with-initial-values-expected.txt: 21 * fast/css/parse-justify-self.html: 22 1 23 2017-07-10 Myles C. Maxfield <mmaxfield@apple.com> 2 24 -
trunk/LayoutTests/TestExpectations
r219311 r219315 296 296 imported/w3c/web-platform-tests/IndexedDB/bindings-inject-key.html [ Pass Failure ] 297 297 imported/w3c/web-platform-tests/fetch/dangling-markup-mitigation.tentative.html [ Pass Failure ] 298 299 # css alignment tests 300 webkit.org/b/172711 css3/parse-alignment-of-root-elements.html [ Failure ] 298 301 299 302 # selectors4 -
trunk/LayoutTests/css3/flexbox/css-properties-expected.txt
r216536 r219315 32 32 PASS window.getComputedStyle(flexbox, null).justifyContent is "normal" 33 33 PASS flexbox.style.alignSelf is "" 34 PASS window.getComputedStyle(flexbox, null).alignSelf is " normal"35 PASS window.getComputedStyle(document.documentElement, null).alignSelf is " normal"34 PASS window.getComputedStyle(flexbox, null).alignSelf is "auto" 35 PASS window.getComputedStyle(document.documentElement, null).alignSelf is "auto" 36 36 PASS flexbox.style.alignSelf is "" 37 PASS window.getComputedStyle(flexbox, null).alignSelf is " normal"37 PASS window.getComputedStyle(flexbox, null).alignSelf is "auto" 38 38 PASS flexbox.style.alignSelf is "auto" 39 PASS window.getComputedStyle(flexbox, null).alignSelf is " normal"39 PASS window.getComputedStyle(flexbox, null).alignSelf is "auto" 40 40 PASS flexbox.style.alignSelf is "flex-start" 41 41 PASS window.getComputedStyle(flexbox, null).alignSelf is "flex-start" … … 49 49 PASS window.getComputedStyle(flexbox, null).alignSelf is "baseline" 50 50 PASS flexbox.style.alignSelf is "" 51 PASS window.getComputedStyle(flexbox, null).alignSelf is " normal"52 PASS flexbox.style.alignItems is "" 53 PASS flexitem.style.alignSelf is "" 54 PASS window.getComputedStyle(flexbox, null).alignItems is "normal" 55 PASS window.getComputedStyle(flexitem, null).alignSelf is " normal"56 PASS flexbox.style.alignItems is "" 57 PASS flexitem.style.alignSelf is "" 58 PASS window.getComputedStyle(flexbox, null).alignItems is "normal" 59 PASS window.getComputedStyle(flexitem, null).alignSelf is " normal"60 PASS flexbox.style.alignItems is "" 61 PASS flexitem.style.alignSelf is "" 62 PASS window.getComputedStyle(flexbox, null).alignItems is "normal" 63 PASS window.getComputedStyle(flexitem, null).alignSelf is " normal"51 PASS window.getComputedStyle(flexbox, null).alignSelf is "auto" 52 PASS flexbox.style.alignItems is "" 53 PASS flexitem.style.alignSelf is "" 54 PASS window.getComputedStyle(flexbox, null).alignItems is "normal" 55 PASS window.getComputedStyle(flexitem, null).alignSelf is "auto" 56 PASS flexbox.style.alignItems is "" 57 PASS flexitem.style.alignSelf is "" 58 PASS window.getComputedStyle(flexbox, null).alignItems is "normal" 59 PASS window.getComputedStyle(flexitem, null).alignSelf is "auto" 60 PASS flexbox.style.alignItems is "" 61 PASS flexitem.style.alignSelf is "" 62 PASS window.getComputedStyle(flexbox, null).alignItems is "normal" 63 PASS window.getComputedStyle(flexitem, null).alignSelf is "auto" 64 64 PASS flexbox.style.alignItems is "flex-start" 65 65 PASS flexitem.style.alignSelf is "" 66 66 PASS window.getComputedStyle(flexbox, null).alignItems is "flex-start" 67 PASS window.getComputedStyle(flexitem, null).alignSelf is " flex-start"67 PASS window.getComputedStyle(flexitem, null).alignSelf is "auto" 68 68 PASS flexbox.style.alignItems is "flex-end" 69 69 PASS window.getComputedStyle(flexbox, null).alignItems is "flex-end" 70 PASS window.getComputedStyle(flexitem, null).alignSelf is " flex-end"70 PASS window.getComputedStyle(flexitem, null).alignSelf is "auto" 71 71 PASS flexbox.style.alignItems is "center" 72 72 PASS window.getComputedStyle(flexbox, null).alignItems is "center" 73 PASS window.getComputedStyle(flexitem, null).alignSelf is " center"73 PASS window.getComputedStyle(flexitem, null).alignSelf is "auto" 74 74 PASS flexbox.style.alignItems is "stretch" 75 75 PASS window.getComputedStyle(flexbox, null).alignItems is "stretch" 76 PASS window.getComputedStyle(flexitem, null).alignSelf is " stretch"76 PASS window.getComputedStyle(flexitem, null).alignSelf is "auto" 77 77 PASS flexbox.style.alignItems is "baseline" 78 78 PASS window.getComputedStyle(flexbox, null).alignItems is "baseline" 79 PASS window.getComputedStyle(flexitem, null).alignSelf is " baseline"80 PASS flexbox.style.alignItems is "" 81 PASS window.getComputedStyle(flexbox, null).alignItems is "normal" 82 PASS window.getComputedStyle(flexitem, null).alignSelf is " normal"83 PASS flexbox.style.alignItems is "" 84 PASS window.getComputedStyle(flexbox, null).alignItems is "normal" 85 PASS window.getComputedStyle(flexitem, null).alignSelf is " normal"79 PASS window.getComputedStyle(flexitem, null).alignSelf is "auto" 80 PASS flexbox.style.alignItems is "" 81 PASS window.getComputedStyle(flexbox, null).alignItems is "normal" 82 PASS window.getComputedStyle(flexitem, null).alignSelf is "auto" 83 PASS flexbox.style.alignItems is "" 84 PASS window.getComputedStyle(flexbox, null).alignItems is "normal" 85 PASS window.getComputedStyle(flexitem, null).alignSelf is "auto" 86 86 PASS window.getComputedStyle(detachedFlexbox, null).alignSelf is "" 87 87 PASS window.getComputedStyle(detachedFlexItem, null).alignSelf is "" -
trunk/LayoutTests/css3/flexbox/css-properties.html
r216536 r219315 85 85 86 86 shouldBeEqualToString('flexbox.style.alignSelf', ''); 87 // The initial value is 'auto' , which will be resolved depending on parent's style (except for the 'document' element).88 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', ' normal');89 shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).alignSelf', ' normal');87 // The initial value is 'auto'. 88 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto'); 89 shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).alignSelf', 'auto'); 90 90 91 91 flexbox.style.alignSelf = 'foo'; 92 92 shouldBeEqualToString('flexbox.style.alignSelf', ''); 93 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', ' normal');93 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto'); 94 94 95 95 flexbox.style.alignSelf = 'auto'; 96 96 shouldBeEqualToString('flexbox.style.alignSelf', 'auto'); 97 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', ' normal');97 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto'); 98 98 99 99 flexbox.style.alignSelf = 'flex-start'; … … 119 119 flexbox.style.alignSelf = ''; 120 120 shouldBeEqualToString('flexbox.style.alignSelf', ''); 121 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', ' normal');121 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto'); 122 122 123 123 shouldBeEqualToString('flexbox.style.alignItems', ''); 124 124 shouldBeEqualToString('flexitem.style.alignSelf', ''); 125 // The initial value is 'auto' , which will be resolved to 'normal' in case of flexbox containers.126 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal'); 127 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', ' normal');125 // The initial value is 'auto'. 126 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal'); 127 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto'); 128 128 129 129 flexbox.style.alignItems = 'foo'; … … 131 131 shouldBeEqualToString('flexitem.style.alignSelf', ''); 132 132 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal'); 133 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', ' normal');133 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto'); 134 134 135 135 // The 'auto' value is not valid for the align-items property. … … 138 138 shouldBeEqualToString('flexitem.style.alignSelf', ''); 139 139 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal'); 140 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', ' normal');140 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto'); 141 141 142 142 flexbox.style.alignItems = 'flex-start'; … … 144 144 shouldBeEqualToString('flexitem.style.alignSelf', ''); 145 145 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'flex-start'); 146 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', ' flex-start');146 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto'); 147 147 148 148 flexbox.style.alignItems = 'flex-end'; 149 149 shouldBeEqualToString('flexbox.style.alignItems', 'flex-end'); 150 150 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'flex-end'); 151 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', ' flex-end');151 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto'); 152 152 153 153 flexbox.style.alignItems = 'center'; 154 154 shouldBeEqualToString('flexbox.style.alignItems', 'center'); 155 155 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'center'); 156 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', ' center');156 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto'); 157 157 158 158 flexbox.style.alignItems = 'stretch'; 159 159 shouldBeEqualToString('flexbox.style.alignItems', 'stretch'); 160 160 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stretch'); 161 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', ' stretch');161 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto'); 162 162 163 163 flexbox.style.alignItems = 'baseline'; 164 164 shouldBeEqualToString('flexbox.style.alignItems', 'baseline'); 165 165 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'baseline'); 166 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', ' baseline');166 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto'); 167 167 168 168 flexbox.style.alignItems = ''; 169 169 shouldBeEqualToString('flexbox.style.alignItems', ''); 170 170 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal'); 171 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', ' normal');171 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto'); 172 172 173 173 flexbox.style.display = 'none'; 174 174 shouldBeEqualToString('flexbox.style.alignItems', ''); 175 175 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal'); 176 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', ' normal');176 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto'); 177 177 flexbox.style.display = 'flex'; 178 178 -
trunk/LayoutTests/css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled-expected.txt
r205102 r219315 1 1 Test to verify that the new alignment values are parsed as invalid if Grid Layout is disabled and in any case they do not cause a crash because assertions in flexbox layout code. 2 2 3 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".4 3 4 PASS New Self-Alignment values should be invalid when grid layout is DISABLED. 5 PASS New Default-Alignment values should be invalid when grid layout is DISABLED. 6 PASS Even when grid layout is ENABLED, new Self-Alignment values should not violate assertions in FlexibleBox layout logic.. 7 PASS Even when grid layout is ENABLED, new Default-Alignment values should not violate assertions in FlexibleBox layout logic.. 5 8 6 7 New alignment values should be invalid when grid layout is disabled8 9 Testing Self-Alignment values.10 PASS alignSelf is 'flex-start'11 PASS alignSelf is 'flex-start'12 PASS alignSelf is 'flex-start'13 PASS alignSelf is 'flex-start'14 PASS alignSelf is 'flex-start'15 PASS alignSelf is 'flex-start'16 17 Testing Default-Alignment values.18 PASS alignItems is 'flex-end'19 PASS alignSelf is 'flex-end'20 PASS alignItems is 'flex-end'21 PASS alignSelf is 'flex-end'22 PASS alignItems is 'flex-end'23 PASS alignSelf is 'flex-end'24 PASS alignItems is 'flex-end'25 PASS alignSelf is 'flex-end'26 PASS alignItems is 'flex-end'27 PASS alignSelf is 'flex-end'28 PASS alignItems is 'flex-end'29 PASS alignSelf is 'flex-end'30 31 Even when grid layout is enabled, new values should not violate assertions in FlexibleBox layout logic.32 33 Testing Self-Alignment values.34 PASS alignSelf is 'start unsafe'35 PASS alignSelf is 'start'36 PASS alignSelf is 'end'37 PASS alignSelf is 'flex-start safe'38 PASS alignSelf is 'self-start'39 PASS alignSelf is 'self-end'40 41 Testing Default-Alignment values.42 PASS alignItems is 'start unsafe'43 PASS alignSelf is 'start unsafe'44 PASS alignItems is 'start'45 PASS alignSelf is 'start'46 PASS alignItems is 'end'47 PASS alignSelf is 'end'48 PASS alignItems is 'flex-start safe'49 PASS alignSelf is 'flex-start safe'50 PASS alignItems is 'self-start'51 PASS alignSelf is 'self-start'52 PASS alignItems is 'self-end'53 PASS alignSelf is 'self-end'54 PASS successfullyParsed is true55 56 TEST COMPLETE57 -
trunk/LayoutTests/css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled.html
r211006 r219315 1 1 <!DOCTYPE html> 2 <div id="flexContainer" style="display: flex"> 3 <div id="flexItem"></div> 4 </div> 5 <script src="../../resources/js-test.js"></script> 2 <script src="../../resources/testharness.js"></script> 3 <script src="../../resources/testharnessreport.js"></script> 4 <script src="../resources/alignment-parsing-utils-th.js"></script> 5 <html> 6 <body> 7 <p>Test to verify that the new alignment values are parsed as invalid if Grid Layout is disabled and in any case they do not cause a crash because assertions in flexbox layout code.</p> 8 <div id="log"></div> 9 10 <div id="flexContainer" style="display: flex"> 11 <div id="flexItem"></div> 12 </div> 6 13 <script> 7 description('Test to verify that the new alignment values are parsed as invalid if Grid Layout is disabled and in any case they do not cause a crash because assertions in flexbox layout code.'); 14 15 var container = document.getElementById("flexContainer"); 16 var item = document.getElementById("flexItem"); 8 17 9 18 function checkAlignSelfValue(value, computedValue, gridEnabled) 10 19 { 11 20 item.style.webkitAlignSelf = value; 12 alignSelf = getComputedStyle(item, '').getPropertyValue('-webkit-align-self');13 21 if (gridEnabled) 14 shouldBe("alignSelf", computedValue);22 checkValues(item, "alignSelf", "align-self", value, computedValue); 15 23 else 16 shouldBe("alignSelf", "'flex-start'");24 checkValues(item, "alignSelf", "align-self", "flex-start", "flex-start"); 17 25 } 18 26 … … 20 28 { 21 29 container.style.webkitAlignItems = value; 22 alignItems = getComputedStyle(container, '').getPropertyValue('-webkit-align-items');23 alignSelf = getComputedStyle(item, '').getPropertyValue('-webkit-align-self');24 30 if (gridEnabled) { 25 shouldBe("alignItems", computedValue);26 shouldBe("alignSelf", computedValue);31 checkValues(container, "alignItems", "align-items", value, computedValue); 32 checkValues(item, "alignSelf", "align-self", "auto", "auto"); 27 33 } else { 28 shouldBe("alignItems", "'flex-end'");29 shouldBe("alignSelf", "'flex-end'");34 checkValues(container, "alignItems", "align-items", "flex-end", "flex-end"); 35 checkValues(item, "alignSelf", "align-self", "auto", "auto"); 30 36 } 31 37 } 32 38 33 function check AlignmentValues(gridEnabled)39 function checkSelfAlignmentValues(gridEnabled) 34 40 { 35 41 if (window.internals) 36 internals.settings.setCSSGridLayoutEnabled(gridEnabled) ;42 internals.settings.setCSSGridLayoutEnabled(gridEnabled) 37 43 38 debug('<br>Testing Self-Alignment values.'); 39 checkAlignSelfValue("start unsafe", "'start unsafe'", gridEnabled) 40 checkAlignSelfValue("start", "'start'", gridEnabled) 41 checkAlignSelfValue("end", "'end'", gridEnabled) 42 checkAlignSelfValue("flex-start safe", "'flex-start safe'", gridEnabled) 43 checkAlignSelfValue("self-start", "'self-start'", gridEnabled) 44 checkAlignSelfValue("self-end", "'self-end'", gridEnabled) 44 item.style.webkitAlignSelf = "flex-start"; 45 45 46 checkAlignSelfValue("start unsafe", "start unsafe", gridEnabled) 47 checkAlignSelfValue("start", "start", gridEnabled) 48 checkAlignSelfValue("end", "end", gridEnabled) 49 checkAlignSelfValue("flex-start safe", "flex-start safe", gridEnabled) 50 checkAlignSelfValue("self-start", "self-start", gridEnabled) 51 checkAlignSelfValue("self-end", "self-end", gridEnabled) 52 } 53 54 function checkDefaultAlignmentValues(gridEnabled) 55 { 56 if (window.internals) 57 internals.settings.setCSSGridLayoutEnabled(gridEnabled) 58 59 container.style.webkitAlignItems = "flex-end"; 46 60 item.style.webkitAlignSelf = "auto"; 47 61 48 debug('<br>Testing Default-Alignment values.'); 49 checkAlignItemsValue("start unsafe", "'start unsafe'", gridEnabled) 50 checkAlignItemsValue("start", "'start'", gridEnabled) 51 checkAlignItemsValue("end", "'end'", gridEnabled) 52 checkAlignItemsValue("flex-start safe", "'flex-start safe'", gridEnabled) 53 checkAlignItemsValue("self-start", "'self-start'", gridEnabled) 54 checkAlignItemsValue("self-end", "'self-end'", gridEnabled) 55 56 item.style.webkitAlignSelf = "flex-start"; 62 checkAlignItemsValue("start unsafe", "start unsafe", gridEnabled) 63 checkAlignItemsValue("start", "start", gridEnabled) 64 checkAlignItemsValue("end", "end", gridEnabled) 65 checkAlignItemsValue("flex-start safe", "flex-start safe", gridEnabled) 66 checkAlignItemsValue("self-start", "self-start", gridEnabled) 67 checkAlignItemsValue("self-end", "self-end", gridEnabled) 57 68 } 58 69 59 var container = document.getElementById("flexContainer"); 60 var item = document.getElementById("flexItem"); 70 test(function() { 71 checkSelfAlignmentValues(false); 72 }, "New Self-Alignment values should be invalid when grid layout is DISABLED."); 61 73 62 container.style.webkitAlignItems = "flex-end"; 63 item.style.webkitAlignSelf = "flex-start"; 64 var alignSelf = "flex-start"; 65 var alignItems = "flex-start"; 74 test(function() { 75 checkDefaultAlignmentValues(false); 76 }, "New Default-Alignment values should be invalid when grid layout is DISABLED."); 66 77 67 debug('<br>New alignment values should be invalid when grid layout is disabled'); 68 checkAlignmentValues(false); 78 test(function() { 79 checkSelfAlignmentValues(true); 80 }, "Even when grid layout is ENABLED, new Self-Alignment values should not violate assertions in FlexibleBox layout logic.."); 69 81 70 debug('<br>Even when grid layout is enabled, new values should not violate assertions in FlexibleBox layout logic.'); 71 checkAlignmentValues(true); 82 test(function() { 83 checkDefaultAlignmentValues(true); 84 }, "Even when grid layout is ENABLED, new Default-Alignment values should not violate assertions in FlexibleBox layout logic.."); 72 85 73 86 </script> 87 88 </body> 89 </html> -
trunk/LayoutTests/css3/parse-align-self.html
r214564 r219315 15 15 #alignSelfStretch { 16 16 align-self: stretch; 17 } 18 19 #alignSelfNormal { 20 align-self: normal; 17 21 } 18 22 … … 90 94 <div id="alignSelfLastBaseline"></div> 91 95 <div id="alignSelfStretch"></div> 96 <div id="alignSelfNormal"></div> 92 97 <div id="alignSelfStart"></div> 93 98 <div id="alignSelfEnd"></div> … … 121 126 var alignSelfStretch = document.getElementById("alignSelfStretch"); 122 127 checkValues(alignSelfStretch, "alignSelf", "align-self", "", "stretch"); 128 var alignSelfNormal = document.getElementById("alignSelfNormal"); 129 checkValues(alignSelfNormal, "alignSelf", "align-self", "", "normal"); 123 130 var alignSelfStart = document.getElementById("alignSelfStart"); 124 131 checkValues(alignSelfStart, "alignSelf", "align-self", "", "start"); … … 161 168 element = document.createElement("div"); 162 169 document.body.appendChild(element); 163 checkValues(element, "alignSelf", "align-self", "", " normal");170 checkValues(element, "alignSelf", "align-self", "", "auto"); 164 171 }, "Test initial value of align-self through JS"); 165 172 … … 187 194 checkValues(element, "alignSelf", "align-self", "self-start", "self-start"); 188 195 196 element.style.alignSelf = "normal"; 197 checkValues(element, "alignSelf", "align-self", "normal", "normal"); 198 189 199 element.style.alignSelf = "auto"; 190 checkValues(element, "alignSelf", "align-self", "auto", " normal");200 checkValues(element, "alignSelf", "align-self", "auto", "auto"); 191 201 192 202 container.style.display = "flex"; 193 203 element.style.alignSelf = "auto"; 194 checkValues(element, "alignSelf", "align-self", "auto", " normal");204 checkValues(element, "alignSelf", "align-self", "auto", "auto"); 195 205 196 206 container.style.display = "grid"; 197 207 element.style.alignSelf = "auto"; 198 checkValues(element, "alignSelf", "align-self", "auto", " normal");208 checkValues(element, "alignSelf", "align-self", "auto", "auto"); 199 209 200 210 element.style.alignSelf = "self-end"; … … 204 214 test(function() { 205 215 document.documentElement.style.alignSelf = "auto"; 206 checkValues(document.documentElement, "alignSelf", "align-self", "auto", " normal");216 checkValues(document.documentElement, "alignSelf", "align-self", "auto", "auto"); 207 217 }, "Test 'auto' value resolution for the root node"); 208 218 … … 215 225 checkBadValues(element, "alignSelf", "align-self", "auto safe"); 216 226 checkBadValues(element, "alignSelf", "align-self", "auto left"); 227 checkBadValues(element, "alignSelf", "align-self", "normal unsafe"); 228 checkBadValues(element, "alignSelf", "align-self", "normal stretch"); 229 checkBadValues(element, "alignSelf", "align-self", "baseline normal"); 217 230 checkBadValues(element, "alignSelf", "align-self", "baseline safe"); 218 231 checkBadValues(element, "alignSelf", "align-self", "baseline center"); … … 240 253 test(function() { 241 254 container.style.display = ""; 242 checkInitialValues(element, "alignSelf", "align-self", "center", " normal");255 checkInitialValues(element, "alignSelf", "align-self", "center", "auto"); 243 256 }, "Test the value 'initial'"); 244 257 245 258 test(function() { 246 259 container.style.display = "grid"; 247 checkInitialValues(element, "alignSelf", "align-self", "left safe", " normal");260 checkInitialValues(element, "alignSelf", "align-self", "left safe", "auto"); 248 261 }, "Test the value 'initial' for grid containers"); 249 262 250 263 test(function() { 251 264 container.style.display = "flex"; 252 checkInitialValues(element, "alignSelf", "align-self", "right unsafe", " normal");265 checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "auto"); 253 266 }, "Test the value 'initial' for flex containers"); 254 267 … … 256 269 container.style.display = ""; 257 270 element.style.position = "absolute"; 258 checkInitialValues(element, "alignSelf", "align-self", "left", " normal");271 checkInitialValues(element, "alignSelf", "align-self", "left", "auto"); 259 272 }, "Test the value 'initial' for positioned elements"); 260 273 … … 262 275 container.style.display = "grid"; 263 276 element.style.position = "absolute"; 264 checkInitialValues(element, "alignSelf", "align-self", "right", " normal");277 checkInitialValues(element, "alignSelf", "align-self", "right", "auto"); 265 278 }, "Test the value 'initial' for positioned elements in grid containers"); 266 279 … … 268 281 container.style.display = "flex"; 269 282 element.style.position = "absolute"; 270 checkInitialValues(element, "alignSelf", "align-self", "end", " normal");283 checkInitialValues(element, "alignSelf", "align-self", "end", "auto"); 271 284 }, "Test the value 'initial' for positioned elements in grid containers"); 272 285 -
trunk/LayoutTests/css3/parse-alignment-of-root-elements-expected.txt
r201498 r219315 1 Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside<slot>) 2 3 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE". 1 CONSOLE MESSAGE: line 17: 2 CONSOLE MESSAGE: line 18: *** Test 'auto' value resolution for the document root node. *** 3 CONSOLE MESSAGE: line 96: 4 CONSOLE MESSAGE: line 97: *** Test 'auto' value resolution for the shadow DOM root node. *** 5 CONSOLE MESSAGE: line 104: 6 CONSOLE MESSAGE: line 149: 7 CONSOLE MESSAGE: line 150: *** Test 'auto' value resolution for the shadow DOM 'slotted' elements. *** 8 Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside slot) 4 9 5 10 11 PASS Check out how the DOM's root element resolves the align-self 'auto' values. 12 PASS Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values. 13 PASS Check out how the DOM's root element deals with 'auto' value in align-items. 14 PASS Check out how the DOM's root element resolves the justify-self 'auto' values. 15 PASS Check out how the DOM's root element justify-items's value is used to resolve its children's justify-self 'auto' values. 16 PASS Check out how the DOM's root element deals with 'auto' value in justify-items. 17 PASS Check out how the DOM's root element justify-items's value with 'legacy' keyword is used to resolve any descendant's justify-items 'auto' values. 18 PASS Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value. 19 PASS Shadow Node inherits from ShadowHost to resolve the 'auto' values for align-self. 20 PASS Shadow Node inherits from ShadowHost to resolve the 'auto' values for justify-self. 21 PASS Check out how the 'legacy' keyword in justify-items propagates from the DOM Tree to the Shadow Node. 22 PASS Check out how align-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned. 23 PASS Check out how justify-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned. 24 PASS Check out how the 'legacy' keyword in justify-items affects the 'slotted' elements while 'slot' is not assigned. 25 PASS Check out how align-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned. 26 PASS Check out how justify-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned. 27 PASS Check out how the 'legacy' keyword affects the 'slotted' elements after the 'slot' is assigned. 28 PASS The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the align-self 'auto' values because Blink does not support slots in the flat tree. 29 PASS The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the justify-self 'auto' values because Blink does not support slots in the flat tree. 6 30 7 *** Test 'auto' value resolution for the document root node. ***8 9 Check out how the DOM's root element resolves the align-self 'auto' values.10 PASS element.style.webkitAlignSelf is "center"11 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"12 PASS element.style.webkitAlignSelf is "auto"13 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"14 15 Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.16 PASS element.style.webkitAlignItems is "center"17 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"18 PASS element.style.webkitAlignItems is ""19 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"20 PASS element.style.webkitAlignSelf is "auto"21 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"22 PASS element.style.webkitAlignItems is ""23 PASS window.getComputedStyle(host, '').getPropertyValue('-webkit-align-items') is "normal"24 PASS element.style.webkitAlignSelf is "auto"25 PASS window.getComputedStyle(host, '').getPropertyValue('-webkit-align-self') is "normal"26 27 Check out how the DOM's root element deals with 'auto' value in align-items.28 PASS element.style.webkitAlignItems is "center"29 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"30 PASS element.style.webkitAlignItems is ""31 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"32 33 Check out how the DOM's root element resolves the justify-self 'auto' values.34 PASS element.style.justifySelf is "left"35 PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left"36 PASS element.style.justifySelf is "auto"37 PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"38 39 Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.40 PASS element.style.justifyItems is "center"41 PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "center"42 PASS element.style.justifyItems is "auto"43 PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"44 PASS element.style.justifySelf is "auto"45 PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"46 PASS element.style.justifyItems is "auto"47 PASS window.getComputedStyle(host, '').getPropertyValue('justify-items') is "normal"48 PASS element.style.justifySelf is "auto"49 PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "normal"50 51 Check out how the DOM's root element deals with 'auto' value in justify-items.52 PASS element.style.justifyItems is "auto"53 PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"54 PASS element.style.justifySelf is "auto"55 PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"56 PASS element.style.justifySelf is "auto"57 PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "normal"58 59 Check out how the DOM's root element justify-items's value with 'legacy' keyword is used to resolve any descendant's justify-items 'auto' values.60 PASS element.style.justifyItems is "legacy center"61 PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"62 PASS element.style.justifyItems is "auto"63 PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"64 PASS element.style.justifySelf is "auto"65 PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"66 PASS element.style.justifyItems is "auto"67 PASS window.getComputedStyle(host, '').getPropertyValue('justify-items') is "legacy center"68 PASS element.style.justifySelf is "auto"69 PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "center"70 71 Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value.72 PASS element.style.justifyItems is "auto"73 PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"74 PASS element.style.justifySelf is "auto"75 PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"76 PASS element.style.justifyItems is "auto"77 PASS window.getComputedStyle(host, '').getPropertyValue('justify-items') is "normal"78 PASS element.style.justifySelf is "auto"79 PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "normal"80 PASS successfullyParsed is true81 82 TEST COMPLETE83 -
trunk/LayoutTests/css3/parse-alignment-of-root-elements.html
r201498 r219315 1 1 <!DOCTYPE html> 2 <script src="../resources/js-test.js"></script> 2 <script src="../resources/testharness.js"></script> 3 <script src="../resources/testharnessreport.js"></script> 4 <script src="resources/alignment-parsing-utils-th.js"></script> 3 5 <html> 4 6 <body> 7 <p>Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside slot)</p> 8 <div id="log"></div> 9 5 10 <div id="host"> 6 11 <div id="slotted" slot="s1"></div> 7 12 </div> 8 <script src="resources/alignment-parsing-utils.js"></script>9 13 <script> 10 description('Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside<slot>)');11 14 12 15 var block = document.getElementById("host"); 13 16 14 debug(""); 15 debug("*** Test 'auto' value resolution for the document root node. ***"); 16 17 debug(""); 18 debug("Check out how the DOM's root element resolves the align-self 'auto' values."); 19 document.documentElement.style.webkitAlignSelf = "center"; 20 checkValues(document.documentElement, "webkitAlignSelf", "-webkit-align-self", "center", "center"); 21 document.documentElement.style.webkitAlignSelf = "auto"; 22 checkValues(document.documentElement, "webkitAlignSelf", "-webkit-align-self", "auto", "normal"); 23 24 debug(""); 25 debug("Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values."); 26 document.documentElement.style.webkitAlignItems = "center"; 27 checkValues(document.documentElement, "webkitAlignItems", "-webkit-align-items", "center", "center"); 28 document.body.style.webkitAlignItems = "auto"; // The 'auto' value is not valid for align-items. 29 document.body.style.webkitAlignSelf = "auto"; 30 checkValues(document.body, "webkitAlignItems", "-webkit-align-items", "", "normal"); 31 checkValues(document.body, "webkitAlignSelf", "-webkit-align-self", "auto", "center"); 32 block.style.webkitAlignItems = ""; // Default value is 'normal' for align-items. 33 block.style.webkitAlignSelf = "auto"; 34 checkValues(block, "webkitAlignItems", "-webkit-align-items", "", "normal"); 35 checkValues(block, "webkitAlignSelf", "-webkit-align-self", "auto", "normal"); 36 37 debug(""); 38 debug("Check out how the DOM's root element deals with 'auto' value in align-items."); 39 document.documentElement.style.webkitAlignItems = "auto"; // The 'auto' value is not valid for align-items. 40 checkValues(document.documentElement, "webkitAlignItems", "-webkit-align-items", "center", "center"); 41 document.documentElement.style.webkitAlignItems = ""; // Default value is 'normal' for align-items. 42 checkValues(document.documentElement, "webkitAlignItems", "-webkit-align-items", "", "normal"); 43 44 debug(""); 45 debug("Check out how the DOM's root element resolves the justify-self 'auto' values."); 46 document.documentElement.style.justifySelf = "left"; 47 checkValues(document.documentElement, "justifySelf", "justify-self", "left", "left"); 48 document.documentElement.style.justifySelf = "auto"; 49 checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "normal"); 50 51 debug(""); 52 debug("Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values."); 53 document.documentElement.style.justifyItems = "center"; 54 checkValues(document.documentElement, "justifyItems", "justify-items", "center", "center"); 55 document.body.style.justifyItems = "auto"; 56 document.body.style.justifySelf = "auto"; 57 checkValues(document.body, "justifyItems", "justify-items", "auto", "normal"); 58 checkValues(document.body, "justifySelf", "justify-self", "auto", "center"); 59 block.style.justifyItems = "auto"; 60 block.style.justifySelf = "auto"; 61 checkValues(block, "justifyItems", "justify-items", "auto", "normal"); 62 checkValues(block, "justifySelf", "justify-self", "auto", "normal"); 63 64 debug(""); 65 debug("Check out how the DOM's root element deals with 'auto' value in justify-items."); 66 document.documentElement.style.justifyItems = "auto"; 67 checkValues(document.documentElement, "justifyItems", "justify-items", "auto", "normal"); 68 checkValues(document.body, "justifySelf", "justify-self", "auto", "normal"); 69 checkValues(block, "justifySelf", "justify-self", "auto", "normal"); 70 71 debug(""); 72 debug("Check out how the DOM's root element justify-items's value with 'legacy' keyword is used to resolve any descendant's justify-items 'auto' values."); 73 document.documentElement.style.justifyItems = "legacy center"; 74 checkValues(document.documentElement, "justifyItems", "justify-items", "legacy center", "legacy center"); 75 document.body.style.justifyItems = "auto"; 76 document.body.style.justifySelf = "auto"; 77 checkValues(document.body, "justifyItems", "justify-items", "auto", "legacy center"); 78 checkValues(document.body, "justifySelf", "justify-self", "auto", "center"); 79 block.style.justifyItems = "auto"; 80 block.style.justifySelf = "auto"; 81 checkValues(block, "justifyItems", "justify-items", "auto", "legacy center"); 82 checkValues(block, "justifySelf", "justify-self", "auto", "center"); 83 84 debug(""); 85 debug("Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value."); 86 document.documentElement.style.justifyItems = "auto"; 87 checkValues(document.body, "justifyItems", "justify-items", "auto", "normal"); 88 checkValues(document.body, "justifySelf", "justify-self", "auto", "normal"); 89 checkValues(block, "justifyItems", "justify-items", "auto", "normal"); 90 checkValues(block, "justifySelf", "justify-self", "auto", "normal"); 17 console.log(""); 18 console.log("*** Test 'auto' value resolution for the document root node. ***"); 19 20 test(function() { 21 document.documentElement.style.alignSelf = "center"; 22 checkValues(document.documentElement, "alignSelf", "align-self", "center", "center"); 23 document.documentElement.style.alignSelf = "auto"; 24 checkValues(document.documentElement, "alignSelf", "align-self", "auto", "auto"); 25 }, "Check out how the DOM's root element resolves the align-self 'auto' values."); 26 27 test(function() { 28 document.documentElement.style.alignItems = "center"; 29 checkValues(document.documentElement, "alignItems", "align-items", "center", "center"); 30 document.body.style.alignItems = "auto"; // The 'auto' value is not valid for align-items. 31 document.body.style.alignSelf = "auto"; 32 checkValues(document.body, "alignItems", "align-items", "", "normal"); 33 checkValues(document.body, "alignSelf", "align-self", "auto", "auto"); 34 block.style.alignItems = ""; // Default value is 'normal' for align-items. 35 block.style.alignSelf = "auto"; 36 checkValues(block, "alignItems", "align-items", "", "normal"); 37 checkValues(block, "alignSelf", "align-self", "auto", "auto"); 38 }, "Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values."); 39 40 test(function() { 41 document.documentElement.style.alignItems = "auto"; // The 'auto' value is not valid for align-items. 42 checkValues(document.documentElement, "alignItems", "align-items", "center", "center"); 43 document.documentElement.style.alignItems = ""; // Default value is 'normal' for align-items. 44 checkValues(document.documentElement, "alignItems", "align-items", "", "normal"); 45 }, "Check out how the DOM's root element deals with 'auto' value in align-items."); 46 47 test(function() { 48 document.documentElement.style.justifySelf = "left"; 49 checkValues(document.documentElement, "justifySelf", "justify-self", "left", "left"); 50 document.documentElement.style.justifySelf = "auto"; 51 checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "auto"); 52 }, "Check out how the DOM's root element resolves the justify-self 'auto' values."); 53 54 test(function() { 55 console.log(); 56 document.documentElement.style.justifyItems = "center"; 57 checkValues(document.documentElement, "justifyItems", "justify-items", "center", "center"); 58 document.body.style.justifyItems = "auto"; 59 document.body.style.justifySelf = "auto"; 60 checkValues(document.body, "justifyItems", "justify-items", "auto", "normal"); 61 checkValues(document.body, "justifySelf", "justify-self", "auto", "auto"); 62 block.style.justifyItems = "auto"; 63 block.style.justifySelf = "auto"; 64 checkValues(block, "justifyItems", "justify-items", "auto", "normal"); 65 checkValues(block, "justifySelf", "justify-self", "auto", "auto"); 66 }, "Check out how the DOM's root element justify-items's value is used to resolve its children's justify-self 'auto' values."); 67 68 test(function() { 69 document.documentElement.style.justifyItems = "auto"; 70 checkValues(document.documentElement, "justifyItems", "justify-items", "auto", "normal"); 71 checkValues(document.body, "justifySelf", "justify-self", "auto", "auto"); 72 checkValues(block, "justifySelf", "justify-self", "auto", "auto"); 73 }, "Check out how the DOM's root element deals with 'auto' value in justify-items."); 74 75 test(function() { 76 document.documentElement.style.justifyItems = "legacy center"; 77 checkValues(document.documentElement, "justifyItems", "justify-items", "legacy center", "legacy center"); 78 document.body.style.justifyItems = "auto"; 79 document.body.style.justifySelf = "auto"; 80 checkValues(document.body, "justifyItems", "justify-items", "auto", "legacy center"); 81 checkValues(document.body, "justifySelf", "justify-self", "auto", "auto"); 82 block.style.justifyItems = "auto"; 83 block.style.justifySelf = "auto"; 84 checkValues(block, "justifyItems", "justify-items", "auto", "legacy center"); 85 checkValues(block, "justifySelf", "justify-self", "auto", "auto"); 86 }, "Check out how the DOM's root element justify-items's value with 'legacy' keyword is used to resolve any descendant's justify-items 'auto' values."); 87 88 test(function() { 89 document.documentElement.style.justifyItems = "auto"; 90 checkValues(document.body, "justifyItems", "justify-items", "auto", "normal"); 91 checkValues(document.body, "justifySelf", "justify-self", "auto", "auto"); 92 checkValues(block, "justifyItems", "justify-items", "auto", "normal"); 93 checkValues(block, "justifySelf", "justify-self", "auto", "auto"); 94 }, "Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value."); 95 96 console.log(""); 97 console.log("*** Test 'auto' value resolution for the shadow DOM root node. ***"); 98 99 var shadowHost = document.getElementById("host") 100 var shadowRoot = shadowHost.attachShadow({mode:"open"}); 101 var shadowNode = document.createElement('div'); 102 shadowRoot.appendChild(shadowNode); 103 104 console.log(""); 105 console.log(); 106 107 test(function() { 108 shadowHost.style.alignItems = "center"; 109 shadowNode.style.alignItems = "right"; 110 checkValues(shadowHost, "alignItems", "align-items", "center", "center"); 111 checkValues(shadowNode, "alignItems", "align-items", "right", "right"); 112 shadowNode.style.alignItems = ""; 113 checkValues(shadowNode, "alignItems", "align-items", "", "normal"); 114 shadowNode.style.alignSelf = "auto"; 115 checkValues(shadowNode, "alignSelf", "align-self", "auto", "auto"); 116 }, "Shadow Node inherits from ShadowHost to resolve the 'auto' values for align-self."); 117 118 test(function() { 119 shadowHost.style.justifyItems = "center"; 120 shadowNode.style.justifyItems = "right"; 121 checkValues(shadowHost, "justifyItems", "justify-items", "center", "center"); 122 checkValues(shadowNode, "justifyItems", "justify-items", "right", "right"); 123 shadowNode.style.justifyItems = ""; 124 checkValues(shadowNode, "justifyItems", "justify-items", "", "normal"); 125 shadowNode.style.justifySelf = "auto"; 126 checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto"); 127 }, "Shadow Node inherits from ShadowHost to resolve the 'auto' values for justify-self."); 128 129 test(function() { 130 shadowHost.style.justifyItems = "auto"; 131 shadowNode.style.justifyItems = "right"; 132 shadowNode.style.justifySelf = "auto"; 133 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal"); 134 checkValues(shadowNode, "justifyItems", "justify-items", "right", "right"); 135 checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto"); 136 137 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal"); 138 document.documentElement.style.justifyItems = "legacy center"; 139 checkValues(document.documentElement, "justifyItems", "justify-items", "legacy center", "legacy center"); 140 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "legacy center"); 141 checkValues(shadowNode, "justifyItems", "justify-items", "right", "right"); 142 checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto"); 143 shadowNode.style.justifyItems = "auto"; 144 checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy center"); 145 document.documentElement.style.justifyItems = "auto"; 146 }, "Check out how the 'legacy' keyword in justify-items propagates from the DOM Tree to the Shadow Node."); 147 148 149 console.log(""); 150 console.log("*** Test 'auto' value resolution for the shadow DOM 'slotted' elements. ***"); 151 152 var slotted = document.getElementById("slotted"); 153 154 test(function() { 155 shadowHost.style.alignItems = "center"; 156 shadowNode.style.alignItems = "right"; 157 slotted.style.alignItems = "left"; 158 checkValues(slotted, "alignItems", "align-items", "left", "left"); 159 slotted.style.alignItems = "normal"; 160 checkValues(slotted, "alignItems", "align-items", "normal", "normal"); 161 slotted.style.alignSelf = "start"; 162 checkValues(slotted, "alignSelf", "align-self", "start", "start"); 163 slotted.style.alignSelf = "auto"; 164 checkValues(slotted, "alignSelf", "align-self", "auto", "auto"); 165 }, "Check out how align-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned."); 166 167 test(function() { 168 shadowHost.style.justifyItems = "center"; 169 shadowNode.style.justifyItems = "right"; 170 slotted.style.justifyItems = "left"; 171 checkValues(slotted, "justifyItems", "justify-items", "left", "left"); 172 slotted.style.justifyItems = ""; 173 checkValues(slotted, "justifyItems", "justify-items", "", "normal"); 174 slotted.style.justifySelf = "start"; 175 checkValues(slotted, "justifySelf", "justify-self", "start", "start"); 176 slotted.style.justifySelf = "auto"; 177 checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); 178 }, "Check out how justify-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned."); 179 180 test(function() { 181 shadowHost.style.justifyItems = "auto"; 182 shadowNode.style.justifyItems = "right"; 183 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal"); 184 checkValues(shadowNode, "justifyItems", "justify-items", "right", "right"); 185 document.documentElement.style.justifyItems = "legacy center"; 186 checkValues(document.documentElement, "justifyItems", "justify-items", "legacy center", "legacy center"); 187 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "legacy center"); 188 slotted.style.justifyItems = "auto"; 189 checkValues(slotted, "justifyItems", "justify-items", "auto", "normal"); 190 slotted.style.justifySelf = "auto"; 191 checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); 192 shadowNode.style.justifyItems = "auto"; 193 checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy center"); 194 checkValues(slotted, "justifyItems", "justify-items", "auto", "normal"); 195 checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); 196 document.documentElement.style.justifyItems = "auto"; 197 }, "Check out how the 'legacy' keyword in justify-items affects the 'slotted' elements while 'slot' is not assigned."); 198 199 // Slot element is assigned now. 200 var slot = document.createElement('slot'); 201 slot.setAttribute('name', 's1'); 202 shadowNode.appendChild(slot); 203 204 test(function() { 205 shadowHost.style.alignItems = "center"; 206 shadowNode.style.alignItems = "right"; 207 slotted.style.alignItems = "left"; 208 checkValues(slotted, "alignItems", "align-items", "left", "left"); 209 slotted.style.alignItems = ""; 210 checkValues(slotted, "alignItems", "align-items", "", "normal"); 211 slotted.style.alignSelf = "start"; 212 checkValues(slotted, "alignSelf", "align-self", "start", "start"); 213 slotted.style.alignSelf = "auto"; 214 checkValues(slotted, "alignSelf", "align-self", "auto", "auto"); 215 }, "Check out how align-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned."); 216 217 test(function() { 218 shadowHost.style.justifyItems = "center"; 219 shadowNode.style.justifyItems = "right"; 220 slotted.style.justifyItems = "left"; 221 checkValues(slotted, "justifyItems", "justify-items", "left", "left"); 222 slotted.style.justifyItems = ""; 223 checkValues(slotted, "justifyItems", "justify-items", "", "normal"); 224 slotted.style.justifySelf = "start"; 225 checkValues(slotted, "justifySelf", "justify-self", "start", "start"); 226 slotted.style.justifySelf = "auto"; 227 checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); 228 }, "Check out how justify-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned."); 229 230 test(function() { 231 shadowHost.style.justifyItems = "auto"; 232 shadowNode.style.justifyItems = "right"; 233 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal"); 234 checkValues(shadowNode, "justifyItems", "justify-items", "right", "right"); 235 document.documentElement.style.justifyItems = "legacy center"; 236 checkValues(document.documentElement, "justifyItems", "justify-items", "legacy center", "legacy center"); 237 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "legacy center"); 238 slotted.style.justifyItems = "auto"; 239 checkValues(slotted, "justifyItems", "justify-items", "auto", "normal"); // Shadow host is not the parent now, but ShadowNode. 240 slotted.style.justifySelf = "auto"; 241 checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); // Shadow host is not the parent now, but ShadowNode. 242 shadowNode.style.justifyItems = "auto"; 243 checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy center"); 244 checkValues(slotted, "justifyItems", "justify-items", "auto", "legacy center"); // Now that shadowNode is auto, 'legacy' applies. 245 checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); // Now that shadowNode is auto, 'legacy' applies. 246 document.documentElement.style.justifyItems = "auto"; 247 }, "Check out how the 'legacy' keyword affects the 'slotted' elements after the 'slot' is assigned."); 248 249 test(function() { 250 shadowHost.style.alignItems = "center"; 251 shadowNode.style.alignItems = "right"; 252 slot.style.alignItems = "left"; 253 checkValues(slot, "alignItems", "align-items", "left", "left"); 254 slot.style.alignItems = ""; 255 checkValues(slot, "alignItems", "align-items", "", "normal"); 256 slot.style.alignSelf = "left"; 257 checkValues(slot, "alignSelf", "align-self", "left", "left"); 258 slot.style.alignSelf = "auto"; 259 checkValues(slot, "alignSelf", "align-self", "auto", "auto"); 260 }, "The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the align-self 'auto' values because Blink does not support slots in the flat tree."); 261 262 test(function() { 263 shadowHost.style.justifyItems = "center"; 264 shadowNode.style.justifyItems = "right"; 265 266 slot.style.justifyItems = "left"; 267 checkValues(slot, "justifyItems", "justify-items", "left", "left"); 268 slot.style.justifyItems = "auto"; 269 checkValues(slot, "justifyItems", "justify-items", "auto", "normal"); 270 slot.style.justifySelf = "left"; 271 checkValues(slot, "justifySelf", "justify-self", "left", "left"); 272 slot.style.justifySelf = "auto"; 273 checkValues(slot, "justifySelf", "justify-self", "auto", "auto"); 274 }, "The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the justify-self 'auto' values because Blink does not support slots in the flat tree."); 91 275 92 276 </script> -
trunk/LayoutTests/css3/parse-place-items.html
r217435 r219315 228 228 229 229 test(function() { 230 checkPlaceItemsValuesBadJS("auto normal" , "normal", "normal");231 checkPlaceItemsValuesBadJS("space-between" , "normal", "normal");232 checkPlaceItemsValuesBadJS("center safe" , "normal", "normal");233 checkPlaceItemsValuesBadJS("center self-start center" , "normal", "normal");234 checkPlaceItemsValuesBadJS("asrt", "normal" , "normal");235 checkPlaceItemsValuesBadJS("auto", "normal" , "normal");236 checkPlaceItemsValuesBadJS("10px", "normal" , "normal");237 checkPlaceItemsValuesBadJS("stretch safe" , "normal", "normal");238 checkPlaceItemsValuesBadJS("self-start start end" , "normal", "normal");239 checkPlaceItemsValuesBadJS("" , "normal", "normal");230 checkPlaceItemsValuesBadJS("auto normal"); 231 checkPlaceItemsValuesBadJS("space-between"); 232 checkPlaceItemsValuesBadJS("center safe"); 233 checkPlaceItemsValuesBadJS("center self-start center"); 234 checkPlaceItemsValuesBadJS("asrt", "normal"); 235 checkPlaceItemsValuesBadJS("auto", "normal"); 236 checkPlaceItemsValuesBadJS("10px", "normal"); 237 checkPlaceItemsValuesBadJS("stretch safe"); 238 checkPlaceItemsValuesBadJS("self-start start end"); 239 checkPlaceItemsValuesBadJS(""); 240 240 }, "Test setting incorrect values through JS."); 241 241 -
trunk/LayoutTests/css3/parse-place-self.html
r217435 r219315 117 117 element.style.placeSelf = ""; 118 118 element.style.placeSelf = value; 119 checkPlaceSelfValues(element, "", " normal", "normal")119 checkPlaceSelfValues(element, "", "auto", "auto") 120 120 } 121 121 … … 126 126 127 127 test(function() { 128 checkValues(placeSelfCenterAuto, "placeSelf", "place-self", "", "center normal");129 checkPlaceSelfValues(placeSelfCenterAuto, "", "center", " normal");128 checkValues(placeSelfCenterAuto, "placeSelf", "place-self", "", "center auto"); 129 checkPlaceSelfValues(placeSelfCenterAuto, "", "center", "auto"); 130 130 }, "Test getting the Computed Value of place-self's longhand properties when setting 'center auto' value through CSS."); 131 131 … … 186 186 187 187 test(function() { 188 checkValues(placeSelf Auto, "placeSelf", "place-self", "", "normal normal");189 checkPlaceSelfValues(placeSelf Auto, "", "normal", "normal");188 checkValues(placeSelfEmpty, "placeSelf", "place-self", "", "auto auto"); 189 checkPlaceSelfValues(placeSelfEmpty, "", "auto", "auto"); 190 190 }, "Test setting '' as incorrect value through CSS."); 191 191 192 192 test(function() { 193 checkValues(placeSelfAuto, "placeSelf", "place-self", "", " normal normal");194 checkPlaceSelfValues(placeSelfAuto, "", " normal", "normal");193 checkValues(placeSelfAuto, "placeSelf", "place-self", "", "auto auto"); 194 checkPlaceSelfValues(placeSelfAuto, "", "auto", "auto"); 195 195 }, "Test setting 'auto' as incorrect value through CSS."); 196 196 197 197 test(function() { 198 checkValues(placeSelfNone, "placeSelf", "place-self", "", " normal normal");199 checkPlaceSelfValues(placeSelfNone, "", " normal", "normal");198 checkValues(placeSelfNone, "placeSelf", "place-self", "", "auto auto"); 199 checkPlaceSelfValues(placeSelfNone, "", "auto", "auto"); 200 200 }, "Test setting 'none' as incorrect value through CSS."); 201 201 202 202 test(function() { 203 checkValues(placeSelfSafe, "placeSelf", "place-self", "", " normal normal");204 checkPlaceSelfValues(placeSelfSafe, "", " normal", "normal");203 checkValues(placeSelfSafe, "placeSelf", "place-self", "", "auto auto"); 204 checkPlaceSelfValues(placeSelfSafe, "", "auto", "auto"); 205 205 }, "Test setting 'safe' as incorrect value through CSS."); 206 206 207 207 test(function() { 208 checkValues(placeSelfStartSafe, "placeSelf", "place-self", "", " normal normal");209 checkPlaceSelfValues(placeSelfStartSafe, "", " normal", "normal");208 checkValues(placeSelfStartSafe, "placeSelf", "place-self", "", "auto auto"); 209 checkPlaceSelfValues(placeSelfStartSafe, "", "auto", "auto"); 210 210 }, "Test setting 'start safe' as incorrect value through CSS."); 211 211 212 212 test(function() { 213 checkValues(placeSelfBaselineSafe, "placeSelf", "place-self", "", " normal normal");214 checkPlaceSelfValues(placeSelfBaselineSafe, "", " normal", "normal");213 checkValues(placeSelfBaselineSafe, "placeSelf", "place-self", "", "auto auto"); 214 checkPlaceSelfValues(placeSelfBaselineSafe, "", "auto", "auto"); 215 215 }, "Test setting 'baseline safe' as incorrect value through CSS."); 216 216 217 217 test(function() { 218 checkValues(placeSelfStartEndLeft, "placeSelf", "place-self", "", " normal normal");219 checkPlaceSelfValues(placeSelfStartEndLeft, "", " normal", "normal");218 checkValues(placeSelfStartEndLeft, "placeSelf", "place-self", "", "auto auto"); 219 checkPlaceSelfValues(placeSelfStartEndLeft, "", "auto", "auto"); 220 220 }, "Test setting 'start end left' as incorrect value through CSS."); 221 221 … … 225 225 checkPlaceSelfValuesJS("self-start end", "self-start", "end"); 226 226 checkPlaceSelfValuesJS("normal end", "normal", "end"); 227 checkPlaceSelfValuesJS("auto right", "auto", "right"); 227 228 }, "Test setting values through JS."); 228 229 229 230 test(function() { 230 checkPlaceSelfValuesBadJS("space-between" , "normal", "normal");231 checkPlaceSelfValuesBadJS("center safe" , "normal", "normal");232 checkPlaceSelfValuesBadJS("center self-start center" , "normal", "normal");233 checkPlaceSelfValuesBadJS("asrt" , "normal", "normal");234 checkPlaceSelfValuesBadJS("10px" , "normal", "normal");235 checkPlaceSelfValuesBadJS("stretch safe" , "normal", "normal");236 checkPlaceSelfValuesBadJS("self-start start end" , "normal", "normal");237 checkPlaceSelfValuesBadJS("" , "normal", "normal");231 checkPlaceSelfValuesBadJS("space-between"); 232 checkPlaceSelfValuesBadJS("center safe"); 233 checkPlaceSelfValuesBadJS("center self-start center"); 234 checkPlaceSelfValuesBadJS("asrt"); 235 checkPlaceSelfValuesBadJS("10px"); 236 checkPlaceSelfValuesBadJS("stretch safe"); 237 checkPlaceSelfValuesBadJS("self-start start end"); 238 checkPlaceSelfValuesBadJS(""); 238 239 }, "Test setting incorrect values through JS."); 239 240 … … 241 242 element = document.createElement("div"); 242 243 document.body.appendChild(element); 243 checkValues(element, "placeSelf", "place-self", "", " normal normal");244 checkValues(element, "placeSelf", "place-self", "", "auto auto"); 244 245 element.style.placeSelf = "center"; 245 246 checkPlaceSelfValues(element, "center", "center", "center"); 246 247 element.style.placeSelf = "initial"; 247 checkValues(element, "placeSelf", "place-self", "initial", " normal normal");248 checkPlaceSelfValues(element, "initial", " normal", "normal");248 checkValues(element, "placeSelf", "place-self", "initial", "auto auto"); 249 checkPlaceSelfValues(element, "initial", "auto", "auto"); 249 250 }, "Test the 'initial' value of the place-self shorthand and its longhand properties' Computed value"); 250 251 … … 253 254 var anotherElement = document.createElement("div"); 254 255 document.body.appendChild(anotherElement); 255 checkPlaceSelfValues(anotherElement, "", " normal", "normal");256 checkPlaceSelfValues(anotherElement, "", "auto", "auto"); 256 257 anotherElement.style.placeSelf = "inherit"; 257 258 checkPlaceSelfValues(anotherElement, "inherit", "start", "start"); -
trunk/LayoutTests/fast/css/ensure-flexbox-compatibility-with-initial-values-expected.txt
r207535 r219315 7 7 Verifying initial values are supported when grid is ENABLED. 8 8 PASS CSS.supports('align-items', 'normal') is true 9 PASS CSS.supports('align-self', ' normal') is true9 PASS CSS.supports('align-self', 'auto') is true 10 10 PASS CSS.supports('align-content', 'normal') is true 11 11 PASS CSS.supports('justify-content', 'normal') is true 12 12 PASS CSS.supports('align-items', 'normal') is true 13 PASS CSS.supports('align-self', ' normal') is true13 PASS CSS.supports('align-self', 'auto') is true 14 14 PASS CSS.supports('align-content', 'normal') is true 15 15 PASS CSS.supports('justify-content', 'normal') is true 16 16 PASS CSS.supports('align-items', 'normal') is true 17 PASS CSS.supports('align-self', ' normal') is true17 PASS CSS.supports('align-self', 'auto') is true 18 18 PASS CSS.supports('align-content', 'normal') is true 19 19 PASS CSS.supports('justify-content', 'normal') is true 20 20 PASS CSS.supports('align-items', 'normal') is true 21 PASS CSS.supports('align-self', ' normal') is true21 PASS CSS.supports('align-self', 'auto') is true 22 22 PASS CSS.supports('align-content', 'normal') is true 23 23 PASS CSS.supports('justify-content', 'normal') is true … … 25 25 Verifying initial values are supported when grid is DISABLED. 26 26 PASS CSS.supports('align-items', 'stretch') is true 27 PASS CSS.supports('align-self', ' stretch') is true27 PASS CSS.supports('align-self', 'auto') is true 28 28 PASS CSS.supports('align-content', 'stretch') is true 29 29 PASS CSS.supports('justify-content', 'flex-start') is true 30 30 PASS CSS.supports('align-items', 'stretch') is true 31 PASS CSS.supports('align-self', ' stretch') is true31 PASS CSS.supports('align-self', 'auto') is true 32 32 PASS CSS.supports('align-content', 'stretch') is true 33 33 PASS CSS.supports('justify-content', 'flex-start') is true 34 34 PASS CSS.supports('align-items', 'stretch') is true 35 PASS CSS.supports('align-self', ' stretch') is true35 PASS CSS.supports('align-self', 'auto') is true 36 36 PASS CSS.supports('align-content', 'stretch') is true 37 37 PASS CSS.supports('justify-content', 'flex-start') is true 38 38 PASS CSS.supports('align-items', 'stretch') is true 39 PASS CSS.supports('align-self', ' stretch') is true39 PASS CSS.supports('align-self', 'auto') is true 40 40 PASS CSS.supports('align-content', 'stretch') is true 41 41 PASS CSS.supports('justify-content', 'flex-start') is true -
trunk/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
r219151 r219315 155 155 align-content: normal; 156 156 align-items: normal; 157 align-self: normal;157 align-self: auto; 158 158 filter: none; 159 159 flex-basis: auto; … … 164 164 flex-wrap: nowrap; 165 165 justify-content: normal; 166 justify-self: normal;166 justify-self: auto; 167 167 justify-items: normal; 168 168 -webkit-font-kerning: auto; -
trunk/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
r218620 r219315 154 154 align-content: normal 155 155 align-items: normal 156 align-self: normal156 align-self: auto 157 157 filter: none 158 158 flex-basis: auto … … 163 163 flex-wrap: nowrap 164 164 justify-content: normal 165 justify-self: normal165 justify-self: auto 166 166 justify-items: normal 167 167 -webkit-font-kerning: auto -
trunk/LayoutTests/fast/css/parse-justify-self.html
r214564 r219315 15 15 #justifySelfStretch { 16 16 justify-self: stretch; 17 } 18 19 #justifySelfNormal { 20 justify-self: normal; 17 21 } 18 22 … … 90 94 <div id="justifySelfLastBaseline"></div> 91 95 <div id="justifySelfStretch"></div> 96 <div id="justifySelfNormal"></div> 92 97 <div id="justifySelfStart"></div> 93 98 <div id="justifySelfEnd"></div> … … 121 126 var justifySelfStretch = document.getElementById("justifySelfStretch"); 122 127 checkValues(justifySelfStretch, "justifySelf", "justify-self", "", "stretch"); 128 var justifySelfNormal = document.getElementById("justifySelfNormal"); 129 checkValues(justifySelfNormal, "justifySelf", "justify-self", "", "normal"); 123 130 var justifySelfStart = document.getElementById("justifySelfStart"); 124 131 checkValues(justifySelfStart, "justifySelf", "justify-self", "", "start"); … … 161 168 element = document.createElement("div"); 162 169 document.body.appendChild(element); 163 checkValues(element, "justifySelf", "justify-self", "", " normal");170 checkValues(element, "justifySelf", "justify-self", "", "auto"); 164 171 }, "Test initial value of justify-self through JS"); 165 172 … … 187 194 checkValues(element, "justifySelf", "justify-self", "self-start", "self-start"); 188 195 196 element.style.justifySelf = "normal"; 197 checkValues(element, "justifySelf", "justify-self", "normal", "normal"); 198 189 199 element.style.justifySelf = "auto"; 190 checkValues(element, "justifySelf", "justify-self", "auto", " normal");200 checkValues(element, "justifySelf", "justify-self", "auto", "auto"); 191 201 192 202 container.style.display = "flex"; 193 203 element.style.justifySelf = "auto"; 194 checkValues(element, "justifySelf", "justify-self", "auto", " normal");204 checkValues(element, "justifySelf", "justify-self", "auto", "auto"); 195 205 196 206 container.style.display = "grid"; 197 207 element.style.justifySelf = "auto"; 198 checkValues(element, "justifySelf", "justify-self", "auto", " normal");208 checkValues(element, "justifySelf", "justify-self", "auto", "auto"); 199 209 200 210 element.style.justifySelf = "self-end"; … … 204 214 test(function() { 205 215 document.documentElement.style.justifySelf = "auto"; 206 checkValues(document.documentElement, "justifySelf", "justify-self", "auto", " normal");216 checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "auto"); 207 217 }, "Test 'auto' value resolution for the root node"); 208 218 … … 216 226 checkBadValues(element, "justifySelf", "justify-self", "auto safe"); 217 227 checkBadValues(element, "justifySelf", "justify-self", "auto left"); 228 checkBadValues(element, "justifySelf", "justify-self", "normal unsafe"); 229 checkBadValues(element, "justifySelf", "justify-self", "normal stretch"); 230 checkBadValues(element, "justifySelf", "justify-self", "baseline normal"); 218 231 checkBadValues(element, "justifySelf", "justify-self", "baseline safe"); 219 232 checkBadValues(element, "justifySelf", "justify-self", "baseline center"); … … 241 254 test(function() { 242 255 container.style.display = ""; 243 checkInitialValues(element, "justifySelf", "justify-self", "center", " normal");256 checkInitialValues(element, "justifySelf", "justify-self", "center", "auto"); 244 257 }, "Test the value 'initial'"); 245 258 246 259 test(function() { 247 260 container.style.display = "grid"; 248 checkInitialValues(element, "justifySelf", "justify-self", "left safe", " normal");261 checkInitialValues(element, "justifySelf", "justify-self", "left safe", "auto"); 249 262 }, "Test the value 'initial' for grid containers"); 250 263 251 264 test(function() { 252 265 container.style.display = "flex"; 253 checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", " normal");266 checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "auto"); 254 267 }, "Test the value 'initial' for flex containers"); 255 268 … … 257 270 container.style.display = ""; 258 271 element.style.position = "absolute"; 259 checkInitialValues(element, "justifySelf", "justify-self", "left", " normal");272 checkInitialValues(element, "justifySelf", "justify-self", "left", "auto"); 260 273 }, "Test the value 'initial' for positioned elements"); 261 274 … … 263 276 container.style.display = "grid"; 264 277 element.style.position = "absolute"; 265 checkInitialValues(element, "justifySelf", "justify-self", "right", " normal");278 checkInitialValues(element, "justifySelf", "justify-self", "right", "auto"); 266 279 }, "Test the value 'initial' for positioned elements in grid containers"); 267 280 … … 269 282 container.style.display = "flex"; 270 283 element.style.position = "absolute"; 271 checkInitialValues(element, "justifySelf", "justify-self", "end", " normal");284 checkInitialValues(element, "justifySelf", "justify-self", "end", "auto"); 272 285 }, "Test the value 'initial' for positioned elements in grid containers"); 273 286 -
trunk/LayoutTests/fast/repaint/align-items-change-expected.txt
r213480 r219315 2 2 3 3 (repaint rects 4 (rect 0 52 100 102)5 (rect 100 52 100 152)6 4 (rect 0 52 100 300) 7 5 (rect 0 51 100 1) -
trunk/LayoutTests/fast/repaint/align-items-overflow-change-expected.txt
r213480 r219315 2 2 3 3 (repaint rects 4 (rect 0 2 200 200)5 (rect 0 252 200 100)6 4 (rect 0 2 200 350) 7 5 (rect 0 52 200 300) -
trunk/LayoutTests/fast/repaint/justify-items-overflow-change-expected.txt
r213480 r219315 2 2 3 3 (repaint rects 4 (rect -60 52 160 300)5 (rect 150 52 50 300)6 4 (rect -60 52 260 300) 7 5 (rect 0 52 200 300) -
trunk/LayoutTests/imported/w3c/ChangeLog
r219151 r219315 1 2017-07-10 Javier Fernandez <jfernandez@igalia.com> 2 3 [css-align][css-flex][css-grid] 'auto' values of align-self and justify-self must not be resolved 4 https://bugs.webkit.org/show_bug.cgi?id=172707 5 6 Reviewed by Antti Koivisto. 7 8 This change makes all the cases of the test below to pass now, hence updated expectations accordingly. 9 10 * web-platform-tests/css/css-align-3/self-alignment/place-self-shorthand-006-expected.txt: 11 1 12 2017-07-05 Zalan Bujtas <zalan@apple.com> 2 13 -
trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-align-3/self-alignment/place-self-shorthand-006-expected.txt
r217575 r219315 1 1 2 FAIL Checking place-self: auto assert_in_array: place-self resolved value value "normal normal" not in array ["", "auto auto"] 3 FAIL Checking place-self: auto auto assert_in_array: place-self resolved value value "normal normal" not in array ["", "auto auto"] 4 FAIL Checking place-self: auto normal assert_in_array: place-self resolved value value "normal normal" not in array ["", "auto normal"] 5 FAIL Checking place-self: auto stretch assert_in_array: place-self resolved value value "normal stretch" not in array ["", "auto stretch"] 6 FAIL Checking place-self: auto start assert_in_array: place-self resolved value value "normal start" not in array ["", "auto start"] 7 FAIL Checking place-self: auto end assert_in_array: place-self resolved value value "normal end" not in array ["", "auto end"] 8 FAIL Checking place-self: auto self-start assert_in_array: place-self resolved value value "normal self-start" not in array ["", "auto self-start"] 9 FAIL Checking place-self: auto self-end assert_in_array: place-self resolved value value "normal self-end" not in array ["", "auto self-end"] 10 FAIL Checking place-self: auto left assert_in_array: place-self resolved value value "normal left" not in array ["", "auto left"] 11 FAIL Checking place-self: auto right assert_in_array: place-self resolved value value "normal right" not in array ["", "auto right"] 12 FAIL Checking place-self: auto center assert_in_array: place-self resolved value value "normal center" not in array ["", "auto center"] 13 FAIL Checking place-self: auto flex-start assert_in_array: place-self resolved value value "normal flex-start" not in array ["", "auto flex-start"] 14 FAIL Checking place-self: auto flex-end assert_in_array: place-self resolved value value "normal flex-end" not in array ["", "auto flex-end"] 15 FAIL Checking place-self: auto baseline assert_in_array: place-self resolved value value "normal baseline" not in array ["", "auto baseline"] 16 FAIL Checking place-self: auto first baseline assert_in_array: place-self resolved value value "normal baseline" not in array ["", "auto baseline"] 17 FAIL Checking place-self: auto last baseline assert_in_array: place-self resolved value value "normal last baseline" not in array ["", "auto last baseline"] 2 PASS Checking place-self: auto 3 PASS Checking place-self: auto auto 4 PASS Checking place-self: auto normal 5 PASS Checking place-self: auto stretch 6 PASS Checking place-self: auto start 7 PASS Checking place-self: auto end 8 PASS Checking place-self: auto self-start 9 PASS Checking place-self: auto self-end 10 PASS Checking place-self: auto left 11 PASS Checking place-self: auto right 12 PASS Checking place-self: auto center 13 PASS Checking place-self: auto flex-start 14 PASS Checking place-self: auto flex-end 15 PASS Checking place-self: auto baseline 16 PASS Checking place-self: auto first baseline 17 PASS Checking place-self: auto last baseline 18 18 PASS Checking place-self: normal 19 FAIL Checking place-self: normal auto assert_in_array: place-self resolved value value "normal normal" not in array ["", "normal auto"] 19 PASS Checking place-self: normal auto 20 20 PASS Checking place-self: normal normal 21 21 PASS Checking place-self: normal stretch … … 33 33 PASS Checking place-self: normal last baseline 34 34 PASS Checking place-self: stretch 35 FAIL Checking place-self: stretch auto assert_in_array: place-self resolved value value "stretch normal" not in array ["", "stretch auto"] 35 PASS Checking place-self: stretch auto 36 36 PASS Checking place-self: stretch normal 37 37 PASS Checking place-self: stretch stretch … … 49 49 PASS Checking place-self: stretch last baseline 50 50 PASS Checking place-self: start 51 FAIL Checking place-self: start auto assert_in_array: place-self resolved value value "start normal" not in array ["", "start auto"] 51 PASS Checking place-self: start auto 52 52 PASS Checking place-self: start normal 53 53 PASS Checking place-self: start stretch … … 65 65 PASS Checking place-self: start last baseline 66 66 PASS Checking place-self: end 67 FAIL Checking place-self: end auto assert_in_array: place-self resolved value value "end normal" not in array ["", "end auto"] 67 PASS Checking place-self: end auto 68 68 PASS Checking place-self: end normal 69 69 PASS Checking place-self: end stretch … … 81 81 PASS Checking place-self: end last baseline 82 82 PASS Checking place-self: self-start 83 FAIL Checking place-self: self-start auto assert_in_array: place-self resolved value value "self-start normal" not in array ["", "self-start auto"] 83 PASS Checking place-self: self-start auto 84 84 PASS Checking place-self: self-start normal 85 85 PASS Checking place-self: self-start stretch … … 97 97 PASS Checking place-self: self-start last baseline 98 98 PASS Checking place-self: self-end 99 FAIL Checking place-self: self-end auto assert_in_array: place-self resolved value value "self-end normal" not in array ["", "self-end auto"] 99 PASS Checking place-self: self-end auto 100 100 PASS Checking place-self: self-end normal 101 101 PASS Checking place-self: self-end stretch … … 113 113 PASS Checking place-self: self-end last baseline 114 114 PASS Checking place-self: left 115 FAIL Checking place-self: left auto assert_in_array: place-self resolved value value "left normal" not in array ["", "left auto"] 115 PASS Checking place-self: left auto 116 116 PASS Checking place-self: left normal 117 117 PASS Checking place-self: left stretch … … 129 129 PASS Checking place-self: left last baseline 130 130 PASS Checking place-self: right 131 FAIL Checking place-self: right auto assert_in_array: place-self resolved value value "right normal" not in array ["", "right auto"] 131 PASS Checking place-self: right auto 132 132 PASS Checking place-self: right normal 133 133 PASS Checking place-self: right stretch … … 145 145 PASS Checking place-self: right last baseline 146 146 PASS Checking place-self: center 147 FAIL Checking place-self: center auto assert_in_array: place-self resolved value value "center normal" not in array ["", "center auto"] 147 PASS Checking place-self: center auto 148 148 PASS Checking place-self: center normal 149 149 PASS Checking place-self: center stretch … … 161 161 PASS Checking place-self: center last baseline 162 162 PASS Checking place-self: flex-start 163 FAIL Checking place-self: flex-start auto assert_in_array: place-self resolved value value "flex-start normal" not in array ["", "flex-start auto"] 163 PASS Checking place-self: flex-start auto 164 164 PASS Checking place-self: flex-start normal 165 165 PASS Checking place-self: flex-start stretch … … 177 177 PASS Checking place-self: flex-start last baseline 178 178 PASS Checking place-self: flex-end 179 FAIL Checking place-self: flex-end auto assert_in_array: place-self resolved value value "flex-end normal" not in array ["", "flex-end auto"] 179 PASS Checking place-self: flex-end auto 180 180 PASS Checking place-self: flex-end normal 181 181 PASS Checking place-self: flex-end stretch … … 193 193 PASS Checking place-self: flex-end last baseline 194 194 PASS Checking place-self: baseline 195 FAIL Checking place-self: baseline auto assert_in_array: place-self resolved value value "baseline normal" not in array ["", "baseline auto"] 195 PASS Checking place-self: baseline auto 196 196 PASS Checking place-self: baseline normal 197 197 PASS Checking place-self: baseline stretch … … 209 209 PASS Checking place-self: baseline last baseline 210 210 PASS Checking place-self: first baseline 211 FAIL Checking place-self: first baseline auto assert_in_array: place-self resolved value value "baseline normal" not in array ["", "baseline auto"] 211 PASS Checking place-self: first baseline auto 212 212 PASS Checking place-self: first baseline normal 213 213 PASS Checking place-self: first baseline stretch … … 225 225 PASS Checking place-self: first baseline last baseline 226 226 PASS Checking place-self: last baseline 227 FAIL Checking place-self: last baseline auto assert_in_array: place-self resolved value value "last baseline normal" not in array ["", "last baseline auto"] 227 PASS Checking place-self: last baseline auto 228 228 PASS Checking place-self: last baseline normal 229 229 PASS Checking place-self: last baseline stretch -
trunk/LayoutTests/svg/css/getComputedStyle-basic-expected.txt
r214359 r219315 307 307 rect: style.getPropertyValue(align-items) : normal 308 308 rect: style.getPropertyCSSValue(align-items) : [object CSSValueList] 309 rect: style.getPropertyValue(align-self) : normal309 rect: style.getPropertyValue(align-self) : auto 310 310 rect: style.getPropertyCSSValue(align-self) : [object CSSValueList] 311 311 rect: style.getPropertyValue(filter) : none … … 325 325 rect: style.getPropertyValue(justify-content) : normal 326 326 rect: style.getPropertyCSSValue(justify-content) : [object CSSValueList] 327 rect: style.getPropertyValue(justify-self) : normal327 rect: style.getPropertyValue(justify-self) : auto 328 328 rect: style.getPropertyCSSValue(justify-self) : [object CSSValueList] 329 329 rect: style.getPropertyValue(justify-items) : normal … … 859 859 g: style.getPropertyValue(align-items) : normal 860 860 g: style.getPropertyCSSValue(align-items) : [object CSSValueList] 861 g: style.getPropertyValue(align-self) : normal861 g: style.getPropertyValue(align-self) : auto 862 862 g: style.getPropertyCSSValue(align-self) : [object CSSValueList] 863 863 g: style.getPropertyValue(filter) : none … … 877 877 g: style.getPropertyValue(justify-content) : normal 878 878 g: style.getPropertyCSSValue(justify-content) : [object CSSValueList] 879 g: style.getPropertyValue(justify-self) : normal879 g: style.getPropertyValue(justify-self) : auto 880 880 g: style.getPropertyCSSValue(justify-self) : [object CSSValueList] 881 881 g: style.getPropertyValue(justify-items) : normal -
trunk/Source/WebCore/ChangeLog
r219310 r219315 1 2017-07-10 Javier Fernandez <jfernandez@igalia.com> 2 3 [css-align][css-flex][css-grid] 'auto' values of align-self and justify-self must not be resolved 4 https://bugs.webkit.org/show_bug.cgi?id=172707 5 6 Reviewed by Antti Koivisto. 7 8 The CSS Box Alignment specification has been changed recently so that 9 now all the propeties have the specificed value as computed value. The 10 rationale of this change are at the associated W3C github issue [1]. 11 12 This change implies that we don't need to execute the StyleAdjuter 13 logic we implemented specifically for supporting 'auto' values 14 resolution for computed style. We can live now with resolution at 15 layout time only. 16 17 [1] https://github.com/w3c/csswg-drafts/issues/440 18 19 No new tests, just updating the already defined tests. 20 21 * css/CSSComputedStyleDeclaration.cpp: 22 (WebCore::ComputedStyleExtractor::propertyValue): 23 * css/StyleResolver.cpp: 24 (WebCore::StyleResolver::adjustRenderStyle): Removed 25 * css/StyleResolver.h: 26 * html/shadow/TextControlInnerElements.cpp: 27 (WebCore::TextControlInnerElement::resolveCustomStyle): 28 * rendering/RenderBox.cpp: 29 (WebCore::RenderBox::columnFlexItemHasStretchAlignment): 30 (WebCore::RenderBox::hasStretchedLogicalWidth): 31 * rendering/RenderFlexibleBox.cpp: 32 (WebCore::RenderFlexibleBox::styleDidChange): Added 33 (WebCore::RenderFlexibleBox::alignmentForChild): 34 * rendering/RenderFlexibleBox.h: 35 1 36 2017-07-10 Wenson Hsieh <wenson_hsieh@apple.com> 2 37 -
trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
r219151 r219315 2383 2383 } 2384 2384 2385 static StyleSelfAlignmentData resolveLegacyJustifyItems(const StyleSelfAlignmentData& data)2386 {2387 if (data.positionType() == LegacyPosition)2388 return { data.position(), OverflowAlignmentDefault };2389 return data;2390 }2391 2392 static StyleSelfAlignmentData resolveJustifyItemsAuto(const StyleSelfAlignmentData& data, Node* parent)2393 {2394 if (data.position() != ItemPositionAuto)2395 return data;2396 2397 // If the inherited value of justify-items includes the 'legacy' keyword, 'auto' computes to the inherited value.2398 const auto& inheritedValue = (!parent || !parent->computedStyle()) ? RenderStyle::initialDefaultAlignment() : parent->computedStyle()->justifyItems();2399 if (inheritedValue.positionType() == LegacyPosition)2400 return inheritedValue;2401 if (inheritedValue.position() == ItemPositionAuto)2402 return resolveJustifyItemsAuto(inheritedValue, parent->parentNode());2403 return { ItemPositionNormal, OverflowAlignmentDefault };2404 }2405 2406 static StyleSelfAlignmentData resolveJustifySelfAuto(const StyleSelfAlignmentData& data, Node* parent)2407 {2408 if (data.position() != ItemPositionAuto)2409 return data;2410 2411 // The 'auto' keyword computes to the computed value of justify-items on the parent or 'normal' if the box has no parent.2412 if (!parent || !parent->computedStyle())2413 return { ItemPositionNormal, OverflowAlignmentDefault };2414 return resolveLegacyJustifyItems(resolveJustifyItemsAuto(parent->computedStyle()->justifyItems(), parent->parentNode()));2415 }2416 2417 static StyleSelfAlignmentData resolveAlignSelfAuto(const StyleSelfAlignmentData& data, Node* parent)2418 {2419 if (data.position() != ItemPositionAuto)2420 return data;2421 2422 // The 'auto' keyword computes to the computed value of align-items on the parent or 'normal' if the box has no parent.2423 if (!parent || !parent->computedStyle())2424 return { ItemPositionNormal, OverflowAlignmentDefault };2425 return parent->computedStyle()->alignItems();2426 }2427 2428 2385 static bool isImplicitlyInheritedGridOrFlexProperty(CSSPropertyID propertyID) 2429 2386 { … … 3015 2972 return valueForItemPositionWithOverflowAlignment(style->alignItems()); 3016 2973 case CSSPropertyAlignSelf: 3017 return valueForItemPositionWithOverflowAlignment( resolveAlignSelfAuto(style->alignSelf(), styledElement->parentNode()));2974 return valueForItemPositionWithOverflowAlignment(style->alignSelf()); 3018 2975 case CSSPropertyFlex: 3019 2976 return getCSSPropertyValuesForShorthandProperties(flexShorthand()); … … 3033 2990 return valueForContentPositionAndDistributionWithOverflowAlignment(style->justifyContent(), CSSValueFlexStart); 3034 2991 case CSSPropertyJustifyItems: 3035 return valueForItemPositionWithOverflowAlignment( resolveJustifyItemsAuto(style->justifyItems(), styledElement->parentNode()));2992 return valueForItemPositionWithOverflowAlignment(style->justifyItems().position() == ItemPositionAuto ? RenderStyle::initialDefaultAlignment() : style->justifyItems()); 3036 2993 case CSSPropertyJustifySelf: 3037 return valueForItemPositionWithOverflowAlignment( resolveJustifySelfAuto(style->justifySelf(), styledElement->parentNode()));2994 return valueForItemPositionWithOverflowAlignment(style->justifySelf()); 3038 2995 case CSSPropertyPlaceContent: 3039 2996 return getCSSPropertyValuesForShorthandProperties(placeContentShorthand()); -
trunk/Source/WebCore/css/StyleResolver.cpp
r219145 r219315 1050 1050 } 1051 1051 1052 adjustStyleForAlignment(style, *parentBoxStyle);1053 }1054 1055 void StyleResolver::adjustStyleForAlignment(RenderStyle& style, const RenderStyle& parentBoxStyle)1056 {1057 // To avoid needing to copy the StyleRareNonInheritedData, we repurpose the 'auto'1058 // flag to not just mean 'auto' prior to running adjustRenderStyle but also1059 // mean 'normal' after running it.1060 1061 1052 // If the inherited value of justify-items includes the 'legacy' keyword, 1062 1053 // 'auto' computes to the the inherited value. Otherwise, 'auto' computes to 1063 1054 // 'normal'. 1064 1055 if (style.justifyItems().position() == ItemPositionAuto) { 1065 if (parentBoxStyle.justifyItems().positionType() == LegacyPosition) 1066 style.setJustifyItems(parentBoxStyle.justifyItems()); 1067 } 1068 1069 // The 'auto' keyword computes the computed value of justify-items on the 1070 // parent (minus any legacy keywords), or 'normal' if the box has no parent. 1071 if (style.justifySelf().position() == ItemPositionAuto) { 1072 if (parentBoxStyle.justifyItems().positionType() == LegacyPosition) 1073 style.setJustifySelfPosition(parentBoxStyle.justifyItems().position()); 1074 else if (parentBoxStyle.justifyItems().position() != ItemPositionAuto) 1075 style.setJustifySelf(parentBoxStyle.justifyItems()); 1076 } 1077 1078 // The 'auto' keyword computes the computed value of align-items on the parent 1079 // or 'normal' if the box has no parent. 1080 if (style.alignSelf().position() == ItemPositionAuto && parentBoxStyle.alignItems().position() != RenderStyle::initialDefaultAlignment().position()) 1081 style.setAlignSelf(parentBoxStyle.alignItems()); 1082 } 1083 1056 if (parentBoxStyle->justifyItems().positionType() == LegacyPosition) 1057 style.setJustifyItems(parentBoxStyle->justifyItems()); 1058 } 1059 } 1060 1084 1061 bool StyleResolver::checkRegionStyle(const Element* regionElement) 1085 1062 { -
trunk/Source/WebCore/css/StyleResolver.h
r219145 r219315 306 306 WritingMode m_writingMode; 307 307 }; 308 309 // FIXME: Should make a StyleAdjuster class (like Blink has) that handles all RenderStyle310 // adjustments. For now put this function on StyleResolver, since adjustRenderStyle is here.311 static void adjustStyleForAlignment(RenderStyle&, const RenderStyle& parentStyle);312 308 313 309 private: -
trunk/Source/WebCore/html/shadow/TextControlInnerElements.cpp
r213480 r219315 76 76 } 77 77 78 std::optional<ElementStyle> TextControlInnerElement::resolveCustomStyle(const RenderStyle& parentStyle, const RenderStyle* shadowHostStyle)78 std::optional<ElementStyle> TextControlInnerElement::resolveCustomStyle(const RenderStyle&, const RenderStyle* shadowHostStyle) 79 79 { 80 80 auto innerContainerStyle = RenderStyle::createPtr(); … … 89 89 // We don't want the shadow dom to be editable, so we set this block to read-only in case the input itself is editable. 90 90 innerContainerStyle->setUserModify(READ_ONLY); 91 92 StyleResolver::adjustStyleForAlignment(*innerContainerStyle, parentStyle);93 91 94 92 return ElementStyle(WTFMove(innerContainerStyle)); -
trunk/Source/WebCore/rendering/RenderBox.cpp
r219283 r219315 2529 2529 if (style().marginStart().isAuto() || style().marginEnd().isAuto()) 2530 2530 return false; 2531 return style().resolvedAlignSelf( isAnonymous() ? &parentStyle : nullptr, containingBlock()->selfAlignmentNormalBehavior()).position() == ItemPositionStretch;2531 return style().resolvedAlignSelf(&parentStyle, containingBlock()->selfAlignmentNormalBehavior()).position() == ItemPositionStretch; 2532 2532 } 2533 2533 … … 2555 2555 return false; 2556 2556 } 2557 const auto* parentStyle = isAnonymous() ? &containingBlock->style() : nullptr;2558 2557 if (containingBlock->isHorizontalWritingMode() != isHorizontalWritingMode()) 2559 return style.resolvedAlignSelf( parentStyle, containingBlock->selfAlignmentNormalBehavior(this)).position() == ItemPositionStretch;2560 return style.resolvedJustifySelf( parentStyle, containingBlock->selfAlignmentNormalBehavior(this)).position() == ItemPositionStretch;2558 return style.resolvedAlignSelf(&containingBlock->style(), containingBlock->selfAlignmentNormalBehavior(this)).position() == ItemPositionStretch; 2559 return style.resolvedJustifySelf(&containingBlock->style(), containingBlock->selfAlignmentNormalBehavior(this)).position() == ItemPositionStretch; 2561 2560 } 2562 2561 -
trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp
r216536 r219315 34 34 #include "FlexibleBoxAlgorithm.h" 35 35 #include "LayoutRepainter.h" 36 #include "RenderChildIterator.h" 36 37 #include "RenderLayer.h" 37 38 #include "RenderView.h" … … 234 235 static const StyleContentAlignmentData normalBehavior = { ContentPositionNormal, ContentDistributionStretch}; 235 236 return normalBehavior; 237 } 238 239 void RenderFlexibleBox::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle) 240 { 241 RenderBlock::styleDidChange(diff, oldStyle); 242 if (!oldStyle || diff != StyleDifferenceLayout) 243 return; 244 245 if (oldStyle->resolvedAlignItems(selfAlignmentNormalBehavior()).position() == ItemPositionStretch) { 246 // Flex items that were previously stretching need to be relayed out so we 247 // can compute new available cross axis space. This is only necessary for 248 // stretching since other alignment values don't change the size of the 249 // box. 250 for (auto& child : childrenOfType<RenderBox>(*this)) { 251 ItemPosition previousAlignment = child.style().resolvedAlignSelf(oldStyle, selfAlignmentNormalBehavior()).position(); 252 if (previousAlignment == ItemPositionStretch && previousAlignment != child.style().resolvedAlignSelf(&style(), selfAlignmentNormalBehavior()).position()) 253 child.setChildNeedsLayout(MarkOnlyThis); 254 } 255 } 236 256 } 237 257 … … 1438 1458 ItemPosition RenderFlexibleBox::alignmentForChild(const RenderBox& child) const 1439 1459 { 1440 ItemPosition align = child.style().resolvedAlignSelf( child.isAnonymous() ? &style() : nullptr, selfAlignmentNormalBehavior()).position();1460 ItemPosition align = child.style().resolvedAlignSelf(&style(), selfAlignmentNormalBehavior()).position(); 1441 1461 ASSERT(align != ItemPositionAuto && align != ItemPositionNormal); 1442 1462 -
trunk/Source/WebCore/rendering/RenderFlexibleBox.h
r213480 r219315 56 56 std::optional<int> inlineBlockBaseline(LineDirectionMode) const override; 57 57 58 void styleDidChange(StyleDifference, const RenderStyle*) override; 58 59 void paintChildren(PaintInfo& forSelf, const LayoutPoint&, PaintInfo& forChild, bool usePrintRect) override; 59 60 -
trunk/Source/WebCore/rendering/RenderGrid.cpp
r217705 r219315 32 32 #include "GridTrackSizingAlgorithm.h" 33 33 #include "LayoutRepainter.h" 34 #include "RenderChildIterator.h" 34 35 #include "RenderLayer.h" 35 36 #include "RenderView.h" … … 94 95 } 95 96 97 StyleSelfAlignmentData RenderGrid::selfAlignmentForChild(GridAxis axis, const RenderBox& child, const RenderStyle* gridStyle) const 98 { 99 return axis == GridRowAxis ? justifySelfForChild(child, gridStyle) : alignSelfForChild(child, gridStyle); 100 } 101 102 bool RenderGrid::selfAlignmentChangedToStretch(GridAxis axis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox& child) const 103 { 104 return selfAlignmentForChild(axis, child, &oldStyle).position() != ItemPositionStretch 105 && selfAlignmentForChild(axis, child, &newStyle).position() == ItemPositionStretch; 106 } 107 108 bool RenderGrid::selfAlignmentChangedFromStretch(GridAxis axis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox& child) const 109 { 110 return selfAlignmentForChild(axis, child, &oldStyle).position() == ItemPositionStretch 111 && selfAlignmentForChild(axis, child, &newStyle).position() != ItemPositionStretch; 112 } 113 96 114 void RenderGrid::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle) 97 115 { … … 99 117 if (!oldStyle || diff != StyleDifferenceLayout) 100 118 return; 119 120 const RenderStyle& newStyle = this->style(); 121 if (oldStyle->resolvedAlignItems(selfAlignmentNormalBehavior(this)).position() == ItemPositionStretch) { 122 // Style changes on the grid container implying stretching (to-stretch) or 123 // shrinking (from-stretch) require the affected items to be laid out again. 124 // These logic only applies to 'stretch' since the rest of the alignment 125 // values don't change the size of the box. 126 // In any case, the items' overrideSize will be cleared and recomputed (if 127 // necessary) as part of the Grid layout logic, triggered by this style 128 // change. 129 for (auto& child : childrenOfType<RenderBox>(*this)) { 130 if (child.isOutOfFlowPositioned()) 131 continue; 132 if (selfAlignmentChangedToStretch(GridRowAxis, *oldStyle, newStyle, child) 133 || selfAlignmentChangedFromStretch(GridRowAxis, *oldStyle, newStyle, child) 134 || selfAlignmentChangedToStretch(GridColumnAxis, *oldStyle, newStyle, child) 135 || selfAlignmentChangedFromStretch(GridColumnAxis, *oldStyle, newStyle, child)) { 136 child.setNeedsLayout(); 137 } 138 } 139 } 101 140 102 141 if (explicitGridDidResize(*oldStyle) || namedGridLinesDefinitionDidChange(*oldStyle) || oldStyle->gridAutoFlow() != style().gridAutoFlow() … … 1165 1204 } 1166 1205 1167 StyleSelfAlignmentData RenderGrid::alignSelfForChild(const RenderBox& child) const 1168 { 1169 if (!child.isAnonymous()) 1170 return child.style().resolvedAlignSelf(nullptr, selfAlignmentNormalBehavior(&child)); 1171 1172 // All the 'auto' values have been resolved by the StyleAdjuster, but it's 1173 // possible that some grid items generate Anonymous boxes, which need to be 1174 // solved during layout. 1175 return child.style().resolvedAlignSelf(&style(), selfAlignmentNormalBehavior(&child)); 1176 } 1177 1178 StyleSelfAlignmentData RenderGrid::justifySelfForChild(const RenderBox& child) const 1179 { 1180 if (!child.isAnonymous()) 1181 return child.style().resolvedJustifySelf(nullptr, selfAlignmentNormalBehavior(&child)); 1182 1183 // All the 'auto' values have been resolved by the StyleAdjuster, but it's 1184 // possible that some grid items generate Anonymous boxes, which need to be 1185 // solved during layout. 1186 return child.style().resolvedJustifySelf(&style(), selfAlignmentNormalBehavior(&child)); 1206 StyleSelfAlignmentData RenderGrid::alignSelfForChild(const RenderBox& child, const RenderStyle* gridStyle) const 1207 { 1208 if (!gridStyle) 1209 gridStyle = &style(); 1210 return child.style().resolvedAlignSelf(gridStyle, selfAlignmentNormalBehavior(&child)); 1211 } 1212 1213 StyleSelfAlignmentData RenderGrid::justifySelfForChild(const RenderBox& child, const RenderStyle* gridStyle) const 1214 { 1215 if (!gridStyle) 1216 gridStyle = &style(); 1217 return child.style().resolvedJustifySelf(gridStyle, selfAlignmentNormalBehavior(&child)); 1187 1218 } 1188 1219 -
trunk/Source/WebCore/rendering/RenderGrid.h
r217705 r219315 39 39 40 40 enum GridAxisPosition {GridAxisStart, GridAxisEnd, GridAxisCenter}; 41 enum GridAxis { GridRowAxis, GridColumnAxis }; 41 42 42 43 class RenderGrid final : public RenderBlock { … … 79 80 void addChild(RenderObject* newChild, RenderObject* beforeChild) final; 80 81 void removeChild(RenderObject&) final; 82 83 StyleSelfAlignmentData selfAlignmentForChild(GridAxis, const RenderBox&, const RenderStyle* = nullptr) const; 84 bool selfAlignmentChangedToStretch(GridAxis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox&) const; 85 bool selfAlignmentChangedFromStretch(GridAxis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox&) const; 81 86 82 87 std::optional<LayoutUnit> availableSpaceForGutters(GridTrackSizingDirection) const; … … 134 139 LayoutUnit computeMarginLogicalSizeForChild(GridTrackSizingDirection, const RenderBox&) const; 135 140 LayoutUnit availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox&) const; 136 StyleSelfAlignmentData justifySelfForChild(const RenderBox& ) const;137 StyleSelfAlignmentData alignSelfForChild(const RenderBox& ) const;141 StyleSelfAlignmentData justifySelfForChild(const RenderBox&, const RenderStyle* = nullptr) const; 142 StyleSelfAlignmentData alignSelfForChild(const RenderBox&, const RenderStyle* = nullptr) const; 138 143 void applyStretchAlignmentToChildIfNeeded(RenderBox&); 139 144 bool hasAutoSizeInColumnAxis(const RenderBox& child) const { return isHorizontalWritingMode() ? child.style().height().isAuto() : child.style().width().isAuto(); }
Note: See TracChangeset
for help on using the changeset viewer.