/** 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)");
}
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");
}
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");
}
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");
}
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))";
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\")";
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 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] + ")");
}
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 varstyle = 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>
Messung V0.5
¤ Dauer der Verarbeitung: 0.13 Sekunden
(vorverarbeitet)
¤
Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.
Bemerkung:
Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.
