| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <link href="resources/flexbox.css" rel="stylesheet"> | 3 <link href="resources/flexbox.css" rel="stylesheet"> |
| 4 <style> | 4 <style> |
| 5 .flexbox { | 5 .flexbox { |
| 6 margin: 120px; | 6 margin: 120px; |
| 7 width: 100px; | 7 width: 100px; |
| 8 height: 100px; | 8 height: 100px; |
| 9 background-color: #aaa; | 9 background-color: #aaa; |
| 10 position: relative; | 10 position: relative; |
| (...skipping 14 matching lines...) Expand all Loading... |
| 25 } | 25 } |
| 26 .ltr { | 26 .ltr { |
| 27 direction: ltr; | 27 direction: ltr; |
| 28 } | 28 } |
| 29 .rtl { | 29 .rtl { |
| 30 direction: rtl; | 30 direction: rtl; |
| 31 } | 31 } |
| 32 .horizontal-tb { | 32 .horizontal-tb { |
| 33 -webkit-writing-mode: horizontal-tb; | 33 -webkit-writing-mode: horizontal-tb; |
| 34 } | 34 } |
| 35 .horizontal-bt { | |
| 36 -webkit-writing-mode: horizontal-bt; | |
| 37 } | |
| 38 .vertical-rl { | 35 .vertical-rl { |
| 39 -webkit-writing-mode: vertical-rl; | 36 -webkit-writing-mode: vertical-rl; |
| 40 } | 37 } |
| 41 .vertical-lr { | 38 .vertical-lr { |
| 42 -webkit-writing-mode: vertical-lr; | 39 -webkit-writing-mode: vertical-lr; |
| 43 } | 40 } |
| 44 </style> | 41 </style> |
| 45 <script src="../../resources/check-layout.js"></script> | 42 <script src="../../resources/check-layout.js"></script> |
| 46 <body onload="checkLayout('.flexbox')"> | 43 <body onload="checkLayout('.flexbox')"> |
| 47 | 44 |
| 48 <script> | 45 <script> |
| 49 function positionAsString(position) | 46 function positionAsString(position) |
| 50 { | 47 { |
| 51 return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] +
'"'; | 48 return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] +
'"'; |
| 52 } | 49 } |
| 53 | 50 |
| 54 var expectations = { | 51 var expectations = { |
| 55 'horizontal-tb': { | 52 'horizontal-tb': { |
| 56 'row': { rtl: [-10, -10], ltr: [0, -10]}, | 53 'row': { rtl: [-10, -10], ltr: [0, -10]}, |
| 57 'row-reverse': { rtl: [0, -10], ltr: [-10, -10]}, | 54 'row-reverse': { rtl: [0, -10], ltr: [-10, -10]}, |
| 58 'column': { rtl: [0, 0], ltr: [-10, 0]}, | 55 'column': { rtl: [0, 0], ltr: [-10, 0]}, |
| 59 'column-reverse': { rtl: [0, -10], ltr: [-10, -10]} | 56 'column-reverse': { rtl: [0, -10], ltr: [-10, -10]} |
| 60 }, | 57 }, |
| 61 'horizontal-bt': { | |
| 62 'row': { rtl: [-10, 0], ltr: [0, 0]}, | |
| 63 'row-reverse': { rtl: [0, 0], ltr: [-10, 0]}, | |
| 64 'column': { rtl: [0, -10], ltr: [-10, -10]}, | |
| 65 'column-reverse': { rtl: [0, 0], ltr: [-10, 0]} | |
| 66 }, | |
| 67 'vertical-lr': { | 58 'vertical-lr': { |
| 68 'row': { rtl: [-10, -10], ltr: [-10, 0]}, | 59 'row': { rtl: [-10, -10], ltr: [-10, 0]}, |
| 69 'row-reverse': { rtl: [-10, 0], ltr: [-10, -10]}, | 60 'row-reverse': { rtl: [-10, 0], ltr: [-10, -10]}, |
| 70 'column': { rtl: [0, 0], ltr: [0, -10]}, | 61 'column': { rtl: [0, 0], ltr: [0, -10]}, |
| 71 'column-reverse': { rtl: [-10, 0], ltr: [-10, -10]} | 62 'column-reverse': { rtl: [-10, 0], ltr: [-10, -10]} |
| 72 }, | 63 }, |
| 73 'vertical-rl': { | 64 'vertical-rl': { |
| 74 'row': { rtl: [0, -10], ltr: [0, 0]}, | 65 'row': { rtl: [0, -10], ltr: [0, 0]}, |
| 75 'row-reverse': { rtl: [0, 0], ltr: [0, -10]}, | 66 'row-reverse': { rtl: [0, 0], ltr: [0, -10]}, |
| 76 'column': { rtl: [-10, 0], ltr: [-10, -10]}, | 67 'column': { rtl: [-10, 0], ltr: [-10, -10]}, |
| 77 'column-reverse': { rtl: [0, 0], ltr: [0, -10]} | 68 'column-reverse': { rtl: [0, 0], ltr: [0, -10]} |
| 78 } | 69 } |
| 79 } | 70 } |
| 80 | 71 |
| 81 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-r
l']; | 72 var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl']; |
| 82 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; | 73 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; |
| 83 var directions = ['ltr', 'rtl']; | 74 var directions = ['ltr', 'rtl']; |
| 84 | 75 |
| 85 writingModes.forEach(function(writingMode) { | 76 writingModes.forEach(function(writingMode) { |
| 86 flexFlows.forEach(function(flexFlow) { | 77 flexFlows.forEach(function(flexFlow) { |
| 87 directions.forEach(function(direction) { | 78 directions.forEach(function(direction) { |
| 88 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlo
w; | 79 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlo
w; |
| 89 | 80 |
| 90 var title = document.createElement('div'); | 81 var title = document.createElement('div'); |
| 91 title.className = 'title'; | 82 title.className = 'title'; |
| 92 title.innerHTML = flexboxClassName; | 83 title.innerHTML = flexboxClassName; |
| 93 document.body.appendChild(title); | 84 document.body.appendChild(title); |
| 94 | 85 |
| 95 var container = document.createElement('div'); | 86 var container = document.createElement('div'); |
| 96 container.innerHTML = '<div class="flexbox align-items-flex-end ' +
flexboxClassName + '">\n' + | 87 container.innerHTML = '<div class="flexbox align-items-flex-end ' +
flexboxClassName + '">\n' + |
| 97 '<div class="flex-none" ' + positionAsString(expectations[writin
gMode][flexFlow][direction]) + '></div><div class="flex-none"></div>\n' + | 88 '<div class="flex-none" ' + positionAsString(expectations[writin
gMode][flexFlow][direction]) + '></div><div class="flex-none"></div>\n' + |
| 98 '</div>'; | 89 '</div>'; |
| 99 | 90 |
| 100 document.body.appendChild(container); | 91 document.body.appendChild(container); |
| 101 }) | 92 }) |
| 102 }) | 93 }) |
| 103 }) | 94 }) |
| 104 </script> | 95 </script> |
| 105 | 96 |
| 106 </body> | 97 </body> |
| 107 </html> | 98 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1419813004:
Remove the "horizontal-bt" value from -webkit-writing-mode (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master