self-align-safe-unsafe-grid-001-ref.html (3264B)
1 <!DOCTYPE html> 2 <title>Reftest Reference</title> 3 <style> 4 /* Label things */ 5 body > div { 6 display: flow-root; 7 } 8 body > div::before { 9 display: block; 10 content: attr(class); 11 font-size: 10px; 12 margin-top: 10px; 13 } 14 15 /* Test Framework */ 16 .container { 17 border: solid aqua; 18 margin: 10px; 19 float: left; 20 width: 30px; 21 height: 30px; 22 } 23 24 .item { 25 background: orange; 26 width: 100%; 27 } 28 29 /* Test */ 30 .small .item { 31 height: 20px; 32 } 33 .large .item { 34 height: 40px; 35 } 36 37 .small .center 38 { margin-top: 5px } 39 .small .end, 40 .small .self-end, 41 .small .flex-end 42 { margin-top: 10px } 43 .large .center 44 { margin-top: -5px; } 45 .large .end, 46 .large .self-end, 47 .large .flex-end 48 { margin-top: -10px; } 49 .large.safe .item 50 { margin-top: 0; } 51 </style> 52 53 <div class="default small"> 54 <div class="container"> 55 <div class="item normal"></div> 56 </div> 57 <div class="container"> 58 <div class="item center"></div> 59 </div> 60 <div class="container"> 61 <div class="item start"></div> 62 </div> 63 <div class="container"> 64 <div class="item end"></div> 65 </div> 66 <div class="container"> 67 <div class="item self-start"></div> 68 </div> 69 <div class="container"> 70 <div class="item self-end"></div> 71 </div> 72 <div class="container"> 73 <div class="item flex-start"></div> 74 </div> 75 <div class="container"> 76 <div class="item flex-end"></div> 77 </div> 78 </div> 79 80 <div class="default large"> 81 <div class="container"> 82 <div class="item normal"></div> 83 </div> 84 <div class="container"> 85 <div class="item center"></div> 86 </div> 87 <div class="container"> 88 <div class="item start"></div> 89 </div> 90 <div class="container"> 91 <div class="item end"></div> 92 </div> 93 <div class="container"> 94 <div class="item self-start"></div> 95 </div> 96 <div class="container"> 97 <div class="item self-end"></div> 98 </div> 99 <div class="container"> 100 <div class="item flex-start"></div> 101 </div> 102 <div class="container"> 103 <div class="item flex-end"></div> 104 </div> 105 </div> 106 107 <div class="unsafe large"> 108 <div class="container"> 109 <div class="item normal"></div> 110 </div> 111 <div class="container"> 112 <div class="item center"></div> 113 </div> 114 <div class="container"> 115 <div class="item start"></div> 116 </div> 117 <div class="container"> 118 <div class="item end"></div> 119 </div> 120 <div class="container"> 121 <div class="item self-start"></div> 122 </div> 123 <div class="container"> 124 <div class="item self-end"></div> 125 </div> 126 <div class="container"> 127 <div class="item flex-start"></div> 128 </div> 129 <div class="container"> 130 <div class="item flex-end"></div> 131 </div> 132 </div> 133 134 <div class="safe large"> 135 <div class="container"> 136 <div class="item normal"></div> 137 </div> 138 <div class="container"> 139 <div class="item center"></div> 140 </div> 141 <div class="container"> 142 <div class="item start"></div> 143 </div> 144 <div class="container"> 145 <div class="item end"></div> 146 </div> 147 <div class="container"> 148 <div class="item self-start"></div> 149 </div> 150 <div class="container"> 151 <div class="item self-end"></div> 152 </div> 153 <div class="container"> 154 <div class="item flex-start"></div> 155 </div> 156 <div class="container"> 157 <div class="item flex-end"></div> 158 </div> 159 </div>