px-reference.html (7558B)
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3 <head> 4 <title>The Second Acid Test (pixel-for-pixel reference version)</title> 5 <style type="text/css"> 6 * 7 { 8 margin: 0; 9 padding: 0; 10 } 11 12 html 13 { 14 font: 12px sans-serif; 15 16 overflow: hidden; 17 18 color: red; 19 background: white; 20 } 21 22 #top 23 { 24 font: 2em / 24px sans-serif; 25 26 margin: 2em 3.5em 0; 27 28 text-align: left; 29 white-space: pre; 30 31 color: navy; 32 } 33 34 .picture 35 { 36 margin: 3em 1em 1em 6em; 37 } 38 39 .line 40 { 41 height: 1em; 42 43 border: 0 solid black; 44 background: yellow; 45 } 46 47 .one 48 { 49 width: 0; 50 margin-left: 5em; 51 52 border-width: 0 2em; 53 } 54 55 .two 56 { 57 width: 4em; 58 margin-left: 3em; 59 60 border-width: 0 2em; 61 } 62 63 .three 64 { 65 width: 8em; 66 margin-left: 2em; 67 68 border-width: 0 1em; 69 } 70 71 /* the eyes, in all their three-layer glory 72 73 these need to appear with both background layers as on hidpi displays 74 the two background layers don't just create a solid yellow background */ 75 .eyes 76 { 77 position: relative; 78 79 width: 12em; 80 height: 2em; 81 margin-left: 1em; 82 83 background: red; 84 } 85 86 .eyes .lower 87 { 88 position: absolute; 89 z-index: 1; /* redundant, but make stacking explicit */ 90 91 width: 9em; 92 height: 2em; 93 margin-left: 1em; 94 95 border-left: solid 1em yellow; 96 background: fixed url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAABnRSTlMAAAAAAABupgeRAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAAEUlEQVR42mP4%2F58BCv7%2FZwAAHfAD%2FabwPj4AAAAASUVORK5CYII%3D'); 97 } 98 99 .eyes .upper 100 { 101 position: absolute; 102 z-index: 2; /* redundant, but make stacking explicit */ 103 104 width: 10em; 105 height: 2em; 106 margin-left: 0; 107 108 border: solid 1em black; 109 border-width: 0 1em; 110 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAABnRSTlMAAAAAAABupgeRAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAAEUlEQVR42mP4%2F58BCv7%2FZwAAHfAD%2FabwPj4AAAAASUVORK5CYII%3D') fixed 1px 0; 111 } 112 113 .eyes .img 114 { 115 position: absolute; 116 z-index: 3; /* redundant, but make stacking explicit */ 117 118 width: 8em; 119 height: 2em; 120 margin-left: 2em; 121 122 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAFy7sgCAAAGsUlEQVRo3u2ZbWwcZxHHf3s%2B7LNbO3ZjXBtowprGODRX0qpNQCjmJKuVKhMl1P2AkCwhFOIKkCBSm9IXavGFKAixIAECwkmWo5MrhRI3Ub40IEwQgp6aIDg3Cd6eEqyIHEteah%2B1E69vhw%2BZtTaX8704ZzkKjHS6271nZ56ZZ%2BY%2F%2F%2BdZKF%2FCwYshx3EkkggLsD1v4FQkEZZYLCbAKyG9%2Ba9EIsG6hnUAf8x74K3aUC3j4%2BM54HcsR2oAIomwZOezkv%2FnSHpYNh%2BNCmAE7xv94zvFdd1bHsjMZmQkPSxAJP%2B%2FfuBLwK54PC7JZFKAVJmzXLBt2w%2FMvcDLwIb8QS8CeJ4nkURYIomw7J%2FYJ8BvSiiXptGGxWds2%2Fa9%2Bnaxh%2BYAD%2Bgt04NDgABTpQY2cvvSFLzw86gWeBVwC8SzlOSv2YeBPfmDBoBHgKmR9LBEEmHZfDTqGykqfkUE0nA78BzQGfSgUeP3wNeTXwXg7MwZDhw4UHL6ra2ti79%2FOvljgG8AZ4H64Lhm4MvAocxsRppGG%2FxcXihlwLIs6R%2FfKV2HO%2F26uA94pdDYUKUZUU7W1RQYXA98Gnhaf5%2FXWX0HeAHYoQonqa4sZSOsSWMCWeC9Yko%2BCQwBe4E6oNc0Tc91XTl1%2BaTsn9gnI%2Blhyc5nZWxsrBIkKSbl2tiic3tW53YDEwOKaoFBrcOfqKee53lG9xsPMjV784r%2F4lO%2FpPvyJ9iyZcuvFSaXK5XYeAZ4CDgGvB3MS4B54LQuWYPeuy4iRFsevsXqpuYoqVQKIH2bK1CuDQNo11o4XUzh%2FcDWYIe1LEtyuZx4niee54njOGKapgfsqlL%2Bl2OjEXg8nxrc1dJ0h3hbtL%2BGCtz7KPBF4CuBe9uB15VafE8hr9qylI3HgG8C2%2FK7VyHZoJj7MrBRm30qFotJMpkU27YlHo%2F7Ha5a%2BV%2FKRkSJ4KuKRLVLKapTjB1SzAVIjY2NSXY%2BKyPpYdk%2FsU9OXT4pruv6BdZbBQfKsVGnvWlIe1VB6VQO8JxC1vZYLCbZ%2BaxsPhpdZDyRRFhG0sPiOE6ldKBg2lRg4xF1YCDIIIKN7DGgD3gH%2BBXwejKZfPrs2tPs%2FvPN2bKuYR1nd7xLKBSSJeqoXKnERjPwNWAG%2BLn2rZuM%2B4Tpml6vaWlp4eLcxVusZq5lCgVgOVKJjRqdX86ffL4D5wIoZACnTpw4wRMdT96i%2FImOJxERAs4uVyqxUacF%2FPdiCj%2BjdRBRGFtwXVdG0sPSdbhTmkYbpH98p2RmM2JZlig1vl0GWo4NQ%2Fn%2Bs5pKRXfwjweaxy7TND3HcRZbfC6X8xVPVQlGy7WxVWlO5XRXFXm6EZmrQuSXYyPE3SiVoEhE6Wyr0u2rumO6zv%2B21AFdQAswC1wCMuUCXCmyWQus103Qg8qlDO0lxwOb%2Fl4FiK3AB3VS%2FuKKLtK%2FgbeAnwG%2FvUODuRw%2FFrR0H1UC75fwu8oJ%2FhFsW5VIG%2FBUgEIN6Y65O4AHu4Ap0zQ9y7LEcZyb9lRBUHQcRyzL8unZVBW5bFWAvAp%2BhDQ2g4F47dUYtlU6obXA54DnVdFLekjUGGifh4AFy7LEdV3xj3X9I66m0QZpGm2QrsOd0j%2B%2BU0bSw5KZzYjrun6HWlAd961i4FfCj0aN1Usau%2Bc1lmuXPFwvAEumUut7tQQvAb%2FXb%2FT0bCAej9cODg7yt%2Bm%2F8q2%2F7OUHZ76PnZ1k2p0mJzlykmPancbOTnL0whHs7CQfb%2B5mx2d3sH79%2BtCRI0c6FeaOr9ICrIQfLvA%2B8BGNXxi4R6HrisJVUWrxAVW2oMFf0Aczim8o3kV6enowDIPjF9%2Fk%2BMU3S3rrjzMMg56eHr%2BxP7qKFbASfojG6kpeDGs1tiW53RxwWT%2Bin5q8w4xpQK5evQpAR30H7ZH2khNvj7TTUd8BgD4rqmu1ZKX8qNeY%2BfHz4zlXDgT5E8tpCTUq7XSBC4Euv8227TV9fX1E73%2BYtvo27BmbS9cvFVTY3bSRFza9yOcf6Gfmygy7d%2B%2Fm%2FPnzF4DvrsBLhnJlJfwIKXxv1PheAE4qK6p4H9AGbNKTuhngBPBPXYRe4IemaT5kWZbR19fHNbmGnZ1k4r3U4glDR30Hm5qjbGjsImJEOHbsGHv27JFz5869o0eFq01Jq%2BmHAXwI6FFKagMTgHM7GzFDS%2BoeLSMv7zjzC9x4Y7gxFovVDAwMEI1GaWlpWSzRVCrFwYMH%2FXfxZ4AfAa8B%2F7lDaGg1%2FQgp43lfK0yqtRMuJa3ceKe5DfgYsCYAZ2ngD8CfAkzqTpW7xY%2F%2FSznyX%2FVeUb2kVmX4AAAAAElFTkSuQmCC'); 123 } 124 125 /* lines six to nine are the nose 126 127 (note these are scarcely changed from the test as border anti-aliasing 128 quickly differs) */ 129 .nose 130 { 131 width: 12em; 132 height: 4em; 133 margin-left: 0; 134 135 border-width: 0 1em; 136 } 137 138 .nose > div 139 { 140 height: 0; 141 padding: 1em 1em 3em; 142 143 background: yellow; 144 } 145 146 .nose div div 147 { 148 width: 2em; 149 height: 2em; 150 margin-left: 4em; 151 152 background: red; 153 } 154 155 .nose div:hover div:before 156 { 157 border-bottom-color: blue; 158 } 159 160 .nose div:hover div:after 161 { 162 border-top-color: blue; 163 } 164 165 .nose div div:before 166 { 167 display: block; 168 169 height: 0; 170 171 content: ''; 172 173 border-width: 1em; 174 border-style: none solid solid; 175 border-color: red yellow black yellow; 176 } 177 178 .nose div div:after 179 { 180 display: block; 181 182 height: 0; 183 184 content: ''; 185 186 border-width: 1em; 187 border-style: solid solid none; 188 border-color: black yellow red yellow; 189 } 190 191 /* lines ten and eleven are the smile */ 192 .ten 193 { 194 width: 10em; 195 margin-left: 1em; 196 197 border-width: 0 1em; 198 } 199 200 .ten div 201 { 202 width: 6em; 203 height: 1em; 204 margin-left: 1em; 205 206 border: solid black; 207 border-width: 0 1em; 208 background: transparent; 209 } 210 211 .eleven 212 { 213 width: 10em; 214 margin-left: 1em; 215 216 border-width: 0 1em; 217 } 218 219 .eleven div 220 { 221 width: 6em; 222 height: 1em; 223 margin-left: 2em; 224 225 background: black; 226 } 227 228 /* bottom of the face */ 229 .twelve 230 { 231 width: 8em; 232 margin-left: 2em; 233 234 border-width: 0 1em; 235 } 236 237 .thirteen 238 { 239 width: 4em; 240 margin-left: 3em; 241 242 border-width: 0 2em; 243 } 244 245 .fourteen 246 { 247 width: 0; 248 margin-left: 5em; 249 250 border-width: 0 2em; 251 } 252 </style> 253 </head> 254 <body> 255 <h2 id="top">Hello World!</h2> 256 <div class="picture"> 257 <div class="line one"></div> 258 <div class="line two"></div> 259 <div class="line three"></div> 260 261 <div class="eyes"><div class=lower></div><div class=upper></div><div class=img></div></div> 262 263 <div class="line nose"><div><div></div></div></div> 264 265 <div class="line ten"><div></div></div> 266 <div class="line eleven"><div></div></div> 267 <div class="line twelve"></div> 268 <div class="line thirteen"></div> 269 <div class="line fourteen"></div> 270 </div> 271 </body> 272 </html>