Wed, 31 Dec 2014 13:27:57 +0100
Ignore runtime configuration files generated during quality assurance.
michael@0 | 1 | <!DOCTYPE HTML> |
michael@0 | 2 | <html> |
michael@0 | 3 | <!-- |
michael@0 | 4 | https://bugzilla.mozilla.org/show_bug.cgi?id=365932 |
michael@0 | 5 | --> |
michael@0 | 6 | <head> |
michael@0 | 7 | <title>Test for Bug 365932</title> |
michael@0 | 8 | <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> |
michael@0 | 9 | <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> |
michael@0 | 10 | <style> |
michael@0 | 11 | #content { |
michael@0 | 12 | width: 800px; |
michael@0 | 13 | height: 800px; |
michael@0 | 14 | padding: 0 200px; |
michael@0 | 15 | border-width: 0 200px; |
michael@0 | 16 | border-style: solid; |
michael@0 | 17 | border-color: transparent |
michael@0 | 18 | } |
michael@0 | 19 | #content2 { |
michael@0 | 20 | display: none; |
michael@0 | 21 | } |
michael@0 | 22 | #content > div, #content2 > div { |
michael@0 | 23 | width: 400px; |
michael@0 | 24 | height: 400px; |
michael@0 | 25 | padding: 0 100px; |
michael@0 | 26 | border-width: 0 100px; |
michael@0 | 27 | border-style: solid; |
michael@0 | 28 | border-color: transparent |
michael@0 | 29 | } |
michael@0 | 30 | #content > div.auto, #content2 > div.auto { |
michael@0 | 31 | width: auto; height: auto; |
michael@0 | 32 | padding: 0 100px; |
michael@0 | 33 | border-width: 0 80px; |
michael@0 | 34 | } |
michael@0 | 35 | </style> |
michael@0 | 36 | </head> |
michael@0 | 37 | <body> |
michael@0 | 38 | <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=365932">Mozilla Bug 365932</a> |
michael@0 | 39 | <p id="display"></p> |
michael@0 | 40 | <div id="content"> |
michael@0 | 41 | <div id="indent1" style="text-indent: 400px"></div> |
michael@0 | 42 | <div id="indent2" style="text-indent: 50%"></div> |
michael@0 | 43 | |
michael@0 | 44 | <div id="widthheight-1" class="auto"></div> |
michael@0 | 45 | |
michael@0 | 46 | <div id="minwidth1-1" style="min-width: 200px"></div> |
michael@0 | 47 | <div id="minwidth1-2" style="min-width: 25%"></div> |
michael@0 | 48 | <div id="minwidth2-1" style="min-width: 600px"></div> |
michael@0 | 49 | <div id="minwidth2-2" style="min-width: 75%"></div> |
michael@0 | 50 | <div id="minwidth3-1" class="auto" style="min-width: 200px"></div> |
michael@0 | 51 | <div id="minwidth3-2" class="auto" style="min-width: 25%"></div> |
michael@0 | 52 | <div id="minwidth4-1" class="auto" style="min-width: 600px"></div> |
michael@0 | 53 | <div id="minwidth4-2" class="auto" style="min-width: 75%"></div> |
michael@0 | 54 | |
michael@0 | 55 | <div id="maxwidth1-1" style="max-width: 320px"></div> |
michael@0 | 56 | <div id="maxwidth1-2" style="max-width: 40%"></div> |
michael@0 | 57 | <div id="maxwidth2-1" style="max-width: 480px"></div> |
michael@0 | 58 | <div id="maxwidth2-2" style="max-width: 60%"></div> |
michael@0 | 59 | <div id="maxwidth3-1" class="auto" style="max-width: 320px"></div> |
michael@0 | 60 | <div id="maxwidth3-2" class="auto" style="max-width: 40%"></div> |
michael@0 | 61 | <div id="maxwidth4-1" class="auto" style="max-width: 480px"></div> |
michael@0 | 62 | <div id="maxwidth4-2" class="auto" style="max-width: 60%"></div> |
michael@0 | 63 | |
michael@0 | 64 | <div id="minmaxwidth1-1" style="min-width: 200px; max-width: 320px"></div> |
michael@0 | 65 | <div id="minmaxwidth1-2" style="min-width: 200px; max-width: 40%"></div> |
michael@0 | 66 | <div id="minmaxwidth2-1" style="min-width: 25%; max-width: 320px"></div> |
michael@0 | 67 | <div id="minmaxwidth2-2" style="min-width: 25%; max-width: 40%"></div> |
michael@0 | 68 | <div id="minmaxwidth3-1" style="min-width: 600px; max-width: 320px"></div> |
michael@0 | 69 | <div id="minmaxwidth3-2" style="min-width: 600px; max-width: 40%"></div> |
michael@0 | 70 | <div id="minmaxwidth4-1" style="min-width: 75%; max-width: 320px"></div> |
michael@0 | 71 | <div id="minmaxwidth4-2" style="min-width: 75%; max-width: 40%"></div> |
michael@0 | 72 | <div id="minmaxwidth5-1" |
michael@0 | 73 | style="display:none; min-width: 200px; max-width: 320px"></div> |
michael@0 | 74 | <div id="minmaxwidth6-1" |
michael@0 | 75 | style="display: none; min-width: 25%; max-width: 320px"></div> |
michael@0 | 76 | <div id="minmaxwidth7-1" |
michael@0 | 77 | style="display: none; min-width: 600px; max-width: 320px"></div> |
michael@0 | 78 | <div id="minmaxwidth7-2" |
michael@0 | 79 | style="display: none; min-width: 600px; max-width: 40%"></div> |
michael@0 | 80 | <div id="minmaxwidth8-1" class="auto" |
michael@0 | 81 | style="min-width: 200px; max-width: 320px"></div> |
michael@0 | 82 | <div id="minmaxwidth8-2" class="auto" |
michael@0 | 83 | style="min-width: 200px; max-width: 40%"></div> |
michael@0 | 84 | <div id="minmaxwidth9-1" class="auto" |
michael@0 | 85 | style="min-width: 25%; max-width: 320px"></div> |
michael@0 | 86 | <div id="minmaxwidth9-2" class="auto" |
michael@0 | 87 | style="min-width: 25%; max-width: 40%"></div> |
michael@0 | 88 | <div id="minmaxwidth10-1" class="auto" |
michael@0 | 89 | style="min-width: 600px; max-width: 320px"></div> |
michael@0 | 90 | <div id="minmaxwidth10-2" class="auto" |
michael@0 | 91 | style="min-width: 600px; max-width: 40%"></div> |
michael@0 | 92 | <div id="minmaxwidth11-1" class="auto" |
michael@0 | 93 | style="min-width: 75%; max-width: 320px"></div> |
michael@0 | 94 | <div id="minmaxwidth11-2" class="auto" |
michael@0 | 95 | style="min-width: 75%; max-width: 40%"></div> |
michael@0 | 96 | |
michael@0 | 97 | <div id="minheight1-1" style="min-height: 200px"></div> |
michael@0 | 98 | <div id="minheight1-2" style="min-height: 25%"></div> |
michael@0 | 99 | <div id="minheight2-1" style="min-height: 600px"></div> |
michael@0 | 100 | <div id="minheight2-2" style="min-height: 75%"></div> |
michael@0 | 101 | <div id="minheight3-1" class="auto" style="min-height: 200px"></div> |
michael@0 | 102 | <div id="minheight3-2" class="auto" style="min-height: 25%"></div> |
michael@0 | 103 | <div id="minheight4-1" class="auto" style="min-height: 600px"></div> |
michael@0 | 104 | <div id="minheight4-2" class="auto" style="min-height: 75%"></div> |
michael@0 | 105 | |
michael@0 | 106 | <div id="maxheight1-1" style="max-height: 320px"></div> |
michael@0 | 107 | <div id="maxheight1-2" style="max-height: 40%"></div> |
michael@0 | 108 | <div id="maxheight2-1" style="max-height: 480px"></div> |
michael@0 | 109 | <div id="maxheight2-2" style="max-height: 60%"></div> |
michael@0 | 110 | <div id="maxheight3-1" class="auto" style="max-height: 320px"></div> |
michael@0 | 111 | <div id="maxheight3-2" class="auto" style="max-height: 40%"></div> |
michael@0 | 112 | <div id="maxheight4-1" class="auto" style="max-height: 480px"></div> |
michael@0 | 113 | <div id="maxheight4-2" class="auto" style="max-height: 60%"></div> |
michael@0 | 114 | |
michael@0 | 115 | <div id="minmaxheight1-1" style="min-height: 200px; max-height: 320px"></div> |
michael@0 | 116 | <div id="minmaxheight1-2" style="min-height: 200px; max-height: 40%"></div> |
michael@0 | 117 | <div id="minmaxheight2-1" style="min-height: 25%; max-height: 320px"></div> |
michael@0 | 118 | <div id="minmaxheight2-2" style="min-height: 25%; max-height: 40%"></div> |
michael@0 | 119 | <div id="minmaxheight3-1" style="min-height: 600px; max-height: 320px"></div> |
michael@0 | 120 | <div id="minmaxheight3-2" style="min-height: 600px; max-height: 40%"></div> |
michael@0 | 121 | <div id="minmaxheight4-1" style="min-height: 75%; max-height: 320px"></div> |
michael@0 | 122 | <div id="minmaxheight4-2" style="min-height: 75%; max-height: 40%"></div> |
michael@0 | 123 | <div id="minmaxheight5-1" |
michael@0 | 124 | style="display:none; min-height: 200px; max-height: 320px"></div> |
michael@0 | 125 | <div id="minmaxheight6-1" |
michael@0 | 126 | style="display: none; min-height: 25%; max-height: 320px"></div> |
michael@0 | 127 | <div id="minmaxheight7-1" |
michael@0 | 128 | style="display: none; min-height: 600px; max-height: 320px"></div> |
michael@0 | 129 | <div id="minmaxheight7-2" |
michael@0 | 130 | style="display: none; min-height: 600px; max-height: 40%"></div> |
michael@0 | 131 | <div id="minmaxheight8-1" class="auto" |
michael@0 | 132 | style="min-height: 200px; max-height: 320px"></div> |
michael@0 | 133 | <div id="minmaxheight8-2" class="auto" |
michael@0 | 134 | style="min-height: 200px; max-height: 40%"></div> |
michael@0 | 135 | <div id="minmaxheight9-1" class="auto" |
michael@0 | 136 | style="min-height: 25%; max-height: 320px"></div> |
michael@0 | 137 | <div id="minmaxheight9-2" class="auto" |
michael@0 | 138 | style="min-height: 25%; max-height: 40%"></div> |
michael@0 | 139 | <div id="minmaxheight10-1" class="auto" |
michael@0 | 140 | style="min-height: 600px; max-height: 320px"></div> |
michael@0 | 141 | <div id="minmaxheight10-2" class="auto" |
michael@0 | 142 | style="min-height: 600px; max-height: 40%"></div> |
michael@0 | 143 | <div id="minmaxheight11-1" class="auto" |
michael@0 | 144 | style="min-height: 75%; max-height: 320px"></div> |
michael@0 | 145 | <div id="minmaxheight11-2" class="auto" |
michael@0 | 146 | style="min-height: 75%; max-height: 40%"></div> |
michael@0 | 147 | |
michael@0 | 148 | <div id="radius1" style="border-radius: 80px"></div> |
michael@0 | 149 | <div id="radius2" style="border-radius: 10% / 20%"></div> |
michael@0 | 150 | <div id="outlineradius1" style="-moz-outline-radius: 160px"></div> |
michael@0 | 151 | <div id="outlineradius2" style="-moz-outline-radius: 20% / 40%"></div> |
michael@0 | 152 | </div> |
michael@0 | 153 | <div id="content2" style="display: none"> |
michael@0 | 154 | <div id="indent3" style="text-indent: 400px"></div> |
michael@0 | 155 | <div id="indent4" style="text-indent: 50%"></div> |
michael@0 | 156 | |
michael@0 | 157 | <div id="minwidth1-3" style="min-width: 200px"></div> |
michael@0 | 158 | <div id="minwidth1-4" style="min-width: 25%"></div> |
michael@0 | 159 | <div id="minwidth2-3" style="min-width: 600px"></div> |
michael@0 | 160 | <div id="minwidth2-4" style="min-width: 75%"></div> |
michael@0 | 161 | |
michael@0 | 162 | <div id="maxwidth1-3" style="max-width: 320px"></div> |
michael@0 | 163 | <div id="maxwidth1-4" style="max-width: 40%"></div> |
michael@0 | 164 | <div id="maxwidth2-3" style="max-width: 480px"></div> |
michael@0 | 165 | <div id="maxwidth2-4" style="max-width: 60%"></div> |
michael@0 | 166 | |
michael@0 | 167 | <div id="minmaxwidth1-3" style="min-width: 200px; max-width: 320px"></div> |
michael@0 | 168 | <div id="minmaxwidth1-4" style="min-width: 200px; max-width: 40%"></div> |
michael@0 | 169 | <div id="minmaxwidth2-3" style="min-width: 25%; max-width: 320px"></div> |
michael@0 | 170 | <div id="minmaxwidth2-4" style="min-width: 25%; max-width: 40%"></div> |
michael@0 | 171 | <div id="minmaxwidth3-3" style="min-width: 600px; max-width: 320px"></div> |
michael@0 | 172 | <div id="minmaxwidth3-4" style="min-width: 600px; max-width: 40%"></div> |
michael@0 | 173 | <div id="minmaxwidth4-3" style="min-width: 75%; max-width: 320px"></div> |
michael@0 | 174 | <div id="minmaxwidth4-4" style="min-width: 75%; max-width: 40%"></div> |
michael@0 | 175 | |
michael@0 | 176 | <div id="minheight1-3" style="min-height: 200px"></div> |
michael@0 | 177 | <div id="minheight1-4" style="min-height: 25%"></div> |
michael@0 | 178 | <div id="minheight2-3" style="min-height: 600px"></div> |
michael@0 | 179 | <div id="minheight2-4" style="min-height: 75%"></div> |
michael@0 | 180 | |
michael@0 | 181 | <div id="maxheight1-3" style="max-height: 320px"></div> |
michael@0 | 182 | <div id="maxheight1-4" style="max-height: 40%"></div> |
michael@0 | 183 | <div id="maxheight2-3" style="max-height: 480px"></div> |
michael@0 | 184 | <div id="maxheight2-4" style="max-height: 60%"></div> |
michael@0 | 185 | |
michael@0 | 186 | <div id="minmaxheight1-3" style="min-height: 200px; max-height: 320px"></div> |
michael@0 | 187 | <div id="minmaxheight1-4" style="min-height: 200px; max-height: 40%"></div> |
michael@0 | 188 | <div id="minmaxheight2-3" style="min-height: 25%; max-height: 320px"></div> |
michael@0 | 189 | <div id="minmaxheight2-4" style="min-height: 25%; max-height: 40%"></div> |
michael@0 | 190 | <div id="minmaxheight3-3" style="min-height: 600px; max-height: 320px"></div> |
michael@0 | 191 | <div id="minmaxheight3-4" style="min-height: 600px; max-height: 40%"></div> |
michael@0 | 192 | <div id="minmaxheight4-3" style="min-height: 75%; max-height: 320px"></div> |
michael@0 | 193 | <div id="minmaxheight4-4" style="min-height: 75%; max-height: 40%"></div> |
michael@0 | 194 | |
michael@0 | 195 | <div id="radius3" style="border-radius: 80px"></div> |
michael@0 | 196 | <div id="radius4" style="border-radius: 10%"></div> |
michael@0 | 197 | <div id="outlineradius3" style="-moz-outline-radius: 160px"></div> |
michael@0 | 198 | <div id="outlineradius4" style="-moz-outline-radius: 20%"></div> |
michael@0 | 199 | </div> |
michael@0 | 200 | <pre id="test"> |
michael@0 | 201 | <script class="testbody" type="text/javascript"> |
michael@0 | 202 | |
michael@0 | 203 | /** Test for Bug 365932 **/ |
michael@0 | 204 | |
michael@0 | 205 | document.body.offsetWidth; |
michael@0 | 206 | |
michael@0 | 207 | doATest("text-indent", "indent", 400, 50); |
michael@0 | 208 | doATest("border-top-left-radius", "radius", 80, 10); |
michael@0 | 209 | doATest("-moz-outline-radius-topleft", "outlineradius", 160, 20); |
michael@0 | 210 | |
michael@0 | 211 | doATest("width", "widthheight-", 440, 0); |
michael@0 | 212 | doATest("height", "widthheight-", 0, 0); |
michael@0 | 213 | |
michael@0 | 214 | doATest("min-width", "minwidth1-", 200, 25); |
michael@0 | 215 | doATest("min-width", "minwidth2-", 600, 75); |
michael@0 | 216 | doATest("max-width", "maxwidth1-", 320, 40); |
michael@0 | 217 | doATest("max-width", "maxwidth2-", 480, 60); |
michael@0 | 218 | |
michael@0 | 219 | // Test that min-width doesn't affect computed max-width |
michael@0 | 220 | doATest("max-width", "minmaxwidth1-", 320, 40); |
michael@0 | 221 | doATest("max-width", "minmaxwidth2-", 320, 40); |
michael@0 | 222 | doATest("max-width", "minmaxwidth3-", 320, 40); |
michael@0 | 223 | doATest("max-width", "minmaxwidth4-", 320, 40); |
michael@0 | 224 | |
michael@0 | 225 | // Test that max and min-width affect computed width correctly |
michael@0 | 226 | doATest("width", "minwidth1-", 400, 0); |
michael@0 | 227 | doATest("width", "minwidth2-", 600, 0); |
michael@0 | 228 | doATest("width", "minwidth3-", 440, 0); |
michael@0 | 229 | doATest("width", "minwidth4-", 600, 0); |
michael@0 | 230 | doATest("width", "maxwidth1-", 320, 0); |
michael@0 | 231 | doATest("width", "maxwidth2-", 400, 0); |
michael@0 | 232 | doATest("width", "maxwidth3-", 320, 0); |
michael@0 | 233 | doATest("width", "maxwidth4-", 440, 0); |
michael@0 | 234 | doATest("width", "minmaxwidth1-", 320, 0); |
michael@0 | 235 | doATest("width", "minmaxwidth2-", 320, 0); |
michael@0 | 236 | doATest("width", "minmaxwidth3-", 600, 0); |
michael@0 | 237 | doATest("width", "minmaxwidth4-", 600, 0); |
michael@0 | 238 | doATest("width", "minmaxwidth5-", 320, 0); |
michael@0 | 239 | doATest("width", "minmaxwidth6-", 320, 0); |
michael@0 | 240 | doATest("width", "minmaxwidth7-", 600, 0); |
michael@0 | 241 | doATest("width", "minmaxwidth8-", 320, 0); |
michael@0 | 242 | doATest("width", "minmaxwidth9-", 320, 0); |
michael@0 | 243 | doATest("width", "minmaxwidth10-", 600, 0); |
michael@0 | 244 | doATest("width", "minmaxwidth11-", 600, 0); |
michael@0 | 245 | |
michael@0 | 246 | doATest("min-height", "minheight1-", 200, 25); |
michael@0 | 247 | doATest("min-height", "minheight2-", 600, 75); |
michael@0 | 248 | doATest("max-height", "maxheight1-", 320, 40); |
michael@0 | 249 | doATest("max-height", "maxheight2-", 480, 60); |
michael@0 | 250 | |
michael@0 | 251 | // Test that min-height doesn't affect computed max-height |
michael@0 | 252 | doATest("max-height", "minmaxheight1-", 320, 40); |
michael@0 | 253 | doATest("max-height", "minmaxheight2-", 320, 40); |
michael@0 | 254 | doATest("max-height", "minmaxheight3-", 320, 40); |
michael@0 | 255 | doATest("max-height", "minmaxheight4-", 320, 40); |
michael@0 | 256 | |
michael@0 | 257 | // Test that max and min-height affect computed height correctly |
michael@0 | 258 | doATest("height", "minheight1-", 400, 0); |
michael@0 | 259 | doATest("height", "minheight2-", 600, 0); |
michael@0 | 260 | doATest("height", "minheight3-", 200, 0); |
michael@0 | 261 | doATest("height", "minheight4-", 600, 0); |
michael@0 | 262 | doATest("height", "maxheight1-", 320, 0); |
michael@0 | 263 | doATest("height", "maxheight2-", 400, 0); |
michael@0 | 264 | doATest("height", "maxheight3-", 0, 0); |
michael@0 | 265 | doATest("height", "maxheight4-", 0, 0); |
michael@0 | 266 | doATest("height", "minmaxheight1-", 320, 0); |
michael@0 | 267 | doATest("height", "minmaxheight2-", 320, 0); |
michael@0 | 268 | doATest("height", "minmaxheight3-", 600, 0); |
michael@0 | 269 | doATest("height", "minmaxheight4-", 600, 0); |
michael@0 | 270 | doATest("height", "minmaxheight5-", 320, 0); |
michael@0 | 271 | doATest("height", "minmaxheight6-", 320, 0); |
michael@0 | 272 | doATest("height", "minmaxheight7-", 600, 0); |
michael@0 | 273 | doATest("height", "minmaxheight8-", 200, 0); |
michael@0 | 274 | doATest("height", "minmaxheight9-", 200, 0); |
michael@0 | 275 | doATest("height", "minmaxheight10-", 600, 0); |
michael@0 | 276 | doATest("height", "minmaxheight11-", 600, 0); |
michael@0 | 277 | |
michael@0 | 278 | function style(id) { |
michael@0 | 279 | return document.defaultView.getComputedStyle($(id), ""); |
michael@0 | 280 | } |
michael@0 | 281 | |
michael@0 | 282 | function round(num, decimals) { |
michael@0 | 283 | return Math.round(num * Math.pow(10, decimals))/Math.pow(10, decimals); |
michael@0 | 284 | } |
michael@0 | 285 | |
michael@0 | 286 | function doATest(propName, idBase, coordVal, percentVal) |
michael@0 | 287 | { |
michael@0 | 288 | var cssPropertiesPropName = ""; |
michael@0 | 289 | var parts = propName.split("-"); |
michael@0 | 290 | ok(parts.length > 0, "prop name", "Empty css prop name"); |
michael@0 | 291 | var i; |
michael@0 | 292 | if (parts[0]) { |
michael@0 | 293 | i = 0; |
michael@0 | 294 | } else { |
michael@0 | 295 | is(parts[1], "moz", "Testing an extension property that's not -moz"); |
michael@0 | 296 | ok(parts.length > 2, "prop name 2", "Bogus -moz prop name"); |
michael@0 | 297 | cssPropertiesPropName = "Moz"; |
michael@0 | 298 | i = 2; |
michael@0 | 299 | } |
michael@0 | 300 | for (; i < parts.length; ++i) { |
michael@0 | 301 | var part = parts[i]; |
michael@0 | 302 | isnot(part, "", "Must have a nonempty part"); |
michael@0 | 303 | if (cssPropertiesPropName) { |
michael@0 | 304 | cssPropertiesPropName += part.charAt(0).toUpperCase() + |
michael@0 | 305 | part.substring(1, part.length); |
michael@0 | 306 | } else { |
michael@0 | 307 | cssPropertiesPropName += part; |
michael@0 | 308 | } |
michael@0 | 309 | } |
michael@0 | 310 | |
michael@0 | 311 | var decl = style(idBase+"1"); |
michael@0 | 312 | var prettyName = propName + " of " + idBase+"1"; |
michael@0 | 313 | |
michael@0 | 314 | is(decl[cssPropertiesPropName], coordVal+"px", prettyName); |
michael@0 | 315 | is(decl.getPropertyCSSValue(propName).cssValueType, |
michael@0 | 316 | CSSValue.CSS_PRIMITIVE_VALUE, prettyName + " is primitive value"); |
michael@0 | 317 | is(decl.getPropertyCSSValue(propName).primitiveType, |
michael@0 | 318 | CSSPrimitiveValue.CSS_PX, prettyName + " is px"); |
michael@0 | 319 | is(decl.getPropertyCSSValue(propName).cssText, coordVal + "px", |
michael@0 | 320 | prettyName + " cssText"); |
michael@0 | 321 | /* Since floats are only accurate to like 6 decimal places, round to 3 decimal |
michael@0 | 322 | places here. */ |
michael@0 | 323 | is(round(decl.getPropertyCSSValue(propName) |
michael@0 | 324 | .getFloatValue(CSSPrimitiveValue.CSS_PX), |
michael@0 | 325 | 3), coordVal, prettyName + " as float value"); |
michael@0 | 326 | |
michael@0 | 327 | if (!$(idBase+"2")) { |
michael@0 | 328 | // Nothing else to do here |
michael@0 | 329 | return |
michael@0 | 330 | } |
michael@0 | 331 | |
michael@0 | 332 | decl = style(idBase+"2"); |
michael@0 | 333 | prettyName = propName + " of " + idBase+"2"; |
michael@0 | 334 | |
michael@0 | 335 | is(decl[cssPropertiesPropName], coordVal+"px", prettyName); |
michael@0 | 336 | is(decl.getPropertyCSSValue(propName).cssValueType, |
michael@0 | 337 | CSSValue.CSS_PRIMITIVE_VALUE, prettyName + " is primitive value"); |
michael@0 | 338 | is(decl.getPropertyCSSValue(propName).primitiveType, |
michael@0 | 339 | CSSPrimitiveValue.CSS_PX, prettyName + " is px"); |
michael@0 | 340 | is(decl.getPropertyCSSValue(propName).cssText, coordVal + "px", |
michael@0 | 341 | prettyName + " cssText"); |
michael@0 | 342 | /* Since floats are only accurate to like 6 decimal places, round to 3 decimal |
michael@0 | 343 | places here. */ |
michael@0 | 344 | is(round(decl.getPropertyCSSValue(propName) |
michael@0 | 345 | .getFloatValue(CSSPrimitiveValue.CSS_PX), |
michael@0 | 346 | 3), coordVal, prettyName + " as float value"); |
michael@0 | 347 | |
michael@0 | 348 | if (percentVal) { |
michael@0 | 349 | decl = style(idBase+"3"); |
michael@0 | 350 | prettyName = propName + " of " + idBase+"3"; |
michael@0 | 351 | |
michael@0 | 352 | is(decl[cssPropertiesPropName], coordVal+"px", prettyName); |
michael@0 | 353 | is(decl.getPropertyCSSValue(propName).cssValueType, |
michael@0 | 354 | CSSValue.CSS_PRIMITIVE_VALUE, prettyName + " is primitive value"); |
michael@0 | 355 | is(decl.getPropertyCSSValue(propName).primitiveType, |
michael@0 | 356 | CSSPrimitiveValue.CSS_PX, prettyName + " is px"); |
michael@0 | 357 | is(decl.getPropertyCSSValue(propName).cssText, coordVal + "px", |
michael@0 | 358 | prettyName + " cssText"); |
michael@0 | 359 | /* Since floats are only accurate to like 6 decimal places, round to 3 decimal |
michael@0 | 360 | places here. */ |
michael@0 | 361 | is(round(decl.getPropertyCSSValue(propName) |
michael@0 | 362 | .getFloatValue(CSSPrimitiveValue.CSS_PX), |
michael@0 | 363 | 3), coordVal, prettyName + " as float value"); |
michael@0 | 364 | |
michael@0 | 365 | decl = style(idBase+"4"); |
michael@0 | 366 | prettyName = propName + " of " + idBase+"4"; |
michael@0 | 367 | |
michael@0 | 368 | is(decl[cssPropertiesPropName], percentVal+"%", prettyName); |
michael@0 | 369 | is(decl.getPropertyCSSValue(propName).cssValueType, |
michael@0 | 370 | CSSValue.CSS_PRIMITIVE_VALUE, prettyName + " is primitive value"); |
michael@0 | 371 | is(decl.getPropertyCSSValue(propName).primitiveType, |
michael@0 | 372 | CSSPrimitiveValue.CSS_PERCENTAGE, prettyName + " is percent"); |
michael@0 | 373 | is(decl.getPropertyCSSValue(propName).cssText, percentVal+"%", |
michael@0 | 374 | prettyName + " cssText"); |
michael@0 | 375 | /* Since floats are only accurate to like 6 decimal places, round to 3 decimal |
michael@0 | 376 | places here. */ |
michael@0 | 377 | is(round(decl.getPropertyCSSValue(propName) |
michael@0 | 378 | .getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE), |
michael@0 | 379 | 3), percentVal, prettyName + " as float value"); |
michael@0 | 380 | |
michael@0 | 381 | } |
michael@0 | 382 | } |
michael@0 | 383 | </script> |
michael@0 | 384 | </pre> |
michael@0 | 385 | </body> |
michael@0 | 386 | </html> |
michael@0 | 387 |