outline-028-ref.html (5459B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Basic User Interface: Reference test for outline with floatted descendants</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <meta name="flags" content="ahem"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style> 8 .outline-container { 9 width: max-content; 10 margin: 30px 0px; 11 outline: auto; 12 font: 10px/1 Ahem; 13 height: 10px; 14 } 15 16 .inline { 17 display: inline-block; 18 color: lime; 19 } 20 21 span { 22 color: lime; 23 } 24 </style> 25 <p>Test passes if the outline is wrapping all the green boxes.</p> 26 <div style="display: grid; grid-template-columns: repeat(4, 100px);"> 27 <div> 28 <div class="outline-container"> 29 <span>XX</span> 30 </div> 31 <div class="outline-container"> 32 <div class="inline" style="margin-left: 5px;">XX</div> 33 </div> 34 <div class="outline-container"> 35 <div class="inline" style="margin-right: 5px;">X</div><span>X</span> 36 </div> 37 <div class="outline-container" style="width: 20px; background: lime;"> 38 <div class="inline" style="padding-top: 5px; background: white">X</div> 39 </div> 40 <div class="outline-container"> 41 <span>XX</span> 42 </div> 43 <div class="outline-container"> 44 <div class="inline" style="margin: 0px 5px;">X</div><span>X</span> 45 </div> 46 <div class="outline-container" style="width: 20px; background: lime;"> 47 <div class="inline" style="padding-top: 5px; background: white">X</div> 48 </div> 49 <div class="outline-container" style="width: 30px; display: grid; grid: repeat(3, 5px) / repeat(6, 5px);"> 50 <div style="grid-column: 2 / span 2; grid-row: 2 / span 2; background: lime;"></div> 51 <div style="grid-column: 5 / span 2; grid-row: 1 / span 2; background: lime;"></div> 52 </div> 53 </div> 54 <div> 55 <div class="outline-container"> 56 <span>XX</span> 57 </div> 58 <div class="outline-container"> 59 <div class="inline" style="margin-left: 20px;">XX</div> 60 </div> 61 <div class="outline-container"> 62 <div class="inline" style="margin-right: 20px;">X</div><span>X</span> 63 </div> 64 <div class="outline-container" style="width: 20px; display: grid; grid: repeat(3, 10px) / repeat(2, 10px);"> 65 <div style="grid-column: 2; grid-row: 1; background: lime;"></div> 66 <div style="grid-column: 1; grid-row: 3; background: lime;"></div> 67 </div> 68 <div class="outline-container"> 69 <span>XX</span> 70 </div> 71 <div class="outline-container"> 72 <div class="inline" style="margin: 0px 20px;">X</div><span>X</span> 73 </div> 74 <div class="outline-container" style="width: 20px; display: grid; grid: repeat(3, 10px) / repeat(2, 10px);"> 75 <div style="grid-column: 2; grid-row: 1; background: lime;"></div> 76 <div style="grid-column: 1; grid-row: 3; background: lime;"></div> 77 </div> 78 <div class="outline-container" style="width: 60px; height: 60px; display: grid; grid: repeat(6, 10px) / repeat(6, 10px);"> 79 <div style="grid-column: 1; grid-row: 6; background: lime;"></div> 80 <div style="grid-column: 4; grid-row: 3; background: lime;"></div> 81 </div> 82 </div> 83 <div> 84 <div class="outline-container"> 85 <span>XX</span> 86 </div> 87 <div class="outline-container"> 88 <div class="inline" style="padding-left: 5px;">XX</div> 89 </div> 90 <div class="outline-container"> 91 <div class="inline" style="padding-right: 5px;">X</div><span>X</span> 92 </div> 93 <div class="outline-container" style="width: 20px; background: lime;"> 94 <div class="inline" style="padding-top: 5px; background: white">X</div> 95 </div> 96 <div class="outline-container" style="width: 20px; background: lime;"> 97 <div class="inline" style="padding-bottom: 5px; background: white">X</div> 98 </div> 99 <div class="outline-container"> 100 <div class="inline" style="padding: 0px 5px;">X</div><span>X</span> 101 </div> 102 <div class="outline-container" style="width: 20px; background: lime;"> 103 <div class="inline" style="padding: 5px 0px; background: white">X</div> 104 </div> 105 <div class="outline-container" style="width: 30px; background: lime;"> 106 <div class="inline" style="padding: 5px; background: white">X</div> 107 </div> 108 </div> 109 <div> 110 <div class="outline-container"> 111 <span>XX</span> 112 </div> 113 <div class="outline-container"> 114 <div class="inline" style="padding-left: 20px;">XX</div> 115 </div> 116 <div class="outline-container"> 117 <div class="inline" style="padding-right: 20px;">X</div><span>X</span> 118 </div> 119 <div class="outline-container" style="width: 20px; background: lime;"> 120 <div class="inline" style="padding-top: 20px; background: white">X</div> 121 </div> 122 <div class="outline-container" style="width: 20px; background: lime;"> 123 <div class="inline" style="padding-bottom: 20px; background: white">X</div> 124 </div> 125 <div class="outline-container"> 126 <div class="inline" style="padding: 0px 20px;">X</div><span>X</span> 127 </div> 128 <div class="outline-container" style="width: 20px; background: lime;"> 129 <div class="inline" style="padding: 20px 0px; background: white">X</div> 130 </div> 131 <div class="outline-container" style="width: 60px; height: 60px; display: grid; grid: repeat(6, 10px) / repeat(6, 10px);"> 132 <div style="grid-column: 1; grid-row: 6; background: lime;"></div> 133 <div style="grid-column: 4; grid-row: 3; background: lime;"></div> 134 </div> 135 </div> 136 </div>