OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <link href="resources/grid.css" rel="stylesheet"> |
| 5 <script src="../../resources/check-layout.js"></script> |
| 6 <style> |
| 7 body { |
| 8 margin: 0; |
| 9 } |
| 10 |
| 11 .grid { |
| 12 height: 100px; |
| 13 grid-auto-columns: 1fr; |
| 14 margin-bottom: 20px; |
| 15 position: relative; |
| 16 -webkit-writing-mode: vertical-rl; |
| 17 -webkit-text-orientation: sideways-right; |
| 18 } |
| 19 |
| 20 .itemsBaseline { |
| 21 align-items: baseline; |
| 22 } |
| 23 |
| 24 .grid :nth-child(1) { background-color: blue; } |
| 25 .grid :nth-child(2) { background-color: green; } |
| 26 .grid :nth-child(3) { background-color: red; } |
| 27 .grid :nth-child(4) { background-color: yellow; } |
| 28 .grid :nth-child(5) { background-color: purple; } |
| 29 .grid :nth-child(6) { background-color: orange; } |
| 30 .grid :nth-child(7) { background-color: lime; } |
| 31 .grid :nth-child(8) { background-color: lightblue; } |
| 32 .grid :nth-child(9) { background-color: darkred; } |
| 33 .grid :nth-child(10) { background-color: gold; } |
| 34 .grid :nth-child(11) { background-color: salmon; } |
| 35 |
| 36 .firstRowThirdColumn { |
| 37 grid-row: 1; |
| 38 grid-column: 3; |
| 39 } |
| 40 .firstRowFourthColumn { |
| 41 grid-row: 1; |
| 42 grid-column: 4; |
| 43 } |
| 44 .firstRowFifthColumn { |
| 45 grid-row: 1; |
| 46 grid-column: 5; |
| 47 } |
| 48 .grid > div { |
| 49 min-width: 0px; |
| 50 } |
| 51 </style> |
| 52 </head> |
| 53 <body onload="checkLayout('.grid')"> |
| 54 |
| 55 <div class="grid"> |
| 56 <div data-expected-width="20" data-offset-x="70" class="firstRowFirstColumn"
style="align-self: baseline; width: 20px;"></div> |
| 57 <div data-expected-width="10" data-offset-x="70" class="firstRowSecondColumn
" style="align-self: baseline; width: 10px; margin: 0 20px 0 10px;"></div> |
| 58 <div data-expected-width="10" data-offset-x="70" class="firstRowThirdColumn"
style="align-self: baseline; width: 10px; margin: 0 20px 0 0;"></div> |
| 59 <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn
" style="width: 100px;"></div> |
| 60 </div> |
| 61 |
| 62 <div class="grid"> |
| 63 <div id="baseline1" class="firstRowFirstColumn" style="align-self: baseline">a
hem</div> |
| 64 <div id="baseline2" class="firstRowSecondColumn-one" style="align-self: baseli
ne"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"><
/div> |
| 65 <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn" s
tyle="align-self: center"><img src="../../fast/replaced/resources/1x1-blue.png"
style="width: 50px; vertical-align: middle"></div> |
| 66 <div id="baseline3" data-expected-width="50" class="firstRowFourthColumn" styl
e="align-self: baseline"><img src="../../fast/replaced/resources/1x1-blue.png" s
tyle="width: 50px; vertical-align: middle"></div> |
| 67 <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" s
tyle="width: 100px;"></div> |
| 68 </div> |
| 69 |
| 70 <div class="grid"> |
| 71 <div id="baseline4" class="firstRowFirstColumn" style="align-self: baseline">a
hem</div> |
| 72 <div id="baseline5" class="firstRowSecondColumn" style="align-self: baseline">
<br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"><
/div> |
| 73 <div data-expected-width="50" data-offset-x="50" class="firstRowThirdColumn" s
tyle="align-self: baseline"><img src="../../fast/replaced/resources/1x1-blue.png
" style="width: 50px; vertical-align: middle"></div> |
| 74 <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn"
style="width: 100px;"></div> |
| 75 </div> |
| 76 |
| 77 <div class="grid" style="-webkit-writing-mode: vertical-lr"> |
| 78 <div id="baseline6" class="firstRowFirstColumn" style="align-self: baseline">a
hem</div> |
| 79 <div id="baseline7" class="firstRowSecondColumn" style="align-self: baseline">
<img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div
> |
| 80 <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn" s
tyle="align-self: center"><img src="../../fast/replaced/resources/1x1-blue.png"
style="width: 50px; vertical-align: middle"></div> |
| 81 <div data-expected-width="50" data-offset-x="0" class="firstRowFourthColumn" s
tyle="align-self: baseline"><img src="../../fast/replaced/resources/1x1-blue.png
" style="width: 50px; vertical-align: middle"></div> |
| 82 <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" s
tyle="width: 100px;"></div> |
| 83 </div> |
| 84 |
| 85 <div class="grid" style="-webkit-writing-mode: vertical-lr"> |
| 86 <div id="baseline8" class="firstRowFirstColumn" style="align-self: baseline">a
hem</div> |
| 87 <div id="baseline9" class="firstRowSecondColumn" style="align-self: baseline">
<br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"><
/div> |
| 88 <div data-expected-width="50" data-offset-x="0" class="firstRowThirdColumn" st
yle="align-self: baseline"><img src="../../fast/replaced/resources/1x1-blue.png"
style="width: 50px; vertical-align: middle"></div> |
| 89 <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn"
style="width: 100px;"></div> |
| 90 </div> |
| 91 |
| 92 <div id="results"></div> |
| 93 |
| 94 <script> |
| 95 function additionalBaselineChecks() |
| 96 { |
| 97 var baseline1 = document.getElementById("baseline1"); |
| 98 var baseline2 = document.getElementById("baseline2"); |
| 99 var baseline3 = document.getElementById("baseline3"); |
| 100 logIfFalse(baseline1.offsetLeft == baseline2.offsetLeft, |
| 101 "baseline1 and baseline2 should have the same baseline."); |
| 102 logIfFalse(baseline3.offsetLeft + baseline3.offsetWidth > 75, |
| 103 "baseline3 should be above the center align-itemsed item."); |
| 104 |
| 105 var baseline4 = document.getElementById("baseline4"); |
| 106 var baseline5 = document.getElementById("baseline5"); |
| 107 logIfFalse(baseline4.offsetLeft + baseline4.offsetWidth == baseline5.offsetL
eft + baseline5.offsetWidth, |
| 108 "baseline4 and baseline5 should be right aligned with each other.
"); |
| 109 logIfFalse(baseline4.offsetLeft + baseline4.offsetWidth < 100, |
| 110 "baseline4 and baseline5 should be below baseline6."); |
| 111 |
| 112 var baseline6 = document.getElementById("baseline6"); |
| 113 var baseline7 = document.getElementById("baseline7"); |
| 114 logIfFalse(baseline6.offsetLeft == baseline7.offsetLeft, |
| 115 "baseline6 and baseline7 should have the same baseline."); |
| 116 |
| 117 var baseline8 = document.getElementById("baseline8"); |
| 118 var baseline9 = document.getElementById("baseline9"); |
| 119 logIfFalse(baseline8.offsetLeft == baseline9.offsetLeft, |
| 120 "baseline8 and baseline9 should be left aligned with each other."
); |
| 121 |
| 122 } |
| 123 |
| 124 function logIfFalse(condition, msg) |
| 125 { |
| 126 if (!condition) |
| 127 document.getElementById("results").innerHTML += msg + "<br/>"; |
| 128 } |
| 129 |
| 130 additionalBaselineChecks(); |
| 131 </script> |
| 132 |
| 133 </body> |
| 134 </html> |
OLD | NEW |