outline-028.html (5016B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Basic User Interface: outline with floatted descendants</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-ui/#outline-props"> 6 <link rel="match" href="reference/outline-028-ref.html"> 7 <meta name="assert" content="Test checks that 'auto' outline works as expected in an element with floatted descendants with different margins and paddings."> 8 <meta name="flags" content="ahem"> 9 <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-4" /> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 <style> 12 .outline-container { 13 width: max-content; 14 margin: 30px 0px; 15 outline: auto; 16 font: 10px/1 Ahem; 17 } 18 19 .float { 20 float: left; 21 color: lime; 22 } 23 24 span { 25 color: lime; 26 } 27 </style> 28 <p>Test passes if the outline is wrapping all the green boxes.</p> 29 <div style="display: grid; grid-template-columns: repeat(4, 100px);"> 30 <div> 31 <div class="outline-container"> 32 <div class="float">X</div> 33 <span>X</span> 34 </div> 35 <div class="outline-container"> 36 <div class="float" style="margin-left: 5px;">X</div> 37 <span>X</span> 38 </div> 39 <div class="outline-container"> 40 <div class="float" style="margin-right: 5px;">X</div> 41 <span>X</span> 42 </div> 43 <div class="outline-container"> 44 <div class="float" style="margin-top: 5px;">X</div> 45 <span>X</span> 46 </div> 47 <div class="outline-container"> 48 <div class="float" style="margin-bottom: 5px;">X</div> 49 <span>X</span> 50 </div> 51 <div class="outline-container"> 52 <div class="float" style="margin: 0px 5px;">X</div> 53 <span>X</span> 54 </div> 55 <div class="outline-container"> 56 <div class="float" style="margin: 5px 0px;">X</div> 57 <span>X</span> 58 </div> 59 <div class="outline-container"> 60 <div class="float" style="margin: 5px;">X</div> 61 <span>X</span> 62 </div> 63 </div> 64 <div> 65 <div class="outline-container"> 66 <div class="float">X</div> 67 <span>X</span> 68 </div> 69 <div class="outline-container"> 70 <div class="float" style="margin-left: 20px;">X</div> 71 <span>X</span> 72 </div> 73 <div class="outline-container"> 74 <div class="float" style="margin-right: 20px;">X</div> 75 <span>X</span> 76 </div> 77 <div class="outline-container"> 78 <div class="float" style="margin-top: 20px;">X</div> 79 <span>X</span> 80 </div> 81 <div class="outline-container"> 82 <div class="float" style="margin-bottom: 20px;">X</div> 83 <span>X</span> 84 </div> 85 <div class="outline-container"> 86 <div class="float" style="margin: 0px 20px;">X</div> 87 <span>X</span> 88 </div> 89 <div class="outline-container"> 90 <div class="float" style="margin: 20px 0px;">X</div> 91 <span>X</span> 92 </div> 93 <div class="outline-container"> 94 <div class="float" style="margin: 20px;">X</div> 95 <span>X</span> 96 </div> 97 </div> 98 <div> 99 <div class="outline-container"> 100 <div class="float">X</div> 101 <span>X</span> 102 </div> 103 <div class="outline-container"> 104 <div class="float" style="padding-left: 5px;">X</div> 105 <span>X</span> 106 </div> 107 <div class="outline-container"> 108 <div class="float" style="padding-right: 5px;">X</div> 109 <span>X</span> 110 </div> 111 <div class="outline-container"> 112 <div class="float" style="padding-top: 5px;">X</div> 113 <span>X</span> 114 </div> 115 <div class="outline-container"> 116 <div class="float" style="padding-bottom: 5px;">X</div> 117 <span>X</span> 118 </div> 119 <div class="outline-container"> 120 <div class="float" style="padding: 0px 5px;">X</div> 121 <span>X</span> 122 </div> 123 <div class="outline-container"> 124 <div class="float" style="padding: 5px 0px;">X</div> 125 <span>X</span> 126 </div> 127 <div class="outline-container"> 128 <div class="float" style="padding: 5px;">X</div> 129 <span>X</span> 130 </div> 131 </div> 132 <div> 133 <div class="outline-container"> 134 <div class="float">X</div> 135 <span>X</span> 136 </div> 137 <div class="outline-container"> 138 <div class="float" style="padding-left: 20px;">X</div> 139 <span>X</span> 140 </div> 141 <div class="outline-container"> 142 <div class="float" style="padding-right: 20px;">X</div> 143 <span>X</span> 144 </div> 145 <div class="outline-container"> 146 <div class="float" style="padding-top: 20px;">X</div> 147 <span>X</span> 148 </div> 149 <div class="outline-container"> 150 <div class="float" style="padding-bottom: 20px;">X</div> 151 <span>X</span> 152 </div> 153 <div class="outline-container"> 154 <div class="float" style="padding: 0px 20px;">X</div> 155 <span>X</span> 156 </div> 157 <div class="outline-container"> 158 <div class="float" style="padding: 20px 0px;">X</div> 159 <span>X</span> 160 </div> 161 <div class="outline-container"> 162 <div class="float" style="padding: 20px;">X</div> 163 <span>X</span> 164 </div> 165 </div> 166 </div>