| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <p id="description"></p> |
| <div id="console"></div> |
| <script> |
| description("Test the computed style of the filter property."); |
| |
| // These have to be global for the test helpers to see them. |
| var stylesheet, filterStyle, subRule; |
| var styleElement = document.createElement("style"); |
| document.head.appendChild(styleElement); |
| stylesheet = styleElement.sheet; |
| |
| function testComputedFilterRule(description, rule, expectedLength, expectedTexts) |
| { |
| debug(""); |
| debug(`${description} : ${rule}`); |
| |
| stylesheet.insertRule(`body { filter: ${rule}; }`, 0); |
| |
| filterStyle = window.getComputedStyle(document.body).getPropertyCSSValue("filter"); |
| shouldBe("filterStyle.length", `${expectedLength}`); |
| for (var i = 0; i < expectedLength; i++) { |
| subRule = filterStyle[i]; |
| shouldBeEqualToString("subRule.cssText", expectedTexts[i]); |
| } |
| stylesheet.deleteRule(0); |
| } |
| |
| testComputedFilterRule("Basic reference", |
| "url('#a')", 1, |
| ['url("#a")']); |
| |
| testComputedFilterRule("Bare unquoted reference converting to quoted form", |
| "url(#a)", 1, |
| ['url("#a")']); |
| |
| testComputedFilterRule("Multiple references", |
| "url('#a') url('#b')", 2, |
| ['url("#a")', 'url("#b")']); |
| |
| testComputedFilterRule("Reference as 2nd value", |
| "grayscale(1) url('#a')", 2, |
| ["grayscale(1)", 'url("#a")']); |
| |
| testComputedFilterRule("Integer value", |
| "grayscale(1)", 1, |
| ["grayscale(1)"]); |
| |
| testComputedFilterRule("Float value converts to integer", |
| "grayscale(1.0)", 1, |
| ["grayscale(1)"]); |
| |
| testComputedFilterRule("Zero value", |
| "grayscale(0)", 1, |
| ["grayscale(0)"]); |
| |
| testComputedFilterRule("No values", |
| "grayscale()", 1, |
| ["grayscale(1)"]); |
| |
| testComputedFilterRule("Multiple values", |
| "grayscale(0.5) grayscale(0.25)", 2, |
| ["grayscale(0.5)", "grayscale(0.25)"]); |
| |
| testComputedFilterRule("Integer value", |
| "sepia(1)", 1, |
| ["sepia(1)"]); |
| |
| testComputedFilterRule("Float value converts to integer", |
| "sepia(1.0)", 1, |
| ["sepia(1)"]); |
| |
| testComputedFilterRule("Zero value", |
| "sepia(0)", 1, |
| ["sepia(0)"]); |
| |
| testComputedFilterRule("No values", |
| "sepia()", 1, |
| ["sepia(1)"]); |
| |
| testComputedFilterRule("Multiple values", |
| "sepia(0.5) sepia(0.25)", 2, |
| ["sepia(0.5)", "sepia(0.25)"]); |
| |
| testComputedFilterRule("Rule combinations", |
| "sepia(0.5) grayscale(0.25)", 2, |
| ["sepia(0.5)", "grayscale(0.25)"]); |
| |
| testComputedFilterRule("Integer value", |
| "saturate(1)", 1, |
| ["saturate(1)"]); |
| |
| testComputedFilterRule("Float value converts to integer", |
| "saturate(1.0)", 1, |
| ["saturate(1)"]); |
| |
| testComputedFilterRule("Zero value", |
| "saturate(0)", 1, |
| ["saturate(0)"]); |
| |
| testComputedFilterRule("No values", |
| "saturate()", 1, |
| ["saturate(1)"]); |
| |
| testComputedFilterRule("Multiple values", |
| "saturate(0.5) saturate(0.25)", 2, |
| ["saturate(0.5)", "saturate(0.25)"]); |
| |
| testComputedFilterRule("Rule combinations", |
| "saturate(0.5) grayscale(0.25)", 2, |
| ["saturate(0.5)", "grayscale(0.25)"]); |
| |
| testComputedFilterRule("Degrees value as integer", |
| "hue-rotate(10deg)", 1, |
| ["hue-rotate(10deg)"]); |
| |
| testComputedFilterRule("Degrees float value converts to integer", |
| "hue-rotate(10.0deg)", 1, |
| ["hue-rotate(10deg)"]); |
| |
| testComputedFilterRule("Radians value", |
| "hue-rotate(10rad)", 1, |
| ["hue-rotate(572.957795deg)"]); |
| |
| testComputedFilterRule("Gradians value", |
| "hue-rotate(10grad)", 1, |
| ["hue-rotate(9deg)"]); |
| |
| testComputedFilterRule("Turns value", |
| "hue-rotate(0.5turn)", 1, |
| ["hue-rotate(180deg)"]); |
| |
| testComputedFilterRule("Zero value", |
| "hue-rotate(0)", 1, |
| ["hue-rotate(0deg)"]); |
| |
| testComputedFilterRule("No values", |
| "hue-rotate()", 1, |
| ["hue-rotate(0deg)"]); |
| |
| testComputedFilterRule("Rule combinations", |
| "hue-rotate(10deg) grayscale(0.25)", 2, |
| ["hue-rotate(10deg)", "grayscale(0.25)"]); |
| |
| testComputedFilterRule("Integer value", |
| "invert(1)", 1, |
| ["invert(1)"]); |
| |
| testComputedFilterRule("Float value converts to integer", |
| "invert(1.0)", 1, |
| ["invert(1)"]); |
| |
| testComputedFilterRule("Zero value", |
| "invert(0)", 1, |
| ["invert(0)"]); |
| |
| testComputedFilterRule("No values", |
| "invert()", 1, |
| ["invert(1)"]); |
| |
| testComputedFilterRule("Multiple values", |
| "invert(0.5) invert(0.25)", 2, |
| ["invert(0.5)", "invert(0.25)"]); |
| |
| testComputedFilterRule("Rule combinations", |
| "invert(0.5) grayscale(0.25)", 2, |
| ["invert(0.5)", "grayscale(0.25)"]); |
| |
| testComputedFilterRule("Integer value", |
| "opacity(1)", 1, |
| ["opacity(1)"]); |
| |
| testComputedFilterRule("Float value converts to integer", |
| "opacity(1.0)", 1, |
| ["opacity(1)"]); |
| |
| testComputedFilterRule("Zero value", |
| "opacity(0)", 1, |
| ["opacity(0)"]); |
| |
| testComputedFilterRule("No values", |
| "opacity()", 1, |
| ["opacity(1)"]); |
| |
| testComputedFilterRule("Multiple values", |
| "opacity(0.5) opacity(0.25)", 2, |
| ["opacity(0.5)", "opacity(0.25)"]); |
| |
| testComputedFilterRule("Rule combinations", |
| "opacity(0.5) grayscale(0.25)", 2, |
| ["opacity(0.5)", "grayscale(0.25)"]); |
| |
| testComputedFilterRule("Integer value", |
| "brightness(1)", 1, |
| ["brightness(1)"]); |
| |
| testComputedFilterRule("Float value converts to integer", |
| "brightness(1.0)", 1, |
| ["brightness(1)"]); |
| |
| testComputedFilterRule("Zero value", |
| "brightness(0)", 1, |
| ["brightness(0)"]); |
| |
| testComputedFilterRule("No values", |
| "brightness()", 1, |
| ["brightness(1)"]); |
| |
| testComputedFilterRule("Multiple values", |
| "brightness(0.5) brightness(0.25)", 2, |
| ["brightness(0.5)", "brightness(0.25)"]); |
| |
| testComputedFilterRule("Rule combinations", |
| "brightness(0.5) grayscale(0.25)", 2, |
| ["brightness(0.5)", "grayscale(0.25)"]); |
| |
| testComputedFilterRule("Integer value", |
| "contrast(1)", 1, |
| ["contrast(1)"]); |
| |
| testComputedFilterRule("Value greater than 1", |
| "contrast(2)", 1, |
| ["contrast(2)"]); |
| |
| testComputedFilterRule("Float value converts to integer", |
| "contrast(1.0)", 1, |
| ["contrast(1)"]); |
| |
| testComputedFilterRule("Zero value", |
| "contrast(0)", 1, |
| ["contrast(0)"]); |
| |
| testComputedFilterRule("No values", |
| "contrast()", 1, |
| ["contrast(1)"]); |
| |
| testComputedFilterRule("Multiple values", |
| "contrast(0.5) contrast(0.25)", 2, |
| ["contrast(0.5)", "contrast(0.25)"]); |
| |
| testComputedFilterRule("Rule combinations", |
| "contrast(0.5) grayscale(0.25)", 2, |
| ["contrast(0.5)", "grayscale(0.25)"]); |
| |
| testComputedFilterRule("One zero to px", |
| "blur(0)", 1, |
| ["blur(0px)"]); |
| |
| testComputedFilterRule("One length", |
| "blur(2em)", 1, |
| ["blur(32px)"]); |
| |
| testComputedFilterRule("One length", |
| "blur(5px)", 1, |
| ["blur(5px)"]); |
| |
| testComputedFilterRule("No values", |
| "blur()", 1, |
| ["blur(0px)"]); |
| |
| testComputedFilterRule("Color then three values", |
| "drop-shadow(red 1px 2px 3px)", 1, |
| ["drop-shadow(rgb(255, 0, 0) 1px 2px 3px)"]); |
| |
| testComputedFilterRule("Three values then color", |
| "drop-shadow(1px 2px 3px red)", 1, |
| ["drop-shadow(rgb(255, 0, 0) 1px 2px 3px)"]); |
| |
| testComputedFilterRule("Color then three values with zero length", |
| "drop-shadow(#abc 0 0 0)", 1, |
| ["drop-shadow(rgb(170, 187, 204) 0px 0px 0px)"]); |
| |
| testComputedFilterRule("Three values with zero length", |
| "drop-shadow(0 0 0)", 1, |
| ["drop-shadow(rgb(0, 0, 0) 0px 0px 0px)"]); |
| |
| testComputedFilterRule("Two values no color", |
| "drop-shadow(1px 2px)", 1, |
| ["drop-shadow(rgb(0, 0, 0) 1px 2px 0px)"]); |
| |
| testComputedFilterRule("Multiple operations", |
| "grayscale(0.5) sepia(0.25) saturate(0.75) hue-rotate(35deg) invert(0.2) opacity(0.9) blur(5px)", 7, |
| [ |
| "grayscale(0.5)", |
| "sepia(0.25)", |
| "saturate(0.75)", |
| "hue-rotate(35deg)", |
| "invert(0.2)", |
| "opacity(0.9)", |
| "blur(5px)"]); |
| |
| testComputedFilterRule("Percentage values", |
| "grayscale(50%) sepia(25%) saturate(75%) invert(20%) opacity(90%) brightness(60%) contrast(30%)", 7, |
| [ |
| "grayscale(0.5)", |
| "sepia(0.25)", |
| "saturate(0.75)", |
| "invert(0.2)", |
| "opacity(0.9)", |
| "brightness(0.6)", |
| "contrast(0.3)"]); |
| |
| successfullyParsed = true; |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
