test_computed_style.html (22393B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test for miscellaneous computed style issues</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 7 <style id="style"></style> 8 </head> 9 <body> 10 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a> 11 <p id="display"></p> 12 <div id="content" style="display: none"> 13 </div> 14 <pre id="test"> 15 <script type="application/javascript"> 16 17 /** Test for miscellaneous computed style issues */ 18 19 var frame_container = document.getElementById("display"); 20 var noframe_container = document.getElementById("content"); 21 22 (function test_bug_595650() { 23 // Test handling of horizontal and vertical percentages for border-radius. 24 var p = document.createElement("p"); 25 p.setAttribute("style", "width: 256px; height: 128px"); 26 p.style.borderTopLeftRadius = "1.5625%"; /* 1/64 == 4px 2px */ 27 p.style.borderTopRightRadius = "5px"; 28 p.style.borderBottomRightRadius = "5px 3px"; 29 p.style.borderBottomLeftRadius = "1.5625% 3.125%" /* 1/64 1/32 == 4px 4px */ 30 var cs = getComputedStyle(p, ""); 31 32 frame_container.appendChild(p); 33 is(cs.borderTopLeftRadius, "1.5625%", 34 "computed value of % border-radius, with frame"); 35 is(cs.borderTopRightRadius, "5px", 36 "computed value of px border-radius, with frame"); 37 is(cs.borderBottomRightRadius, "5px 3px", 38 "computed value of px border-radius, with frame"); 39 is(cs.borderBottomLeftRadius, "1.5625% 3.125%", 40 "computed value of % border-radius, with frame"); 41 42 noframe_container.appendChild(p); 43 is(cs.borderTopLeftRadius, "1.5625%", 44 "computed value of % border-radius, without frame"); 45 is(cs.borderTopRightRadius, "5px", 46 "computed value of px border-radius, without frame"); 47 is(cs.borderBottomRightRadius, "5px 3px", 48 "computed value of px border-radius, without frame"); 49 is(cs.borderBottomLeftRadius, "1.5625% 3.125%", 50 "computed value of % border-radius, without frame"); 51 52 p.remove(); 53 })(); 54 55 (function test_bug_1292447() { 56 // Was for bug 595651 which tests that clamping of border-radius 57 // is reflected in computed style. 58 // For compatibility issue, resolved value is computed value now. 59 var p = document.createElement("p"); 60 p.setAttribute("style", "width: 190px; height: 90px; border: 5px solid;"); 61 p.style.borderRadius = "1000px"; 62 var cs = getComputedStyle(p, ""); 63 64 frame_container.appendChild(p); 65 is(cs.borderTopLeftRadius, "1000px", 66 "computed value of clamped border radius (top left)"); 67 is(cs.borderTopRightRadius, "1000px", 68 "computed value of clamped border radius (top right)"); 69 is(cs.borderBottomRightRadius, "1000px", 70 "computed value of clamped border radius (bottom right)"); 71 is(cs.borderBottomLeftRadius, "1000px", 72 "computed value of clamped border radius (bottom left)"); 73 74 p.style.overflowY = "scroll"; 75 is(cs.borderTopLeftRadius, "1000px", 76 "computed value of clamped border radius (top left, overflow-y)"); 77 // Fennec doesn't have scrollbars for overflow:scroll content 78 if (p.clientWidth == p.offsetWidth - 10) { 79 is(cs.borderTopRightRadius, "1000px", 80 "computed value of border radius (top right, overflow-y)"); 81 is(cs.borderBottomRightRadius, "1000px", 82 "computed value of border radius (bottom right, overflow-y)"); 83 } else { 84 is(cs.borderTopRightRadius, "1000px", 85 "computed value of clamped border radius (top right, overflow-y)"); 86 is(cs.borderBottomRightRadius, "1000px", 87 "computed value of clamped border radius (bottom right, overflow-y)"); 88 } 89 is(cs.borderBottomLeftRadius, "1000px", 90 "computed value of clamped border radius (bottom left, overflow-y)"); 91 92 p.style.overflowY = "hidden"; 93 p.style.overflowX = "scroll"; 94 is(cs.borderTopLeftRadius, "1000px", 95 "computed value of clamped border radius (top left, overflow-x)"); 96 is(cs.borderTopRightRadius, "1000px", 97 "computed value of clamped border radius (top right, overflow-x)"); 98 // Fennec doesn't have scrollbars for overflow:scroll content 99 if (p.clientHeight == p.offsetHeight - 10) { 100 is(cs.borderBottomRightRadius, "1000px", 101 "computed value of border radius (bottom right, overflow-x)"); 102 is(cs.borderBottomLeftRadius, "1000px", 103 "computed value of border radius (bottom left, overflow-x)"); 104 } else { 105 is(cs.borderBottomRightRadius, "1000px", 106 "computed value of clamped border radius (bottom right, overflow-x)"); 107 is(cs.borderBottomLeftRadius, "1000px", 108 "computed value of clamped border radius (bottom left, overflow-x)"); 109 } 110 111 p.remove(); 112 })(); 113 114 (function test_bug_647885_1() { 115 // Test that various background-position styles round-trip correctly 116 var backgroundPositions = [ 117 [ "0 0", "0px 0px", "unitless 0" ], 118 [ "0px 0px", "0px 0px", "0 with units" ], 119 [ "0% 0%", "0% 0%", "0%" ], 120 [ "calc(0px) 0", "0px 0px", "0 calc with units x" ], 121 [ "0 calc(0px)", "0px 0px", "0 calc with units y" ], 122 [ "calc(3px - 3px) 0", "0px 0px", "computed 0 calc with units x" ], 123 [ "0 calc(3px - 3px)", "0px 0px", "computed 0 calc with units y" ], 124 [ "calc(0%) 0", "0% 0px", "0% calc x"], 125 [ "0 calc(0%)", "0px 0%", "0% calc y"], 126 [ "calc(3px + 2% - 2%) 0", "calc(0% + 3px) 0px", 127 "computed 0% calc x"], 128 [ "0 calc(3px + 2% - 2%)", "0px calc(0% + 3px)", 129 "computed 0% calc y"], 130 [ "calc(3px - 5px) calc(6px - 7px)", "-2px -1px", 131 "negative pixel width"], 132 [ "", "0% 0%", "initial value" ], 133 ]; 134 135 var p = document.createElement("p"); 136 var cs = getComputedStyle(p, ""); 137 frame_container.appendChild(p); 138 139 for (var i = 0; i < backgroundPositions.length; ++i) { 140 var test = backgroundPositions[i]; 141 p.style.backgroundPosition = test[0]; 142 is(cs.backgroundPosition, test[1], "computed value of " + test[2] + " background-position"); 143 } 144 145 p.remove(); 146 })(); 147 148 (function test_bug_647885_2() { 149 // Test that various background-size styles round-trip correctly 150 var backgroundSizes = [ 151 [ "0 0", "0px 0px", "unitless 0" ], 152 [ "0px 0px", "0px 0px", "0 with units" ], 153 [ "0% 0%", "0% 0%", "0%" ], 154 [ "calc(0px) 0", "0px 0px", "0 calc with units horizontal" ], 155 [ "0 calc(0px)", "0px 0px", "0 calc with units vertical" ], 156 [ "calc(3px - 3px) 0", "0px 0px", "computed 0 calc with units horizontal" ], 157 [ "0 calc(3px - 3px)", "0px 0px", "computed 0 calc with units vertical" ], 158 [ "calc(0%) 0", "0% 0px", "0% calc horizontal"], 159 [ "0 calc(0%)", "0px 0%", "0% calc vertical"], 160 [ "calc(3px + 2% - 2%) 0", "calc(0% + 3px) 0px", 161 "computed 0% calc horizontal"], 162 [ "0 calc(3px + 2% - 2%)", "0px calc(0% + 3px)", 163 "computed 0% calc vertical"], 164 [ "calc(3px - 5px) calc(6px - 9px)", "0px 0px", "negative pixel width" ], 165 [ "", "auto", "initial value" ], 166 ]; 167 168 var p = document.createElement("p"); 169 var cs = getComputedStyle(p, ""); 170 frame_container.appendChild(p); 171 172 for (var i = 0; i < backgroundSizes.length; ++i) { 173 var test = backgroundSizes[i]; 174 p.style.backgroundSize = test[0]; 175 is(cs.backgroundSize, test[1], "computed value of " + test[2] + " background-size"); 176 } 177 178 p.remove(); 179 })(); 180 181 (function test_bug_716628() { 182 // Test that various gradient styles round-trip correctly 183 var backgroundImages = [ 184 [ "radial-gradient(at 10% bottom, #ffffff, black)", 185 "radial-gradient(at 10% 100%, rgb(255, 255, 255), rgb(0, 0, 0))", 186 "radial gradient 1" ], 187 [ "radial-gradient(#ffffff, black)", 188 "radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))", 189 "radial gradient 2" ], 190 [ "radial-gradient(farthest-corner, #ffffff, black)", 191 "radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))", 192 "radial gradient 3" ], 193 [ "linear-gradient(red, blue)", 194 "linear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))", 195 "linear gradient 1" ], 196 [ "linear-gradient(to bottom, red, blue)", 197 "linear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))", 198 "linear gradient 2" ], 199 [ "linear-gradient(to right, red, blue)", 200 "linear-gradient(to right, rgb(255, 0, 0), rgb(0, 0, 255))", 201 "linear gradient 3" ], 202 [ "linear-gradient(-45deg, red, blue)", 203 "linear-gradient(-45deg, rgb(255, 0, 0), rgb(0, 0, 255))", 204 "linear gradient with angle in degrees" ], 205 [ "linear-gradient(-0.125turn, red, blue)", 206 "linear-gradient(-45deg, rgb(255, 0, 0), rgb(0, 0, 255))", 207 "linear gradient with angle in turns" ], 208 ]; 209 210 var p = document.createElement("p"); 211 var cs = getComputedStyle(p, ""); 212 frame_container.appendChild(p); 213 214 for (var i = 0; i < backgroundImages.length; ++i) { 215 var test = backgroundImages[i]; 216 p.style.backgroundImage = test[0]; 217 is(cs.backgroundImage, test[1], "computed value of " + test[2] + " background-image"); 218 } 219 220 p.remove(); 221 })(); 222 223 (function test_bug_1363349_linear() { 224 const specPrefix = "-webkit-gradient(linear, "; 225 const specSuffix = ", from(blue), to(lime))"; 226 227 const expPrefix = "linear-gradient("; 228 const expSuffix = "rgb(0, 0, 255) 0%, rgb(0, 255, 0) 100%)"; 229 230 let testcases = [ 231 [ "calc(5 + 5) top, calc(10 + 10) top", 232 "to right", 233 "calc(num+num) in position" 234 ], 235 [ "left calc(25% - 10%), right calc(75% + 10%)", 236 "to right bottom", 237 "calc(pct+pct) in position " 238 ] 239 ]; 240 241 let p = document.createElement("p"); 242 let cs = getComputedStyle(p, ""); 243 frame_container.appendChild(p); 244 245 for (let test of testcases) { 246 let specifiedStyle = specPrefix + test[0] + specSuffix; 247 let expectedStyle = expPrefix; 248 if (test[1] != "") { 249 expectedStyle += test[1] + ", "; 250 } 251 expectedStyle += expSuffix; 252 253 p.style.backgroundImage = specifiedStyle; 254 is(cs.backgroundImage, expectedStyle, 255 "computed value of -webkit-gradient expression (" + test[2] + ")"); 256 p.style.backgroundImage = ""; 257 } 258 259 p.remove(); 260 })(); 261 262 (function test_bug_1363349_radial() { 263 const specPrefix = "-webkit-gradient(radial, "; 264 const specSuffix = ", from(blue), to(lime))"; 265 266 const expPrefix = "radial-gradient("; 267 const expSuffix = "rgb(0, 0, 255) 0%, rgb(0, 255, 0) 100%)"; 268 269 let testcases = [ 270 [ "1 2, 0, 3 4, calc(1 + 5)", 271 "6px at 3px 4px", 272 "calc(num+num) in radius" 273 ], 274 [ "1 2, calc(1 + 2), 3 4, calc(1 + 5)", 275 "6px at 3px 4px", 276 "calc(num+num) in radius" 277 ], 278 [ "calc(0 + 1) calc(1 + 1), calc(1 + 2), calc(1 + 2) 4, calc(1 + 5)", 279 "6px at 3px 4px", 280 "calc(num+num) in position and radius" 281 ] 282 ]; 283 284 let p = document.createElement("p"); 285 let cs = getComputedStyle(p, ""); 286 frame_container.appendChild(p); 287 288 for (let test of testcases) { 289 let specifiedStyle = specPrefix + test[0] + specSuffix; 290 let expectedStyle = expPrefix; 291 if (test[1] != "") { 292 expectedStyle += test[1] + ", "; 293 } 294 expectedStyle += expSuffix; 295 296 p.style.backgroundImage = specifiedStyle; 297 is(cs.backgroundImage, expectedStyle, 298 "computed value of -webkit-gradient expression (" + test[2] + ")"); 299 p.style.backgroundImage = ""; 300 } 301 302 p.remove(); 303 })(); 304 305 (function test_bug_1241623() { 306 // Test that -webkit-gradient() styles are approximated the way we expect: 307 308 // For compactness, we'll pull out the common prefix & suffix from all of the 309 // specified & expected styles, and construct the full expression on the fly: 310 const specPrefix = "-webkit-gradient(linear, "; 311 const specSuffix = ", from(blue), to(lime))"; 312 313 const expPrefix = "linear-gradient("; 314 const expSuffix = "rgb(0, 0, 255) 0%, rgb(0, 255, 0) 100%)"; 315 316 let testcases = [ 317 // 318 // [ legacyDirection, 319 // modernDirection, // (empty string means use default direction) 320 // descriptionOfTestcase ], 321 322 // If start & end are at same point, we just produce a gradient with 323 // the default direction. 324 [ "left top, left top", 325 "", 326 "start & end point are the same" ], 327 [ "40 40, 40 40", 328 "", 329 "start & end point are the same" ], 330 [ "center center, center center", 331 "", 332 "start & end point are the same" ], 333 334 // If start & end use different units in the same coordinate, we generally 335 // can't extract a direction (because we can't know whether arbitrary 336 // percent values are larger or smaller than arbitrary pixel values). So 337 // we produce a gradient in the default direction. 338 [ "left top, 30 100%", // (Note: keywords like "left" are really % vals.) 339 "", 340 "start & end point have different units" ], 341 [ "100% 15, right bottom", 342 "", 343 "start & end point have different units" ], 344 [ "0 0%, 20 20", 345 "", 346 "start & end point have different units" ], 347 [ "0 0, 100% 20", 348 "", 349 "start & end point have different units" ], 350 [ "5% 30, 20 50%", 351 "", 352 "start & end point have different units" ], 353 [ "5% 6%, 20 30", 354 "", 355 "start & end point have different units" ], 356 357 // Gradient starting/ending somewhere arbitrary in middle: 358 [ "center center, right top", 359 "to right top", 360 "from center to right top" ], 361 [ "left top, center center", 362 "to right bottom", 363 "from left top to center" ], 364 [ "10 15, 5 20", 365 "to left bottom", 366 "from arbitrary point to another point in lower-left direction" ], 367 368 // Gradient using negative coordinates: 369 [ "-10 -15, 0 0", 370 "to right bottom", 371 "from negative point to origin" ], 372 [ "-100 10, 20 30", 373 "to right bottom", 374 "from negative-x point to another point in lower-right direction" ], 375 [ "10 -100, 5 10", 376 "to left bottom", 377 "from negative-y point to another point in lower-left direction" ], 378 379 // Diagonal gradient between sides/corners: 380 [ "center top, left center", 381 "to left bottom", 382 "left/bottom-wards, using edge keywords" ], 383 [ "left center, center top", 384 "to right top", 385 "top/right-wards, using edge keywords" ], 386 [ "right center, center top", 387 "to left top", 388 "top/left-wards, using edge keywords" ], 389 [ "right top, center bottom", 390 "to left bottom", 391 "bottom/left-wards, using edge keywords" ], 392 [ "left top, right bottom", 393 "to right bottom", 394 "bottom/right-wards, using edge keywords" ], 395 [ "left bottom, right top", 396 "to right top", 397 "top/right-wards, using edge keywords" ], 398 ]; 399 400 let p = document.createElement("p"); 401 let cs = getComputedStyle(p, ""); 402 frame_container.appendChild(p); 403 404 for (let test of testcases) { 405 let specifiedStyle = specPrefix + test[0] + specSuffix; 406 let expectedStyle = expPrefix; 407 if (test[1] != "") { 408 expectedStyle += test[1] + ", "; 409 } 410 expectedStyle += expSuffix; 411 412 p.style.backgroundImage = specifiedStyle; 413 is(cs.backgroundImage, expectedStyle, 414 "computed value of -webkit-gradient expression (" + test[2] + ")"); 415 p.style.backgroundImage = ""; 416 } 417 418 p.remove(); 419 })(); 420 421 (function test_bug_1293164() { 422 var p = document.createElement("p"); 423 var cs = getComputedStyle(p, ""); 424 frame_container.appendChild(p); 425 426 var docPath = document.URL.substring(0, document.URL.lastIndexOf("/") + 1); 427 428 var localURL = "url(\"#foo\")"; 429 var nonLocalURL = "url(\"foo.svg#foo\")"; 430 var resolvedNonLocalURL = "url(\"" + docPath + "foo.svg#foo\")"; 431 432 var testStyles = [ 433 "maskImage", 434 "backgroundImage", 435 "markerStart", 436 "markerMid", 437 "markerEnd", 438 "clipPath", 439 "filter", 440 "fill", 441 "stroke", 442 ]; 443 444 for (var prop of testStyles) { 445 p.style[prop] = localURL; 446 is(cs[prop], localURL, "computed value of " + prop); 447 p.style[prop] = nonLocalURL; 448 is(cs[prop], resolvedNonLocalURL, "computed value of " + prop); 449 } 450 451 p.remove(); 452 })(); 453 454 (function test_bug_1347164() { 455 // Test that computed color values are serialized as "rgb()" 456 // IFF they're fully-opaque (and otherwise as "rgba()"). 457 var color = [ 458 ["rgba(0, 0, 0, 1)", "rgb(0, 0, 0)"], 459 ["rgba(0, 0, 0, 0.5)", "rgba(0, 0, 0, 0.5)"], 460 ["hsla(0, 0%, 0%, 1)", "rgb(0, 0, 0)"], 461 ["hsla(0, 0%, 0%, 0.5)", "rgba(0, 0, 0, 0.5)"], 462 ]; 463 464 var css_color_4 = [ 465 ["rgba(0 0 0 / 1)", "rgb(0, 0, 0)"], 466 ["rgba(0 0 0 / 0.1)", "rgba(0, 0, 0, 0.1)"], 467 ["rgb(0 0 0 / 1)", "rgb(0, 0, 0)"], 468 ["rgb(0 0 0 / 0.2)", "rgba(0, 0, 0, 0.2)"], 469 ["hsla(0 0% 0% / 1)", "rgb(0, 0, 0)"], 470 ["hsla(0deg 0% 0% / 0.3)", "rgba(0, 0, 0, 0.3)"], 471 ["hsl(0 0% 0% / 1)", "rgb(0, 0, 0)"], 472 ["hsl(0 0% 0% / 0.4)", "rgba(0, 0, 0, 0.4)"], 473 ]; 474 475 var p = document.createElement("p"); 476 var cs = getComputedStyle(p, ""); 477 frame_container.appendChild(p); 478 479 for (var i = 0; i < color.length; ++i) { 480 var test = color[i]; 481 p.style.color = test[0]; 482 is(cs.color, test[1], "computed value of " + test[0]); 483 } 484 for (var i = 0; i < css_color_4.length; ++i) { 485 var test = css_color_4[i]; 486 p.style.color = test[0]; 487 is(cs.color, test[1], "css-color-4 computed value of " + test[0]); 488 } 489 490 p.remove(); 491 })(); 492 493 (function test_bug_1357117() { 494 // Test that vendor-prefixed gradient styles round-trip with the same prefix, 495 // or with no prefix. 496 var backgroundImages = [ 497 // [ specified style, 498 // expected computed style, 499 // descriptionOfTestcase ], 500 // Linear gradient with legacy-gradient-line (needs prefixed syntax): 501 [ "-webkit-linear-gradient(10deg, red, blue)", 502 "-webkit-linear-gradient(10deg, rgb(255, 0, 0), rgb(0, 0, 255))", 503 "-webkit-linear-gradient with angled legacy-gradient-line" ], 504 505 // Linear gradient with box corner (needs prefixed syntax): 506 [ "-webkit-linear-gradient(top left, red, blue)", 507 "-webkit-linear-gradient(left top, rgb(255, 0, 0), rgb(0, 0, 255))", 508 "-webkit-linear-gradient with box corner" ], 509 510 // Linear gradient with default keyword (should be serialized without keyword): 511 [ "-webkit-linear-gradient(top, red, blue)", 512 "-webkit-linear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))", 513 "-webkit-linear-gradient with legacy default direction keyword" ], 514 515 // Radial gradients (should be serialized using modern unprefixed style): 516 [ "-webkit-radial-gradient(contain, red, blue)", 517 "-webkit-radial-gradient(closest-side, rgb(255, 0, 0), rgb(0, 0, 255))", 518 "-webkit-radial-gradient with legacy 'contain' keyword" ], 519 ]; 520 521 var p = document.createElement("p"); 522 var cs = getComputedStyle(p, ""); 523 frame_container.appendChild(p); 524 525 for (var i = 0; i < backgroundImages.length; ++i) { 526 var test = backgroundImages[i]; 527 p.style.backgroundImage = test[0]; 528 is(cs.backgroundImage, test[1], 529 "computed value of prefixed gradient expression (" + test[2] + ")"); 530 } 531 532 p.remove(); 533 })(); 534 535 (function test_bug_1367028() { 536 const borderImageSubprops = [ 537 "border-image-slice", 538 "border-image-outset", 539 "border-image-width" 540 ]; 541 const rectValues = [ 542 { 543 values: ["5 5 5 5", "5 5 5", "5 5", "5"], 544 expected: "5", 545 desc: "identical four sides", 546 }, 547 { 548 values: ["5 6 5 6", "5 6 5", "5 6"], 549 expected: "5 6", 550 desc: "identical values on each axis", 551 }, 552 { 553 values: ["5 6 7 6", "5 6 7"], 554 expected: "5 6 7", 555 desc: "identical values on left and right", 556 }, 557 { 558 values: ["5 6 5 7"], 559 desc: "identical values on top and bottom", 560 }, 561 { 562 values: ["5 5 6 6", "5 6 6 5"], 563 desc: "identical values on unrelated sides", 564 }, 565 { 566 values: ["5 6 7 8"], 567 desc: "different values on all sides", 568 }, 569 ]; 570 571 let frameContainer = document.getElementById("display"); 572 let p = document.createElement("p"); 573 frameContainer.appendChild(p); 574 let cs = getComputedStyle(p); 575 576 for (let prop of borderImageSubprops) { 577 for (let {values, expected, desc} of rectValues) { 578 for (let value of values) { 579 p.style.setProperty(prop, value); 580 is(cs.getPropertyValue(prop), 581 expected ? expected : value, `${desc} for ${prop}`); 582 p.style.removeProperty(prop); 583 } 584 } 585 } 586 587 p.remove(); 588 })(); 589 590 (function test_bug_1378368() { 591 // Test that negative results of calc()s in basic-shapes (e.g. polygon()) should 592 // not be clamped to 0px. 593 var clipPaths = [ 594 // [ specified style, 595 // expected computed style, 596 // descriptionOfTestcase ], 597 // polygon: 598 [ "polygon(calc(10px - 20px) 0px, 100px 100px, 0px 100px)", 599 "polygon(-10px 0px, 100px 100px, 0px 100px)", 600 "polygon with negative calc() coordinates" ], 601 // inset: 602 [ "inset(calc(10px - 20px))", 603 "inset(-10px)", 604 "inset with negative calc() coordinates" ], 605 ]; 606 607 var p = document.createElement("p"); 608 var cs = getComputedStyle(p, ""); 609 frame_container.appendChild(p); 610 611 for (let test of clipPaths) { 612 p.style.clipPath = test[0]; 613 is(cs.clipPath, test[1], 614 "computed value of clip-path for basic-shapes (" + test[2] + ")"); 615 } 616 617 p.remove(); 618 })(); 619 620 (function test_bug_1418433() { 621 // Test that the style data read through getComputedStyle is always up-to-date, 622 // even for non-displayed elements. 623 624 var d = document.createElement("div"); 625 d.setAttribute("id", "nonDisplayedDiv"); 626 var cs = getComputedStyle(d, null); 627 noframe_container.appendChild(d); 628 629 // Test for stylesheet change, i.e., added/changed/removed 630 var style = document.getElementById("style"); 631 is(cs.height, "auto", 632 "computed value of display none element (before testing)"); 633 style.textContent = "#nonDisplayedDiv { height: 100px; }"; 634 is(cs.height, "100px", 635 "computed value of display none element (sheet added)"); 636 style.textContent = "#nonDisplayedDiv { height: 10px; }"; 637 is(cs.height, "10px", 638 "computed value of display none element (sheet changed)"); 639 style.textContent = ""; 640 is(cs.height, "auto", 641 "computed value of display none element (sheet removed)"); 642 643 // Test for rule change, i.e., added/changed/removed 644 var styleSheet = style.sheet; 645 is(cs.width, "auto", 646 "computed value of display none element (before testing)"); 647 styleSheet.insertRule("#nonDisplayedDiv { width: 100px; }", 0); 648 is(cs.width, "100px", 649 "computed value of display none element (rule added)"); 650 styleSheet.deleteRule(0); 651 styleSheet.insertRule("#nonDisplayedDiv { width: 10px; }", 0); 652 is(cs.width, "10px", 653 "computed value of display none element (rule changed)"); 654 styleSheet.deleteRule(0); 655 is(cs.width, "auto", 656 "computed value of display none element (rule removed)"); 657 658 d.remove(); 659 })(); 660 661 </script> 662 </pre> 663 </body> 664 </html>