зеркало из https://github.com/mozilla/gecko-dev.git
708 строки
23 KiB
HTML
708 строки
23 KiB
HTML
<!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.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(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.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(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.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(-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.remove();
|
|
})();
|
|
|
|
(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.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 = [
|
|
"mask",
|
|
"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" ],
|
|
|
|
// Radial gradients (should be serialized using modern unprefixed style):
|
|
[ "-webkit-radial-gradient(contain, red, blue)",
|
|
"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();
|
|
})();
|
|
|
|
</script>
|
|
</pre>
|
|
</body>
|
|
</html>
|