| <!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 parsing of the image-set and -webkit-image-set functions."); |
| |
| function jsWrapperClass(node) |
| { |
| if (!node) |
| return "[null]"; |
| var string = Object.prototype.toString.apply(node); |
| return string.substr(8, string.length - 9); |
| } |
| |
| function shouldBeType(expression, className) |
| { |
| shouldBe("jsWrapperClass(" + expression + ")", "'" + className + "'"); |
| shouldBe("jsWrapperClass(" + expression + ".__proto__)", "'" + className + "'"); |
| shouldBe("jsWrapperClass(" + expression + ".constructor)", "'Function'"); |
| } |
| |
| // These have to be global for the test helpers to see them. |
| var imageSetRule, serializedRule |
| |
| function testImageSetRule(description, property, rule, expectedSerialization) |
| { |
| ["image-set", "-webkit-image-set"].forEach((valueName) => { |
| debug(""); |
| debug(`${description}: ${valueName}(${rule})`); |
| |
| var div = document.createElement("div"); |
| div.setAttribute("style", property + ": " + valueName + "(" + rule + ")"); |
| document.body.appendChild(div); |
| |
| imageSetRule = div.style.getPropertyCSSValue(property); |
| shouldBeType("imageSetRule", "CSSValueList"); |
| |
| serializedRule = div.style.getPropertyValue(property); |
| expectTrue(serializedRule == `image-set(${expectedSerialization})`, "Image Set rule serializes as expected."); |
| |
| document.body.removeChild(div); |
| }); |
| } |
| |
| testImageSetRule("Single value for -webkit-mask-box-image-source", |
| "-webkit-mask-box-image-source", |
| "url('#a')", |
| "url(\"#a\") 1x"); |
| |
| testImageSetRule("Multiple values for -webkit-mask-box-image-source", |
| "-webkit-mask-box-image-source", |
| "url('#a'), url('#b') 2x", |
| "url(\"#a\") 1x, url(\"#b\") 2x"); |
| |
| testImageSetRule("Single value for -webkit-mask-box-image-source with gradient.", |
| "-webkit-mask-box-image-source", |
| "linear-gradient(green, white)", |
| "linear-gradient(green, white) 1x"); |
| |
| testImageSetRule("Multiple values for -webkit-mask-box-image-source with gradients", |
| "-webkit-mask-box-image-source", |
| "linear-gradient(green, white) 1x, radial-gradient(blue, white) 2x", |
| "linear-gradient(green, white) 1x, radial-gradient(blue, white) 2x"); |
| |
| testImageSetRule("Combined gradient and URL for -webkit-mask-box-image-source", |
| "-webkit-mask-box-image-source", |
| "url(\"#a\"), linear-gradient(green, white) 2x", |
| "url(\"#a\") 1x, linear-gradient(green, white) 2x"); |
| |
| testImageSetRule("Single -webkit-cross-fade for -webkit-mask-box-image-source", |
| "-webkit-mask-box-image-source", |
| "-webkit-cross-fade(url(\"#a\"), url(\"#b\"), 70%)", |
| "-webkit-cross-fade(url(\"#a\"), url(\"#b\"), 0.7) 1x"); |
| |
| testImageSetRule("Combined gradient and cross-fade for -webkit-mask-box-image-source", |
| "-webkit-mask-box-image-source", |
| "-webkit-cross-fade(url(\"#a\"), url(\"#b\"), 70%), linear-gradient(green, white) 2x", |
| "-webkit-cross-fade(url(\"#a\"), url(\"#b\"), 0.7) 1x, linear-gradient(green, white) 2x"); |
| |
| testImageSetRule("Single value for -webkit-mask-box-image-source with gradient and dpi", |
| "-webkit-mask-box-image-source", |
| "linear-gradient(green, white) 192dpi", |
| "linear-gradient(green, white) 192dpi"); |
| |
| successfullyParsed = true; |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
