| <!DOCTYPE html> |
| <title>Parsing of the filter property; valid values</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../css-parser/resources/property-parsing-test.js"></script> |
| <script> |
| assert_valid_value("filter", "url('#a')", 'url("#a")'); // Basic reference |
| assert_valid_value("filter", "url(#a)", 'url("#a")'); // Bare unquoted reference converting to quoted form |
| assert_valid_value("filter", "url('#a') url('#b')", 'url("#a") url("#b")'); // Multiple references |
| |
| assert_valid_value("filter", "grayscale(1) url('#a')", 'grayscale(1) url("#a")'); // Reference as 2nd value |
| assert_valid_value("filter", "grayscale(1)"); // Integer value |
| assert_valid_value("filter", "grayscale(50%)"); // Percentage value |
| assert_valid_value("filter", "grayscale(1.0)", "grayscale(1)"); // Float value converts to integer |
| assert_valid_value("filter", "grayscale(0)"); // Zero value |
| assert_valid_value("filter", "grayscale()"); // No arguments |
| assert_valid_value("filter", "grayscale(1.5)", "grayscale(1)"); // Parameter greater than 1 |
| assert_valid_value("filter", "grayscale(150%)", "grayscale(100%)"); // Parameter greater than 100% |
| assert_valid_value("filter", "grayscale(0.5) grayscale(0.25)"); // Multiple values |
| |
| assert_valid_value("filter", "sepia(1)"); // Integer value |
| assert_valid_value("filter", "sepia(50%)"); // Percentage value |
| assert_valid_value("filter", "sepia(1.0)", "sepia(1)"); // Float value converts to integer |
| assert_valid_value("filter", "sepia(0)"); // Zero value |
| assert_valid_value("filter", "sepia()"); // No arguments |
| assert_valid_value("filter", "sepia(10000)", "sepia(1)"); // Parameter greater than 1 |
| assert_valid_value("filter", "sepia(1000%)", "sepia(100%)"); // Parameter greater than 100% |
| assert_valid_value("filter", "sepia(0.5) sepia(0.25)"); // Multiple values |
| |
| assert_valid_value("filter", "saturate(1)"); // Integer value |
| assert_valid_value("filter", "saturate(50%)"); // Percentage value |
| assert_valid_value("filter", "saturate(250%)"); // Percentage value > 1 |
| assert_valid_value("filter", "saturate(1.0)", "saturate(1)"); // Float value converts to integer |
| assert_valid_value("filter", "saturate(5.5)"); // Input value > 1 |
| assert_valid_value("filter", "saturate(0)"); // Zero value |
| assert_valid_value("filter", "saturate()"); // No arguments |
| assert_valid_value("filter", "saturate(0.5) saturate(0.25)"); // Multiple values |
| |
| assert_valid_value("filter", "hue-rotate(10deg)"); // Degrees value as integer |
| assert_valid_value("filter", "hue-rotate(10.0deg)", "hue-rotate(10deg)"); // Degrees float value converts to integer |
| assert_valid_value("filter", "hue-rotate(10rad)"); // Radians value |
| assert_valid_value("filter", "hue-rotate(10grad)"); // Gradians value |
| assert_valid_value("filter", "hue-rotate(0.5turn)"); // Turns value |
| assert_valid_value("filter", "hue-rotate(0)", "hue-rotate(0deg)"); // Zero value |
| assert_valid_value("filter", "hue-rotate()"); // No arguments |
| |
| assert_valid_value("filter", "invert(1)") // Integer value |
| assert_valid_value("filter", "invert(50%)"); // Percentage value |
| assert_valid_value("filter", "invert(1.0)", "invert(1)"); // Float value converts to integer |
| assert_valid_value("filter", "invert(0)"); // Zero value |
| assert_valid_value("filter", "invert()"); // No arguments |
| assert_valid_value("filter", "invert(1.5)", "invert(1)"); // Parameter greater than 1 |
| assert_valid_value("filter", "invert(150%)", "invert(100%)"); // Parameter greater than 100% |
| assert_valid_value("filter", "invert(0.5) invert(0.25)"); // Multiple values |
| |
| assert_valid_value("filter", "opacity(1)"); // Integer value |
| assert_valid_value("filter", "opacity(50%)"); // Percentage value |
| assert_valid_value("filter", "opacity(1.0)", "opacity(1)"); // Float value converts to integer |
| assert_valid_value("filter", "opacity(0)"); // Zero value |
| assert_valid_value("filter", "opacity()"); // No arguments |
| assert_valid_value("filter", "opacity(1.5)", "opacity(1)"); // Parameter greater than 1 |
| assert_valid_value("filter", "opacity(150%)", "opacity(100%)"); // Parameter greater than 100% |
| assert_valid_value("filter", "opacity(0.5) opacity(0.25)"); // Multiple values |
| |
| assert_valid_value("filter", "brightness(1)"); // Integer value |
| assert_valid_value("filter", "brightness(50%)"); // Percentage value |
| assert_valid_value("filter", "brightness(1.0)", "brightness(1)"); // Float value converts to integer |
| assert_valid_value("filter", "brightness(0)"); // Zero value |
| assert_valid_value("filter", "brightness()"); // No arguments |
| assert_valid_value("filter", "brightness(0.5) brightness(0.25)"); // Multiple values |
| assert_valid_value("filter", "brightness(101%)"); // Parameter more than 100% |
| |
| assert_valid_value("filter", "contrast(1)"); // Integer value |
| assert_valid_value("filter", "contrast(50%)"); // Percentage value |
| assert_valid_value("filter", "contrast(250%)"); // Percentage value > 1 |
| assert_valid_value("filter", "contrast(1.0)", "contrast(1)"); // Float value converts to integer |
| assert_valid_value("filter", "contrast(0)"); // Zero value |
| assert_valid_value("filter", "contrast()"); // No arguments |
| assert_valid_value("filter", "contrast(2)"); // Value greater than one |
| assert_valid_value("filter", "contrast(0.5) contrast(0.25)"); // Multiple values |
| |
| assert_valid_value("filter", "blur(0)", "blur(0px)"); // One zero to px |
| assert_valid_value("filter", "blur(10px)"); // One length |
| assert_valid_value("filter", "blur()"); // No arguments |
| |
| assert_valid_value("filter", "drop-shadow(red 1px 2px 3px)"); // Color then three values |
| assert_valid_value("filter", "drop-shadow(1px 2px 3px red)", "drop-shadow(red 1px 2px 3px)"); // Three values then color |
| assert_valid_value("filter", "drop-shadow(#abc 0 0 0)", "drop-shadow(rgb(170, 187, 204) 0px 0px 0px)"); // Color then three values with zero length |
| assert_valid_value("filter", "drop-shadow(0 0 0)", "drop-shadow(0px 0px 0px)"); // Three values with zero length |
| assert_valid_value("filter", "drop-shadow(1px 2px)"); // Two values no color |
| |
| // Combinations |
| assert_valid_value("filter", "sepia(0.5) grayscale(0.25)"); |
| assert_valid_value("filter", "saturate(0.5) grayscale(0.25)"); |
| assert_valid_value("filter", "hue-rotate(10deg) grayscale(0.25)"); |
| assert_valid_value("filter", "invert(0.5) grayscale(0.25)"); |
| assert_valid_value("filter", "opacity(0.5) grayscale(0.25)"); |
| assert_valid_value("filter", "brightness(0.5) grayscale(0.25)"); |
| assert_valid_value("filter", "grayscale(0.25) brightness(0.5)"); |
| assert_valid_value("filter", "contrast(0.5) grayscale(0.25)"); |
| assert_valid_value("filter", "grayscale(0.25) contrast(0.5)"); |
| assert_valid_value("filter", |
| "grayscale(0.5) sepia(0.25) saturate(0.75) hue-rotate(35deg) invert(0.2) opacity(0.9) blur(5px) drop-shadow(green 1px 2px 3px)"); |
| </script> |