summaryrefslogtreecommitdiffstats
path: root/layout/style/test/test_computed_style.html
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /layout/style/test/test_computed_style.html
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/style/test/test_computed_style.html')
-rw-r--r--layout/style/test/test_computed_style.html413
1 files changed, 413 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 000000000..938a3fcf5
--- /dev/null
+++ b/layout/style/test/test_computed_style.html
@@ -0,0 +1,413 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Test for miscellaneous computed style issues</title>
+ <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</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
+ // and -moz-outline-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 */
+ p.style.MozOutlineRadiusTopleft = "1.5625%"; /* 1/64 == 4px 2px */
+ p.style.MozOutlineRadiusTopright = "5px";
+ p.style.MozOutlineRadiusBottomright = "5px 3px";
+ p.style.MozOutlineRadiusBottomleft = "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");
+ is(cs.MozOutlineRadiusTopleft, "1.5625%",
+ "computed value of % outline-radius, with frame");
+ is(cs.MozOutlineRadiusTopright, "5px",
+ "computed value of px outline-radius, with frame");
+ is(cs.MozOutlineRadiusBottomright, "5px 3px",
+ "computed value of px outline-radius, with frame");
+ is(cs.MozOutlineRadiusBottomleft, "1.5625% 3.125%",
+ "computed value of % outline-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");
+ is(cs.MozOutlineRadiusTopleft, "1.5625%",
+ "computed value of % outline-radius, without frame");
+ is(cs.MozOutlineRadiusTopright, "5px",
+ "computed value of px outline-radius, without frame");
+ is(cs.MozOutlineRadiusBottomright, "5px 3px",
+ "computed value of px outline-radius, without frame");
+ is(cs.MozOutlineRadiusBottomleft, "1.5625% 3.125%",
+ "computed value of % outline-radius, without frame");
+
+ p.parentNode.removeChild(p);
+})();
+
+(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.parentNode.removeChild(p);
+})();
+
+(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(3px + 0%) 0px",
+ "computed 0% calc x"],
+ [ "0 calc(3px + 2% - 2%)", "0px calc(3px + 0%)",
+ "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.parentNode.removeChild(p);
+})();
+
+(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(3px + 0%) 0px",
+ "computed 0% calc horizontal"],
+ [ "0 calc(3px + 2% - 2%)", "0px calc(3px + 0%)",
+ "computed 0% calc vertical"],
+ [ "calc(3px - 5px) calc(6px - 9px)",
+ "calc(-2px) calc(-3px)", "negative pixel width" ],
+ [ "", "auto 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.parentNode.removeChild(p);
+})();
+
+(function test_bug_716628() {
+ // Test that various gradient styles round-trip correctly
+ var backgroundImages = [
+ [ "-moz-radial-gradient(10% bottom, #ffffff, black)",
+ "radial-gradient(at 10% 100%, rgb(255, 255, 255), rgb(0, 0, 0))",
+ "radial gradient 1" ],
+ [ "-moz-radial-gradient(#ffffff, black)",
+ "radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))",
+ "radial gradient 2" ],
+ [ "-moz-radial-gradient(cover, #ffffff, black)",
+ "radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))",
+ "radial gradient 3" ],
+ [ "-moz-radial-gradient(top left -45deg, #ffffff, black)",
+ "-moz-radial-gradient(0% 0% -45deg, rgb(255, 255, 255), rgb(0, 0, 0))",
+ "radial gradient with angle in degrees" ],
+ [ "-moz-linear-gradient(red, blue)",
+ "linear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))",
+ "linear gradient 1" ],
+ [ "-moz-linear-gradient(to bottom, red, blue)",
+ "linear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))",
+ "linear gradient 2" ],
+ [ "-moz-linear-gradient(to right, red, blue)",
+ "linear-gradient(to right, rgb(255, 0, 0), rgb(0, 0, 255))",
+ "linear gradient 3" ],
+ [ "-moz-linear-gradient(10px 10px -45deg, red, blue)",
+ "-moz-linear-gradient(10px 10px -45deg, rgb(255, 0, 0), rgb(0, 0, 255))",
+ "linear gradient with angle in degrees" ],
+ [ "-moz-linear-gradient(10px 10px -0.125turn, red, blue)",
+ "-moz-linear-gradient(10px 10px -0.125turn, 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.parentNode.removeChild(p);
+})();
+
+(function test_bug_1235015() {
+ if (!("maskImage" in document.documentElement.style)) {
+ return;
+ }
+
+ // "masks" object contains non-initial mask longhand values.
+ var emptyMasks = {
+ // More then one <mask-reference>, or any mask-image value other then
+ // <mask-source>,
+ "mask-image": [
+ "url(#mask1), url(#mask2)",
+ "linear-gradient(red, yellow)",
+ "-moz-element(#test)"
+ ],
+ // any mask-clip value other than "border-box".
+ "mask-clip": [
+ "content-box", "padding-box", "margin-box", "fill-box", "stroke-box",
+ "view-box", "no-clip"
+ ],
+ // any mask-origin value other than "border-box".
+ "mask-origin": [
+ "content-box", "padding-box", "margin-box", "fill-box", "stroke-box",
+ "view-box"
+ ],
+ // any mask-composite value other than "add".
+ "mask-composite": [
+ "subtract", "intersect", "exclude"
+ ],
+ // any mask-mode value other than "match-source".
+ "mask-mode": [
+ "alpha", "luminance"
+ ],
+ // any mask-position value other then "0%" "top" "left"
+ // "center center".
+ "mask-position": [
+ "0%", "center", "right", "bottom", "50%", "100%"
+ ],
+ // any mask-repeat value other then "repeat" "repeat repeat".
+ "mask-repeat": [
+ "repeat-x", "repeat-y", "no-repeat", "space", "round"
+ ],
+ // any mask-size value other then "auto" "auto auto".
+ "mask-size": [
+ "10px", "100%", "cover", "contain", "auto 5px"
+ ],
+ };
+
+ // "masks" object contains initial mask longhand values.
+ var nonEmptyMasks = {
+ "mask-image": [
+ "url(#mask1)", "none"
+ ],
+ "mask-clip": [
+ "border-box"
+ ],
+ "mask-origin": [
+ "border-box"
+ ],
+ "mask-composite": [
+ "add"
+ ],
+ "mask-mode": [
+ "match-source"
+ ],
+ "mask-position": [
+ "0% 0%", "left top"
+ ],
+ "mask-repeat": [
+ "repeat", "repeat repeat"
+ ],
+ "mask-size": [
+ "auto", "auto auto"
+ ],
+ };
+
+ var p = document.createElement("p");
+ var cs = getComputedStyle(p, "");
+ frame_container.appendChild(p);
+
+ for (var prop in emptyMasks) {
+ var subProp = emptyMasks[prop];
+ for (var i = 0; i < subProp.length; i++) {
+ p.style.mask = subProp[i];
+ is(cs.mask, "", "computed value of " + subProp[i] + " mask");
+ }
+ }
+
+ for (var prop in nonEmptyMasks) {
+ var subProp = nonEmptyMasks[prop];
+ for (var i = 0; i < subProp.length; i++) {
+ p.style.mask = subProp[i];
+ isnot(cs.mask, "", "computed value of " + subProp[i] + " mask");
+ }
+ }
+ p.parentNode.removeChild(p);
+})();
+
+(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 = {
+ "mask" : "",
+ "markerStart" : "",
+ "markerMid" : "",
+ "markerEnd" : "",
+ "clipPath" : "",
+ "filter" : "",
+ "fill" : " transparent",
+ "stroke" : " transparent",
+ };
+
+ for (var prop in testStyles) {
+ p.style[prop] = localURL;
+ is(cs[prop], localURL + testStyles[prop], "computed value of " + prop);
+ p.style[prop] = nonLocalURL;
+ is(cs[prop], resolvedNonLocalURL + testStyles[prop], "computed value of " + prop);
+ }
+
+ p.parentNode.removeChild(p);
+})();
+
+(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)"],
+ // css-color-4
+ ["rgba(0 0 0 / 1)", "rgb(0, 0, 0)"],
+ ["rgba(0 0 0 / 0.5)", "rgba(0, 0, 0, 0.5)"],
+ ["rgb(0 0 0 / 1)", "rgb(0, 0, 0)"],
+ ["rgb(0 0 0 / 0.5)", "rgba(0, 0, 0, 0.5)"],
+ ["hsla(0 0% 0% / 1)", "rgb(0, 0, 0)"],
+ ["hsla(0deg 0% 0% / 0.5)", "rgba(0, 0, 0, 0.5)"],
+ ["hsl(0 0% 0% / 1)", "rgb(0, 0, 0)"],
+ ["hsl(0 0% 0% / 0.5)", "rgba(0, 0, 0, 0.5)"],
+ ];
+
+ 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]);
+ }
+
+ p.remove();
+})();
+
+</script>
+</pre>
+</body>
+</html>