| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <style> | 3 <style> |
| 4 .flexbox { | 4 .flexbox { |
| 5 position: relative; | 5 position: relative; |
| 6 display: -webkit-flex; | 6 display: flex; |
| 7 background-color: grey; | 7 background-color: grey; |
| 8 max-width: 600px; | 8 max-width: 600px; |
| 9 -webkit-align-content: flex-start; | 9 align-content: flex-start; |
| 10 } | 10 } |
| 11 .title { | 11 .title { |
| 12 margin-top: 1em; | 12 margin-top: 1em; |
| 13 } | 13 } |
| 14 .ltr { | 14 .ltr { |
| 15 direction: ltr; | 15 direction: ltr; |
| 16 } | 16 } |
| 17 .rtl { | 17 .rtl { |
| 18 direction: rtl; | 18 direction: rtl; |
| 19 } | 19 } |
| 20 .horizontal-tb { | 20 .horizontal-tb { |
| 21 -webkit-writing-mode: horizontal-tb; | 21 -webkit-writing-mode: horizontal-tb; |
| 22 } | 22 } |
| 23 .horizontal-bt { | 23 .horizontal-bt { |
| 24 -webkit-writing-mode: horizontal-bt; | 24 -webkit-writing-mode: horizontal-bt; |
| 25 } | 25 } |
| 26 .vertical-rl { | 26 .vertical-rl { |
| 27 -webkit-writing-mode: vertical-rl; | 27 -webkit-writing-mode: vertical-rl; |
| 28 } | 28 } |
| 29 .vertical-lr { | 29 .vertical-lr { |
| 30 -webkit-writing-mode: vertical-lr; | 30 -webkit-writing-mode: vertical-lr; |
| 31 } | 31 } |
| 32 .row { | 32 .row { |
| 33 -webkit-flex-flow: row; | 33 flex-flow: row; |
| 34 } | 34 } |
| 35 .row-reverse { | 35 .row-reverse { |
| 36 -webkit-flex-flow: row-reverse; | 36 flex-flow: row-reverse; |
| 37 } | 37 } |
| 38 .column { | 38 .column { |
| 39 -webkit-flex-flow: column; | 39 flex-flow: column; |
| 40 } | 40 } |
| 41 .column-reverse { | 41 .column-reverse { |
| 42 -webkit-flex-flow: column-reverse; | 42 flex-flow: column-reverse; |
| 43 } | 43 } |
| 44 .wrap { | 44 .wrap { |
| 45 -webkit-flex-wrap: wrap; | 45 flex-wrap: wrap; |
| 46 } | 46 } |
| 47 .wrap-reverse { | 47 .wrap-reverse { |
| 48 -webkit-flex-wrap: wrap-reverse; | 48 flex-wrap: wrap-reverse; |
| 49 } | 49 } |
| 50 .flexbox > :nth-child(1) { | 50 .flexbox > :nth-child(1) { |
| 51 background-color: #0f0; | 51 background-color: #0f0; |
| 52 } | 52 } |
| 53 .flexbox > :nth-child(2) { | 53 .flexbox > :nth-child(2) { |
| 54 background-color: #0d0; | 54 background-color: #0d0; |
| 55 } | 55 } |
| 56 .flexbox > :nth-child(3) { | 56 .flexbox > :nth-child(3) { |
| 57 background-color: #0b0; | 57 background-color: #0b0; |
| 58 } | 58 } |
| (...skipping 1235 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1294 { | 1294 { |
| 1295 if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row')
!= -1) | 1295 if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row')
!= -1) |
| 1296 || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('colu
mn') != -1)) | 1296 || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('colu
mn') != -1)) |
| 1297 return 'width'; | 1297 return 'width'; |
| 1298 return 'height'; | 1298 return 'height'; |
| 1299 } | 1299 } |
| 1300 | 1300 |
| 1301 function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength,
alignment, expectations) | 1301 function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength,
alignment, expectations) |
| 1302 { | 1302 { |
| 1303 var child = document.createElement('div'); | 1303 var child = document.createElement('div'); |
| 1304 child.setAttribute('style', '-webkit-flex: 1 ' + preferredSize + 'px;' | 1304 child.setAttribute('style', 'flex: 1 ' + preferredSize + 'px;' |
| 1305 + crossAxis + ': ' + crossAxisLength + ';' | 1305 + crossAxis + ': ' + crossAxisLength + ';' |
| 1306 + '-webkit-align-self: ' + alignment); | 1306 + 'align-self: ' + alignment); |
| 1307 | 1307 |
| 1308 child.setAttribute("data-expected-width", expectations[0]); | 1308 child.setAttribute("data-expected-width", expectations[0]); |
| 1309 child.setAttribute("data-expected-height", expectations[1]); | 1309 child.setAttribute("data-expected-height", expectations[1]); |
| 1310 child.setAttribute("data-offset-x", expectations[2]); | 1310 child.setAttribute("data-offset-x", expectations[2]); |
| 1311 child.setAttribute("data-offset-y", expectations[3]); | 1311 child.setAttribute("data-offset-y", expectations[3]); |
| 1312 | 1312 |
| 1313 flexbox.appendChild(child); | 1313 flexbox.appendChild(child); |
| 1314 } | 1314 } |
| 1315 | 1315 |
| 1316 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-l
r']; | 1316 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-l
r']; |
| (...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1358 flexbox.setAttribute("data-expected-height", testExpectations.fl
exbox[1]); | 1358 flexbox.setAttribute("data-expected-height", testExpectations.fl
exbox[1]); |
| 1359 | 1359 |
| 1360 document.body.appendChild(flexbox); | 1360 document.body.appendChild(flexbox); |
| 1361 }) | 1361 }) |
| 1362 }) | 1362 }) |
| 1363 }) | 1363 }) |
| 1364 }) | 1364 }) |
| 1365 </script> | 1365 </script> |
| 1366 </body> | 1366 </body> |
| 1367 </html> | 1367 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
