| Quellcodebibliothek Statistik Leitseite products/Sources/formale Sprachen/C/Firefox/layout/style/test/ (Browser von der Mozilla Stiftung Version 136.0.1©) Datei vom 10.2.2025 mit Größe 21 kB |
|
Quelle test_computed_style.html Sprache: HTML |
|||||||||||||||||
<!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-posit } 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>
¤ Dauer der Verarbeitung: 0.13 Sekunden (vorverarbeitet) ¤*© Formatika GbR, Deutschland |
|
||||||||||||||||
2026-04-04