| <!DOCTYPE html> |
| <html> |
| <style> |
| * { font-size: 16px; } |
| div { font-size: 8px; } |
| </style> |
| <body> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script> |
| description('Test parsing and computation of CSS image filter() function.'); |
| |
| function computedStyle(property, value) { |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| div.style.setProperty(property, value); |
| var computedValue = getComputedStyle(div).getPropertyValue(property); |
| document.body.removeChild(div); |
| return computedValue; |
| } |
| |
| function innerStyle(property, value) { |
| var div = document.createElement("div"); |
| div.style.setProperty(property, value); |
| return div.style.getPropertyValue(property); |
| } |
| |
| function testComputed(property, value, expected) { |
| shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected); |
| } |
| |
| function testInner(property, value, expected) { |
| if (expected === null) |
| expected = ""; |
| shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected); |
| } |
| |
| function negativeTest(property, value) { |
| testInner(property, value, null); |
| // FIXME: Computed style not yet implemented. |
| testComputed(property, value, 'none'); |
| } |
| |
| // Test different filter combination. |
| testInner( |
| "background-image", |
| "filter(none, blur(3px))", |
| "filter(none, blur(3px))"); |
| testInner( |
| "background-image", |
| "filter(none, url(#a))", |
| "filter(none, url(\"#a\"))"); |
| testInner( |
| "background-image", |
| "filter(none, url(#a))", |
| "filter(none, url(\"#a\"))"); |
| testInner( |
| "background-image", |
| "filter(none, url(#a) url(#b))", |
| "filter(none, url(\"#a\") url(\"#b\"))"); |
| testInner( |
| "background-image", |
| "filter(none, grayscale(1) url(#a))", |
| "filter(none, grayscale(1) url(\"#a\"))"); |
| testInner( |
| "background-image", |
| "filter(none, grayscale(1))", |
| "filter(none, grayscale(1))"); |
| testInner( |
| "background-image", |
| "filter(none, grayscale(50%))", |
| "filter(none, grayscale(50%))"); |
| testInner( |
| "background-image", |
| "filter(none, grayscale(1.0))", |
| "filter(none, grayscale(1))"); |
| testInner( |
| "background-image", |
| "filter(none, grayscale(0))", |
| "filter(none, grayscale(0))"); |
| testInner( |
| "background-image", |
| "filter(none, grayscale(0.5) grayscale(0.25))", |
| "filter(none, grayscale(0.5) grayscale(0.25))"); |
| testInner( |
| "background-image", |
| "filter(none, sepia(1))", |
| "filter(none, sepia(1))"); |
| testInner( |
| "background-image", |
| "filter(none, sepia(50%))", |
| "filter(none, sepia(50%))"); |
| testInner( |
| "background-image", |
| "filter(none, sepia(1.0))", |
| "filter(none, sepia(1))"); |
| testInner( |
| "background-image", |
| "filter(none, sepia(0))", |
| "filter(none, sepia(0))"); |
| testInner( |
| "background-image", |
| "filter(none, sepia(0.5) sepia(0.25))", |
| "filter(none, sepia(0.5) sepia(0.25))"); |
| testInner( |
| "background-image", |
| "filter(none, sepia(0.5) grayscale(0.25))", |
| "filter(none, sepia(0.5) grayscale(0.25))"); |
| testInner( |
| "background-image", |
| "filter(none, saturate(1))", |
| "filter(none, saturate(1))"); |
| testInner( |
| "background-image", |
| "filter(none, saturate(50%))", |
| "filter(none, saturate(50%))"); |
| testInner( |
| "background-image", |
| "filter(none, saturate(250%))", |
| "filter(none, saturate(250%))"); |
| testInner( |
| "background-image", |
| "filter(none, saturate(1.0))", |
| "filter(none, saturate(1))"); |
| testInner( |
| "background-image", |
| "filter(none, saturate(5.5))", |
| "filter(none, saturate(5.5))"); |
| testInner( |
| "background-image", |
| "filter(none, saturate(0))", |
| "filter(none, saturate(0))"); |
| testInner( |
| "background-image", |
| "filter(none, saturate(0.5) saturate(0.25))", |
| "filter(none, saturate(0.5) saturate(0.25))"); |
| testInner( |
| "background-image", |
| "filter(none, saturate(0.5) grayscale(0.25))", |
| "filter(none, saturate(0.5) grayscale(0.25))"); |
| testInner( |
| "background-image", |
| "filter(none, hue-rotate(10deg))", |
| "filter(none, hue-rotate(10deg))"); |
| testInner( |
| "background-image", |
| "filter(none, hue-rotate(10.0deg))", |
| "filter(none, hue-rotate(10deg))"); |
| testInner( |
| "background-image", |
| "filter(none, hue-rotate(10rad))", |
| "filter(none, hue-rotate(10rad))"); |
| testInner( |
| "background-image", |
| "filter(none, hue-rotate(10grad))", |
| "filter(none, hue-rotate(10grad))"); |
| testInner( |
| "background-image", |
| "filter(none, hue-rotate(0.5turn))", |
| "filter(none, hue-rotate(0.5turn))"); |
| testInner( |
| "background-image", |
| "filter(none, hue-rotate(0))", |
| "filter(none, hue-rotate(0deg))"); |
| testInner( |
| "background-image", |
| "filter(none, hue-rotate(10deg) grayscale(0.25))", |
| "filter(none, hue-rotate(10deg) grayscale(0.25))"); |
| testInner( |
| "background-image", |
| "filter(none, invert(1))", |
| "filter(none, invert(1))"); |
| testInner( |
| "background-image", |
| "filter(none, invert(50%))", |
| "filter(none, invert(50%))"); |
| testInner( |
| "background-image", |
| "filter(none, invert(1.0))", |
| "filter(none, invert(1))"); |
| testInner( |
| "background-image", |
| "filter(none, invert(0))", |
| "filter(none, invert(0))"); |
| testInner( |
| "background-image", |
| "filter(none, invert(0.5) invert(0.25))", |
| "filter(none, invert(0.5) invert(0.25))"); |
| testInner( |
| "background-image", |
| "filter(none, invert(0.5) grayscale(0.25))", |
| "filter(none, invert(0.5) grayscale(0.25))"); |
| testInner( |
| "background-image", |
| "filter(none, opacity(1))", |
| "filter(none, opacity(1))"); |
| testInner( |
| "background-image", |
| "filter(none, opacity(50%))", |
| "filter(none, opacity(50%))"); |
| testInner( |
| "background-image", |
| "filter(none, opacity(1.0))", |
| "filter(none, opacity(1))"); |
| testInner( |
| "background-image", |
| "filter(none, opacity(0))", |
| "filter(none, opacity(0))"); |
| testInner( |
| "background-image", |
| "filter(none, opacity(0.5) opacity(0.25))", |
| "filter(none, opacity(0.5) opacity(0.25))"); |
| testInner( |
| "background-image", |
| "filter(none, opacity(0.5) grayscale(0.25))", |
| "filter(none, opacity(0.5) grayscale(0.25))"); |
| testInner( |
| "background-image", |
| "filter(none, brightness(1))", |
| "filter(none, brightness(1))"); |
| testInner( |
| "background-image", |
| "filter(none, brightness(50%))", |
| "filter(none, brightness(50%))"); |
| testInner( |
| "background-image", |
| "filter(none, brightness(1.0))", |
| "filter(none, brightness(1))"); |
| testInner( |
| "background-image", |
| "filter(none, brightness(0))", |
| "filter(none, brightness(0))"); |
| testInner( |
| "background-image", |
| "filter(none, brightness(0.5) brightness(0.25))", |
| "filter(none, brightness(0.5) brightness(0.25))"); |
| testInner( |
| "background-image", |
| "filter(none, brightness(0.5) grayscale(0.25))", |
| "filter(none, brightness(0.5) grayscale(0.25))"); |
| testInner( |
| "background-image", |
| "filter(none, brightness(-1.1))", |
| ""); |
| testInner( |
| "background-image", |
| "filter(none, brightness(101%))", |
| "filter(none, brightness(101%))"); |
| testInner( |
| "background-image", |
| "filter(none, grayscale(0.25) brightness(0.5))", |
| "filter(none, grayscale(0.25) brightness(0.5))"); |
| testInner( |
| "background-image", |
| "filter(none, contrast(1))", |
| "filter(none, contrast(1))"); |
| testInner( |
| "background-image", |
| "filter(none, contrast(50%))", |
| "filter(none, contrast(50%))"); |
| testInner( |
| "background-image", |
| "filter(none, contrast(250%))", |
| "filter(none, contrast(250%))"); |
| testInner( |
| "background-image", |
| "filter(none, contrast(1.0))", |
| "filter(none, contrast(1))"); |
| testInner( |
| "background-image", |
| "filter(none, contrast(0))", |
| "filter(none, contrast(0))"); |
| testInner( |
| "background-image", |
| "filter(none, contrast(2))", |
| "filter(none, contrast(2))"); |
| testInner( |
| "background-image", |
| "filter(none, contrast(0.5) contrast(0.25))", |
| "filter(none, contrast(0.5) contrast(0.25))"); |
| testInner( |
| "background-image", |
| "filter(none, contrast(0.5) grayscale(0.25))", |
| "filter(none, contrast(0.5) grayscale(0.25))"); |
| testInner( |
| "background-image", |
| "filter(none, grayscale(0.25) contrast(0.5))", |
| "filter(none, grayscale(0.25) contrast(0.5))"); |
| testInner( |
| "background-image", |
| "filter(none, blur(0))", |
| "filter(none, blur(0px))"); |
| testInner( |
| "background-image", |
| "filter(none, blur(10px))", |
| "filter(none, blur(10px))"); |
| testInner( |
| "background-image", |
| "filter(none, drop-shadow(red 1px 2px 3px))", |
| "filter(none, drop-shadow(red 1px 2px 3px))"); |
| testInner( |
| "background-image", |
| "filter(none, drop-shadow(1px 2px 3px red))", |
| "filter(none, drop-shadow(red 1px 2px 3px))"); |
| testInner( |
| "background-image", |
| "filter(none, drop-shadow(#abc 0 0 0))", |
| "filter(none, drop-shadow(rgb(170, 187, 204) 0px 0px 0px))"); |
| testInner( |
| "background-image", |
| "filter(none, drop-shadow(0 0 0))", |
| "filter(none, drop-shadow(0px 0px 0px))"); |
| testInner( |
| "background-image", |
| "filter(none, drop-shadow(1px 2px))", |
| "filter(none, drop-shadow(1px 2px))"); |
| testInner( |
| "background-image", |
| "filter(none, 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))", |
| "filter(none, 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))"); |
| |
| // Test different CSS Image values. |
| testInner( |
| "background-image", |
| "filter(radial-gradient(ellipse closest-corner, white, black), hue-rotate(90deg))", |
| "filter(radial-gradient(closest-corner, white, black), hue-rotate(90deg))"); |
| testInner( |
| "background-image", |
| "filter(radial-gradient(circle closest-side at 50px 50%, white, black), hue-rotate(90deg))", |
| "filter(radial-gradient(circle closest-side at 50px 50%, white, black), hue-rotate(90deg))"); |
| testInner( |
| "background-image", |
| "filter(radial-gradient(ellipse closest-corner at 20px 50px, white, black), hue-rotate(90deg))", |
| "filter(radial-gradient(closest-corner at 20px 50px, white, black), hue-rotate(90deg))"); |
| testInner( |
| "background-image", |
| "filter(linear-gradient(white, black), hue-rotate(90deg))", |
| "filter(linear-gradient(white, black), hue-rotate(90deg))"); |
| testInner( |
| "background-image", |
| "filter(linear-gradient(to top left, white, black), hue-rotate(90deg))", |
| "filter(linear-gradient(to left top, white, black), hue-rotate(90deg))"); |
| testInner( |
| "background-image", |
| "filter(linear-gradient(0deg, white -20%, blue, black 120%), hue-rotate(90deg))", |
| "filter(linear-gradient(0deg, white -20%, blue, black 120%), hue-rotate(90deg))"); |
| testInner( |
| "background-image", |
| "filter(-webkit-cross-fade(url(http://image1.png), url(http://image2.png), 50%), contrast(0.5))", |
| "filter(-webkit-cross-fade(url(\"http://image1.png/\"), url(\"http://image2.png/\"), 0.5), contrast(0.5))"); |
| testInner( |
| "background-image", |
| "filter(url(http://image1.png), brightness(50%))", |
| "filter(url(\"http://image1.png/\"), brightness(50%))"); |
| testInner( |
| "background-image", |
| "filter(url('http://image1.png'), brightness(50%))", |
| "filter(url(\"http://image1.png/\"), brightness(50%))"); |
| |
| // Test different properties, taking CSS Image values. |
| testInner( |
| "border-image-source", |
| "filter(url(http://image1.png), invert(50%))", |
| "filter(url(\"http://image1.png/\"), invert(50%))"); |
| testInner( |
| "-webkit-mask-image", |
| "filter(url(http://image1.png), invert(50%))", |
| "filter(url(\"http://image1.png/\"), invert(50%))"); |
| testInner( |
| "-webkit-mask-box-image-source", |
| "filter(url(http://image1.png), invert(50%))", |
| "filter(url(\"http://image1.png/\"), invert(50%))"); |
| testInner( |
| "content", |
| "filter(url(http://image1.png), invert(50%))", |
| "filter(url(\"http://image1.png/\"), invert(50%))"); |
| |
| // negative tests |
| negativeTest("background-image", "filter()"); |
| negativeTest("background-image", "filter(url(image1.png))"); |
| negativeTest("background-image", "filter(url(image1.png), )"); |
| negativeTest("background-image", "filter(url(image1.png) brightness(50%))"); |
| negativeTest("background-image", "filter(brightness(50%) url(image1.png))"); |
| negativeTest("background-image", "filter(brightness(50%), url(image1.png))"); |
| negativeTest("background-image", "filter(url(image1.png) url(#filter))"); |
| negativeTest("background-image", "filter(brightness(50%))"); |
| negativeTest("background-image", "filter(brightness(50%), )"); |
| negativeTest("background-image", "filter(url(image1.png), brightness(50%), brightness(50%))"); |
| negativeTest("background-image", "filter(url(image1.png) url(image2.png), brightness(50%))"); |
| negativeTest("background-image", "filter(url(image1.png), url(image2.png), brightness(50%))"); |
| negativeTest("background-image", "filter(invalidToken.png, blur(3px))"); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
