diff options
author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
---|---|---|
committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
tree | 10027f336435511475e392454359edea8e25895d /layout/style/test/test_computed_style.html | |
parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
download | UXP-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.html | 413 |
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> |