outline-027-ref.html (4660B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Basic User Interface: Reference test for outline with padding</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 margin: 10px 0px; 10 width: 10px; 11 height: 10px; 12 outline: auto; 13 font: 10px/1 Ahem; 14 } 15 16 .outline-container > div { 17 color: lime; 18 } 19 </style> 20 <p>Test passes if the outline is wrapping all the green boxes.</p> 21 <div style="display: grid; grid-template-columns: repeat(6, 100px);"> 22 <div> 23 <div class="outline-container" style="padding-left: 5px;"> 24 <div>XX</div> 25 </div> 26 <div class="outline-container" style="padding-right: 5px;"> 27 <div>XX</div> 28 </div> 29 <div class="outline-container" style="padding-top: 5px;"> 30 <div>XX</div> 31 </div> 32 <div class="outline-container" style="padding-bottom: 5px;"> 33 <div>XX</div> 34 </div> 35 <div class="outline-container" style="padding: 0px 5px;"> 36 <div>XX</div> 37 </div> 38 <div class="outline-container" style="padding: 5px 0px;"> 39 <div>XX</div> 40 </div> 41 <div class="outline-container" style="padding: 5px;"> 42 <div>XX</div> 43 </div> 44 </div> 45 <div> 46 <div class="outline-container" style="padding-left: 20px;"> 47 <div>XX</div> 48 </div> 49 <div class="outline-container" style="padding-right: 20px;"> 50 <div>XX</div> 51 </div> 52 <div class="outline-container" style="padding-top: 20px;"> 53 <div>XX</div> 54 </div> 55 <div class="outline-container" style="padding-bottom: 20px;"> 56 <div>XX</div> 57 </div> 58 <div class="outline-container" style="padding: 0px 20px;"> 59 <div>XX</div> 60 </div> 61 <div class="outline-container" style="padding: 20px 0px;"> 62 <div>XX</div> 63 </div> 64 <div class="outline-container" style="padding: 20px;"> 65 <div>XX</div> 66 </div> 67 </div> 68 <div> 69 <div class="outline-container" style="padding-left: 5px;"> 70 <div>XX</div> 71 </div> 72 <div class="outline-container" style="padding-right: 5px;"> 73 <div>XX</div> 74 </div> 75 <div class="outline-container" style="padding-top: 5px;"> 76 <div>XX</div> 77 </div> 78 <div class="outline-container" style="padding-bottom: 5px;"> 79 <div>XX</div> 80 </div> 81 <div class="outline-container" style="padding: 0px 5px;"> 82 <div>XX</div> 83 </div> 84 <div class="outline-container" style="padding: 5px 0px;"> 85 <div>XX</div> 86 </div> 87 <div class="outline-container" style="padding: 5px;"> 88 <div>XX</div> 89 </div> 90 </div> 91 <div> 92 <div class="outline-container" style="padding-left: 20px;"> 93 <div>XX</div> 94 </div> 95 <div class="outline-container" style="padding-right: 20px;"> 96 <div>XX</div> 97 </div> 98 <div class="outline-container" style="padding-top: 20px;"> 99 <div>XX</div> 100 </div> 101 <div class="outline-container" style="padding-bottom: 20px;"> 102 <div>XX</div> 103 </div> 104 <div class="outline-container" style="padding: 0px 20px;"> 105 <div>XX</div> 106 </div> 107 <div class="outline-container" style="padding: 20px 0px;"> 108 <div>XX</div> 109 </div> 110 <div class="outline-container" style="padding: 20px;"> 111 <div>XX</div> 112 </div> 113 </div> 114 <div> 115 <div class="outline-container" style="padding-left: 5px;"> 116 <div>XX</div> 117 </div> 118 <div class="outline-container" style="padding-right: 5px;"> 119 <div>XX</div> 120 </div> 121 <div class="outline-container" style="padding-top: 5px;"> 122 <div>XX</div> 123 </div> 124 <div class="outline-container" style="padding-bottom: 5px;"> 125 <div>XX</div> 126 </div> 127 <div class="outline-container" style="padding: 0px 5px;"> 128 <div>XX</div> 129 </div> 130 <div class="outline-container" style="padding: 5px 0px;"> 131 <div>XX</div> 132 </div> 133 <div class="outline-container" style="padding: 5px;"> 134 <div>XX</div> 135 </div> 136 </div> 137 <div> 138 <div class="outline-container" style="padding-left: 20px;"> 139 <div>XX</div> 140 </div> 141 <div class="outline-container" style="padding-right: 20px;"> 142 <div>XX</div> 143 </div> 144 <div class="outline-container" style="padding-top: 20px;"> 145 <div>XX</div> 146 </div> 147 <div class="outline-container" style="padding-bottom: 20px;"> 148 <div>XX</div> 149 </div> 150 <div class="outline-container" style="padding: 0px 20px;"> 151 <div>XX</div> 152 </div> 153 <div class="outline-container" style="padding: 20px 0px;"> 154 <div>XX</div> 155 </div> 156 <div class="outline-container" style="padding: 20px;"> 157 <div>XX</div> 158 </div> 159 </div> 160 </div>