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