| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <style> | 3 <style> |
| 4 .container { | 4 .container { |
| 5 position: relative; | 5 position: relative; |
| 6 background-color: pink; | 6 background-color: pink; |
| 7 outline: 1px solid red; | 7 outline: 1px solid red; |
| 8 display: inline-block; | 8 display: inline-block; |
| 9 } | 9 } |
| 10 .flexbox { | 10 .flexbox { |
| 11 display: -webkit-flex; | 11 display: flex; |
| 12 background-color: grey; | 12 background-color: grey; |
| 13 width: 100px; | 13 width: 100px; |
| 14 height: 100px; | 14 height: 100px; |
| 15 border-style: solid; | 15 border-style: solid; |
| 16 } | 16 } |
| 17 .flexbox * { | 17 .flexbox * { |
| 18 border-width: 0px; | 18 border-width: 0px; |
| 19 border-style: solid; | 19 border-style: solid; |
| 20 } | 20 } |
| 21 .title { | 21 .title { |
| (...skipping 11 matching lines...) Expand all Loading... |
| 33 .horizontal-bt { | 33 .horizontal-bt { |
| 34 -webkit-writing-mode: horizontal-bt; | 34 -webkit-writing-mode: horizontal-bt; |
| 35 } | 35 } |
| 36 .vertical-rl { | 36 .vertical-rl { |
| 37 -webkit-writing-mode: vertical-rl; | 37 -webkit-writing-mode: vertical-rl; |
| 38 } | 38 } |
| 39 .vertical-lr { | 39 .vertical-lr { |
| 40 -webkit-writing-mode: vertical-lr; | 40 -webkit-writing-mode: vertical-lr; |
| 41 } | 41 } |
| 42 .row { | 42 .row { |
| 43 -webkit-flex-flow: row; | 43 flex-flow: row; |
| 44 } | 44 } |
| 45 .row-reverse { | 45 .row-reverse { |
| 46 -webkit-flex-flow: row-reverse; | 46 flex-flow: row-reverse; |
| 47 } | 47 } |
| 48 .column { | 48 .column { |
| 49 -webkit-flex-flow: column; | 49 flex-flow: column; |
| 50 } | 50 } |
| 51 .column-reverse { | 51 .column-reverse { |
| 52 -webkit-flex-flow: column-reverse; | 52 flex-flow: column-reverse; |
| 53 } | 53 } |
| 54 .physical { | 54 .physical { |
| 55 border-width: 10px 20px 30px 40px; | 55 border-width: 10px 20px 30px 40px; |
| 56 } | 56 } |
| 57 .physical > div { | 57 .physical > div { |
| 58 border-width: 13px 2px 17px 8px; | 58 border-width: 13px 2px 17px 8px; |
| 59 } | 59 } |
| 60 .logical { | 60 .logical { |
| 61 -webkit-border-before-width: 10px; | 61 -webkit-border-before-width: 10px; |
| 62 -webkit-border-after-width: 30px; | 62 -webkit-border-after-width: 30px; |
| (...skipping 173 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 236 | 236 |
| 237 var expectations = (marginType == 'physical') ? physicalExpectat
ions : logicalExpectations; | 237 var expectations = (marginType == 'physical') ? physicalExpectat
ions : logicalExpectations; |
| 238 expectations = expectations[writingMode][direction]; | 238 expectations = expectations[writingMode][direction]; |
| 239 | 239 |
| 240 var container = document.createElement('div'); | 240 var container = document.createElement('div'); |
| 241 container.className = 'container'; | 241 container.className = 'container'; |
| 242 container.setAttribute('data-expected-width', expectations.size[
0]); | 242 container.setAttribute('data-expected-width', expectations.size[
0]); |
| 243 container.setAttribute('data-expected-height', expectations.size
[1]); | 243 container.setAttribute('data-expected-height', expectations.size
[1]); |
| 244 | 244 |
| 245 container.innerHTML = '\n<div class="flexbox ' + flexboxClassNam
e + '" ' + positionAsString(expectations.position) + ' ' + offsetSizeAsString(ex
pectations.size) + '>\n' + | 245 container.innerHTML = '\n<div class="flexbox ' + flexboxClassNam
e + '" ' + positionAsString(expectations.position) + ' ' + offsetSizeAsString(ex
pectations.size) + '>\n' + |
| 246 '<div style="-webkit-flex: 1 auto; height: 20px; width: 20px
;" ' + asString(expectations[flexFlow.replace("-reverse", "")]) + '></div>\n' + | 246 '<div style="flex: 1 auto; height: 20px; width: 20px;" ' + a
sString(expectations[flexFlow.replace("-reverse", "")]) + '></div>\n' + |
| 247 '</div>\n'; | 247 '</div>\n'; |
| 248 | 248 |
| 249 document.body.appendChild(container); | 249 document.body.appendChild(container); |
| 250 }) | 250 }) |
| 251 }) | 251 }) |
| 252 }) | 252 }) |
| 253 }) | 253 }) |
| 254 </script> | 254 </script> |
| 255 </body> | 255 </body> |
| 256 </html> | 256 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
