1 files changed, 664 insertions, 0 deletions
diff --git a/layout/style/test/test_computed_style.html b/layout/style/test/test_computed_style.html
new file mode 100644
index 0000000000..c2dc667f2f
--- /dev/null
+++ b/layout/style/test/test_computed_style.html
@@ -0,0 +1,664 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for miscellaneous computed style issues</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style id="style"></style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
+<p id="display"></p>
+<div id="content" style="display: none">
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for miscellaneous computed style issues **/
+
+var frame_container = document.getElementById("display");
+var noframe_container = document.getElementById("content");
+
+(function test_bug_595650() {
+  // Test handling of horizontal and vertical percentages for border-radius.
+  var p = document.createElement("p");
+  p.setAttribute("style", "width: 256px; height: 128px");
+  p.style.borderTopLeftRadius = "1.5625%"; /* 1/64 == 4px 2px */
+  p.style.borderTopRightRadius = "5px";
+  p.style.borderBottomRightRadius = "5px 3px";
+  p.style.borderBottomLeftRadius = "1.5625% 3.125%" /* 1/64 1/32 == 4px 4px */
+  var cs = getComputedStyle(p, "");
+
+  frame_container.appendChild(p);
+  is(cs.borderTopLeftRadius, "1.5625%",
+     "computed value of % border-radius, with frame");
+  is(cs.borderTopRightRadius, "5px",
+     "computed value of px border-radius, with frame");
+  is(cs.borderBottomRightRadius, "5px 3px",
+     "computed value of px border-radius, with frame");
+  is(cs.borderBottomLeftRadius, "1.5625% 3.125%",
+     "computed value of % border-radius, with frame");
+
+  noframe_container.appendChild(p);
+  is(cs.borderTopLeftRadius, "1.5625%",
+     "computed value of % border-radius, without frame");
+  is(cs.borderTopRightRadius, "5px",
+     "computed value of px border-radius, without frame");
+  is(cs.borderBottomRightRadius, "5px 3px",
+     "computed value of px border-radius, without frame");
+  is(cs.borderBottomLeftRadius, "1.5625% 3.125%",
+     "computed value of % border-radius, without frame");
+
+  p.remove();
+})();
+
+(function test_bug_1292447() {
+  // Was for bug 595651 which tests that clamping of border-radius
+  // is reflected in computed style.
+  // For compatibility issue, resolved value is computed value now.
+  var p = document.createElement("p");
+  p.setAttribute("style", "width: 190px; height: 90px; border: 5px solid;");
+  p.style.borderRadius = "1000px";
+  var cs = getComputedStyle(p, "");
+
+  frame_container.appendChild(p);
+  is(cs.borderTopLeftRadius, "1000px",
+     "computed value of clamped border radius (top left)");
+  is(cs.borderTopRightRadius, "1000px",
+     "computed value of clamped border radius (top right)");
+  is(cs.borderBottomRightRadius, "1000px",
+     "computed value of clamped border radius (bottom right)");
+  is(cs.borderBottomLeftRadius, "1000px",
+     "computed value of clamped border radius (bottom left)");
+
+  p.style.overflowY = "scroll";
+  is(cs.borderTopLeftRadius, "1000px",
+     "computed value of clamped border radius (top left, overflow-y)");
+  // Fennec doesn't have scrollbars for overflow:scroll content
+  if (p.clientWidth == p.offsetWidth - 10) {
+    is(cs.borderTopRightRadius, "1000px",
+       "computed value of border radius (top right, overflow-y)");
+    is(cs.borderBottomRightRadius, "1000px",
+       "computed value of border radius (bottom right, overflow-y)");
+  } else {
+    is(cs.borderTopRightRadius, "1000px",
+       "computed value of clamped border radius (top right, overflow-y)");
+    is(cs.borderBottomRightRadius, "1000px",
+       "computed value of clamped border radius (bottom right, overflow-y)");
+  }
+  is(cs.borderBottomLeftRadius, "1000px",
+     "computed value of clamped border radius (bottom left, overflow-y)");
+
+  p.style.overflowY = "hidden";
+  p.style.overflowX = "scroll";
+  is(cs.borderTopLeftRadius, "1000px",
+     "computed value of clamped border radius (top left, overflow-x)");
+  is(cs.borderTopRightRadius, "1000px",
+     "computed value of clamped border radius (top right, overflow-x)");
+  // Fennec doesn't have scrollbars for overflow:scroll content
+  if (p.clientHeight == p.offsetHeight - 10) {
+    is(cs.borderBottomRightRadius, "1000px",
+       "computed value of border radius (bottom right, overflow-x)");
+    is(cs.borderBottomLeftRadius, "1000px",
+       "computed value of  border radius (bottom left, overflow-x)");
+  } else {
+    is(cs.borderBottomRightRadius, "1000px",
+       "computed value of clamped border radius (bottom right, overflow-x)");
+    is(cs.borderBottomLeftRadius, "1000px",
+       "computed value of clamped border radius (bottom left, overflow-x)");
+  }
+
+  p.remove();
+})();
+
+(function test_bug_647885_1() {
+  // Test that various background-position styles round-trip correctly
+  var backgroundPositions = [
+    [ "0 0", "0px 0px", "unitless 0" ],
+    [ "0px 0px", "0px 0px", "0 with units" ],
+    [ "0% 0%", "0% 0%", "0%" ],
+    [ "calc(0px) 0", "0px 0px", "0 calc with units x" ],
+    [ "0 calc(0px)", "0px 0px", "0 calc with units y" ],
+    [ "calc(3px - 3px) 0", "0px 0px", "computed 0 calc with units x" ],
+    [ "0 calc(3px - 3px)", "0px 0px", "computed 0 calc with units y" ],
+    [ "calc(0%) 0", "0% 0px", "0% calc x"],
+    [ "0 calc(0%)", "0px 0%", "0% calc y"],
+    [ "calc(3px + 2% - 2%) 0", "calc(0% + 3px) 0px",
+      "computed 0% calc x"],
+    [ "0 calc(3px + 2% - 2%)", "0px calc(0% + 3px)",
+      "computed 0% calc y"],
+    [ "calc(3px - 5px) calc(6px - 7px)", "-2px -1px",
+      "negative pixel width"],
+    [ "", "0% 0%", "initial value" ],
+  ];
+
+  var p = document.createElement("p");
+  var cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (var i = 0; i < backgroundPositions.length; ++i) {
+    var test = backgroundPositions[i];
+    p.style.backgroundPosition = test[0];
+    is(cs.backgroundPosition, test[1], "computed value of " + test[2] + " background-position");
+  }
+
+  p.remove();
+})();
+
+(function test_bug_647885_2() {
+  // Test that various background-size styles round-trip correctly
+  var backgroundSizes = [
+    [ "0 0", "0px 0px", "unitless 0" ],
+    [ "0px 0px", "0px 0px", "0 with units" ],
+    [ "0% 0%", "0% 0%", "0%" ],
+    [ "calc(0px) 0", "0px 0px", "0 calc with units horizontal" ],
+    [ "0 calc(0px)", "0px 0px", "0 calc with units vertical" ],
+    [ "calc(3px - 3px) 0", "0px 0px", "computed 0 calc with units horizontal" ],
+    [ "0 calc(3px - 3px)", "0px 0px", "computed 0 calc with units vertical" ],
+    [ "calc(0%) 0", "0% 0px", "0% calc horizontal"],
+    [ "0 calc(0%)", "0px 0%", "0% calc vertical"],
+    [ "calc(3px + 2% - 2%) 0", "calc(0% + 3px) 0px",
+                      "computed 0% calc horizontal"],
+    [ "0 calc(3px + 2% - 2%)", "0px calc(0% + 3px)",
+                      "computed 0% calc vertical"],
+    [ "calc(3px - 5px) calc(6px - 9px)", "0px 0px", "negative pixel width" ],
+    [ "", "auto", "initial value" ],
+  ];
+
+  var p = document.createElement("p");
+  var cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (var i = 0; i < backgroundSizes.length; ++i) {
+    var test = backgroundSizes[i];
+    p.style.backgroundSize = test[0];
+    is(cs.backgroundSize, test[1], "computed value of " + test[2] + " background-size");
+  }
+
+  p.remove();
+})();
+
+(function test_bug_716628() {
+  // Test that various gradient styles round-trip correctly
+  var backgroundImages = [
+    [ "radial-gradient(at 10% bottom, #ffffff, black)",
+      "radial-gradient(at 10% 100%, rgb(255, 255, 255), rgb(0, 0, 0))",
+      "radial gradient 1" ],
+    [ "radial-gradient(#ffffff, black)",
+      "radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))",
+      "radial gradient 2" ],
+    [ "radial-gradient(farthest-corner, #ffffff, black)",
+      "radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))",
+      "radial gradient 3" ],
+    [ "linear-gradient(red, blue)",
+      "linear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))",
+      "linear gradient 1" ],
+    [ "linear-gradient(to bottom, red, blue)",
+      "linear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))",
+      "linear gradient 2" ],
+    [ "linear-gradient(to right, red, blue)",
+      "linear-gradient(to right, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "linear gradient 3" ],
+    [ "linear-gradient(-45deg, red, blue)",
+      "linear-gradient(-45deg, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "linear gradient with angle in degrees" ],
+    [ "linear-gradient(-0.125turn, red, blue)",
+      "linear-gradient(-45deg, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "linear gradient with angle in turns" ],
+  ];
+
+  var p = document.createElement("p");
+  var cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (var i = 0; i < backgroundImages.length; ++i) {
+    var test = backgroundImages[i];
+    p.style.backgroundImage = test[0];
+    is(cs.backgroundImage, test[1], "computed value of " + test[2] + " background-image");
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1363349_linear() {
+  const specPrefix = "-webkit-gradient(linear, ";
+  const specSuffix = ", from(blue), to(lime))";
+
+  const expPrefix = "linear-gradient(";
+  const expSuffix = "rgb(0, 0, 255) 0%, rgb(0, 255, 0) 100%)";
+
+  let testcases = [
+    [ "calc(5 + 5) top, calc(10 + 10) top",
+      "to right",
+      "calc(num+num) in position"
+    ],
+    [ "left calc(25% - 10%), right calc(75% + 10%)",
+      "to right bottom",
+      "calc(pct+pct) in position "
+    ]
+  ];
+
+  let p = document.createElement("p");
+  let cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (let test of testcases) {
+    let specifiedStyle = specPrefix + test[0] + specSuffix;
+    let expectedStyle = expPrefix;
+    if (test[1] != "") {
+      expectedStyle += test[1] + ", ";
+    }
+    expectedStyle += expSuffix;
+
+    p.style.backgroundImage = specifiedStyle;
+    is(cs.backgroundImage, expectedStyle,
+       "computed value of -webkit-gradient expression (" + test[2] + ")");
+    p.style.backgroundImage = "";
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1363349_radial() {
+  const specPrefix = "-webkit-gradient(radial, ";
+  const specSuffix = ", from(blue), to(lime))";
+
+  const expPrefix = "radial-gradient(";
+  const expSuffix = "rgb(0, 0, 255) 0%, rgb(0, 255, 0) 100%)";
+
+  let testcases = [
+    [ "1 2, 0, 3 4, calc(1 + 5)",
+      "6px at 3px 4px",
+      "calc(num+num) in radius"
+    ],
+    [ "1 2, calc(1 + 2), 3 4, calc(1 + 5)",
+      "6px at 3px 4px",
+      "calc(num+num) in radius"
+    ],
+    [ "calc(0 + 1) calc(1 + 1), calc(1 + 2), calc(1 + 2) 4, calc(1 + 5)",
+      "6px at 3px 4px",
+      "calc(num+num) in position and radius"
+    ]
+  ];
+
+  let p = document.createElement("p");
+  let cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (let test of testcases) {
+    let specifiedStyle = specPrefix + test[0] + specSuffix;
+    let expectedStyle = expPrefix;
+    if (test[1] != "") {
+      expectedStyle += test[1] + ", ";
+    }
+    expectedStyle += expSuffix;
+
+    p.style.backgroundImage = specifiedStyle;
+    is(cs.backgroundImage, expectedStyle,
+       "computed value of -webkit-gradient expression (" + test[2] + ")");
+    p.style.backgroundImage = "";
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1241623() {
+  // Test that -webkit-gradient() styles are approximated the way we expect:
+
+  // For compactness, we'll pull out the common prefix & suffix from all of the
+  // specified & expected styles, and construct the full expression on the fly:
+  const specPrefix = "-webkit-gradient(linear, ";
+  const specSuffix = ", from(blue), to(lime))";
+
+  const expPrefix = "linear-gradient(";
+  const expSuffix = "rgb(0, 0, 255) 0%, rgb(0, 255, 0) 100%)";
+
+  let testcases = [
+    //
+    // [ legacyDirection,
+    //   modernDirection, // (empty string means use default direction)
+    //   descriptionOfTestcase ],
+
+    // If start & end are at same point, we just produce a gradient with
+    // the default direction.
+    [ "left top, left top",
+      "",
+      "start & end point are the same" ],
+    [ "40 40, 40 40",
+      "",
+      "start & end point are the same" ],
+    [ "center center, center center",
+      "",
+      "start & end point are the same" ],
+
+    // If start & end use different units in the same coordinate, we generally
+    // can't extract a direction (because we can't know whether arbitrary
+    // percent values are larger or smaller than arbitrary pixel values). So
+    // we produce a gradient in the default direction.
+    [ "left top, 30 100%",  // (Note: keywords like "left" are really % vals.)
+      "",
+      "start & end point have different units" ],
+    [ "100% 15, right bottom",
+      "",
+      "start & end point have different units" ],
+    [ "0 0%, 20 20",
+      "",
+      "start & end point have different units" ],
+    [ "0 0, 100% 20",
+      "",
+      "start & end point have different units" ],
+    [ "5% 30, 20 50%",
+      "",
+      "start & end point have different units" ],
+    [ "5% 6%, 20 30",
+      "",
+      "start & end point have different units" ],
+
+    // Gradient starting/ending somewhere arbitrary in middle:
+    [ "center center, right top",
+      "to right top",
+      "from center to right top" ],
+    [ "left top, center center",
+      "to right bottom",
+      "from left top to center" ],
+    [ "10 15, 5 20",
+      "to left bottom",
+      "from arbitrary point to another point in lower-left direction" ],
+
+    // Gradient using negative coordinates:
+    [ "-10 -15, 0 0",
+      "to right bottom",
+      "from negative point to origin" ],
+    [ "-100 10, 20 30",
+      "to right bottom",
+      "from negative-x point to another point in lower-right direction" ],
+    [ "10 -100, 5 10",
+      "to left bottom",
+      "from negative-y point to another point in lower-left direction" ],
+
+    // Diagonal gradient between sides/corners:
+    [ "center top, left center",
+      "to left bottom",
+      "left/bottom-wards, using edge keywords" ],
+    [ "left center, center top",
+      "to right top",
+      "top/right-wards, using edge keywords" ],
+    [ "right center, center top",
+      "to left top",
+      "top/left-wards, using edge keywords" ],
+    [ "right top, center bottom",
+      "to left bottom",
+      "bottom/left-wards, using edge keywords" ],
+    [ "left top, right bottom",
+      "to right bottom",
+      "bottom/right-wards, using edge keywords" ],
+    [ "left bottom, right top",
+      "to right top",
+      "top/right-wards, using edge keywords" ],
+  ];
+
+  let p = document.createElement("p");
+  let cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (let test of testcases) {
+    let specifiedStyle = specPrefix + test[0] + specSuffix;
+    let expectedStyle = expPrefix;
+    if (test[1] != "") {
+      expectedStyle += test[1] + ", ";
+    }
+    expectedStyle += expSuffix;
+
+    p.style.backgroundImage = specifiedStyle;
+    is(cs.backgroundImage, expectedStyle,
+       "computed value of -webkit-gradient expression (" + test[2] + ")");
+    p.style.backgroundImage = "";
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1293164() {
+  var p = document.createElement("p");
+  var cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  var docPath = document.URL.substring(0, document.URL.lastIndexOf("/") + 1);
+
+  var localURL = "url(\"#foo\")";
+  var nonLocalURL = "url(\"foo.svg#foo\")";
+  var resolvedNonLocalURL = "url(\"" + docPath + "foo.svg#foo\")";
+
+  var testStyles = [
+    "maskImage",
+    "backgroundImage",
+    "markerStart",
+    "markerMid",
+    "markerEnd",
+    "clipPath",
+    "filter",
+    "fill",
+    "stroke",
+  ];
+
+  for (var prop of testStyles) {
+    p.style[prop] = localURL;
+    is(cs[prop], localURL, "computed value of " + prop);
+    p.style[prop] = nonLocalURL;
+    is(cs[prop], resolvedNonLocalURL, "computed value of " + prop);
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1347164() {
+  // Test that computed color values are serialized as "rgb()"
+  // IFF they're fully-opaque (and otherwise as "rgba()").
+  var color = [
+    ["rgba(0, 0, 0, 1)", "rgb(0, 0, 0)"],
+    ["rgba(0, 0, 0, 0.5)", "rgba(0, 0, 0, 0.5)"],
+    ["hsla(0, 0%, 0%, 1)", "rgb(0, 0, 0)"],
+    ["hsla(0, 0%, 0%, 0.5)", "rgba(0, 0, 0, 0.5)"],
+  ];
+
+  var css_color_4 = [
+    ["rgba(0 0 0 / 1)", "rgb(0, 0, 0)"],
+    ["rgba(0 0 0 / 0.1)", "rgba(0, 0, 0, 0.1)"],
+    ["rgb(0 0 0 / 1)", "rgb(0, 0, 0)"],
+    ["rgb(0 0 0 / 0.2)", "rgba(0, 0, 0, 0.2)"],
+    ["hsla(0 0% 0% / 1)", "rgb(0, 0, 0)"],
+    ["hsla(0deg 0% 0% / 0.3)", "rgba(0, 0, 0, 0.3)"],
+    ["hsl(0 0% 0% / 1)", "rgb(0, 0, 0)"],
+    ["hsl(0 0% 0% / 0.4)", "rgba(0, 0, 0, 0.4)"],
+  ];
+
+  var p = document.createElement("p");
+  var cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (var i = 0; i < color.length; ++i) {
+    var test = color[i];
+    p.style.color = test[0];
+    is(cs.color, test[1], "computed value of " + test[0]);
+  }
+  for (var i = 0; i < css_color_4.length; ++i) {
+    var test = css_color_4[i];
+    p.style.color = test[0];
+    is(cs.color, test[1], "css-color-4 computed value of " + test[0]);
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1357117() {
+  // Test that vendor-prefixed gradient styles round-trip with the same prefix,
+  // or with no prefix.
+  var backgroundImages = [
+    // [ specified style,
+    //   expected computed style,
+    //   descriptionOfTestcase ],
+    // Linear gradient with legacy-gradient-line (needs prefixed syntax):
+    [ "-webkit-linear-gradient(10deg, red, blue)",
+      "-webkit-linear-gradient(10deg, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "-webkit-linear-gradient with angled legacy-gradient-line" ],
+
+    // Linear gradient with box corner (needs prefixed syntax):
+    [ "-webkit-linear-gradient(top left, red, blue)",
+      "-webkit-linear-gradient(left top, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "-webkit-linear-gradient with box corner" ],
+
+    // Linear gradient with default keyword (should be serialized without keyword):
+    [ "-webkit-linear-gradient(top, red, blue)",
+      "-webkit-linear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))",
+      "-webkit-linear-gradient with legacy default direction keyword" ],
+
+    // Radial gradients (should be serialized using modern unprefixed style):
+    [ "-webkit-radial-gradient(contain, red, blue)",
+      "-webkit-radial-gradient(closest-side, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "-webkit-radial-gradient with legacy 'contain' keyword" ],
+  ];
+
+  var p = document.createElement("p");
+  var cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (var i = 0; i < backgroundImages.length; ++i) {
+    var test = backgroundImages[i];
+    p.style.backgroundImage = test[0];
+    is(cs.backgroundImage, test[1],
+       "computed value of prefixed gradient expression (" + test[2] + ")");
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1367028() {
+  const borderImageSubprops = [
+    "border-image-slice",
+    "border-image-outset",
+    "border-image-width"
+  ];
+  const rectValues = [
+    {
+      values: ["5 5 5 5", "5 5 5", "5 5", "5"],
+      expected: "5",
+      desc: "identical four sides",
+    },
+    {
+      values: ["5 6 5 6", "5 6 5", "5 6"],
+      expected: "5 6",
+      desc: "identical values on each axis",
+    },
+    {
+      values: ["5 6 7 6", "5 6 7"],
+      expected: "5 6 7",
+      desc: "identical values on left and right",
+    },
+    {
+      values: ["5 6 5 7"],
+      desc: "identical values on top and bottom",
+    },
+    {
+      values: ["5 5 6 6", "5 6 6 5"],
+      desc: "identical values on unrelated sides",
+    },
+    {
+      values: ["5 6 7 8"],
+      desc: "different values on all sides",
+    },
+  ];
+
+  let frameContainer = document.getElementById("display");
+  let p = document.createElement("p");
+  frameContainer.appendChild(p);
+  let cs = getComputedStyle(p);
+
+  for (let prop of borderImageSubprops) {
+    for (let {values, expected, desc} of rectValues) {
+      for (let value of values) {
+        p.style.setProperty(prop, value);
+        is(cs.getPropertyValue(prop),
+           expected ? expected : value, `${desc} for ${prop}`);
+        p.style.removeProperty(prop);
+      }
+    }
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1378368() {
+  // Test that negative results of calc()s in basic-shapes (e.g. polygon()) should
+  // not be clamped to 0px.
+  var clipPaths = [
+    // [ specified style,
+    //   expected computed style,
+    //   descriptionOfTestcase ],
+    // polygon:
+    [ "polygon(calc(10px - 20px) 0px, 100px 100px, 0px 100px)",
+      "polygon(-10px 0px, 100px 100px, 0px 100px)",
+      "polygon with negative calc() coordinates" ],
+    // inset:
+    [ "inset(calc(10px - 20px))",
+      "inset(-10px)",
+      "inset with negative calc() coordinates" ],
+  ];
+
+  var p = document.createElement("p");
+  var cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (let test of clipPaths) {
+    p.style.clipPath = test[0];
+    is(cs.clipPath, test[1],
+       "computed value of clip-path for basic-shapes (" + test[2] + ")");
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1418433() {
+  // Test that the style data read through getComputedStyle is always up-to-date,
+  // even for non-displayed elements.
+
+  var d = document.createElement("div");
+  d.setAttribute("id", "nonDisplayedDiv");
+  var cs = getComputedStyle(d, null);
+  noframe_container.appendChild(d);
+
+  // Test for stylesheet change, i.e., added/changed/removed
+  var style = document.getElementById("style");
+  is(cs.height, "auto",
+     "computed value of display none element (before testing)");
+  style.textContent = "#nonDisplayedDiv { height: 100px; }";
+  is(cs.height, "100px",
+     "computed value of display none element (sheet added)");
+  style.textContent = "#nonDisplayedDiv { height: 10px; }";
+  is(cs.height, "10px",
+     "computed value of display none element (sheet changed)");
+  style.textContent = "";
+  is(cs.height, "auto",
+     "computed value of display none element (sheet removed)");
+
+  // Test for rule change, i.e., added/changed/removed
+  var styleSheet = style.sheet;
+  is(cs.width, "auto",
+     "computed value of display none element (before testing)");
+  styleSheet.insertRule("#nonDisplayedDiv { width: 100px; }", 0);
+  is(cs.width, "100px",
+     "computed value of display none element (rule added)");
+  styleSheet.deleteRule(0);
+  styleSheet.insertRule("#nonDisplayedDiv { width: 10px; }", 0);
+  is(cs.width, "10px",
+     "computed value of display none element (rule changed)");
+  styleSheet.deleteRule(0);
+  is(cs.width, "auto",
+     "computed value of display none element (rule removed)");
+
+  d.remove();
+})();
+
+</script>
+</pre>
+</body>
+</html>