diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js index 969b65cd51ce..61de93e7b780 100644 --- a/layout/style/test/property_database.js +++ b/layout/style/test/property_database.js @@ -4111,215 +4111,6 @@ var gCSSProperties = { other_values: [ "url(#mysym)" ], invalid_values: [] }, - "mask": { - domProp: "mask", - inherited: false, - type: CSS_TYPE_SHORTHAND_AND_LONGHAND, - /* FIXME: All mask-border-* should be added when we implement them. */ - subproperties: ["mask-clip", "mask-image", "mask-mode", "mask-origin", "mask-position", "mask-repeat", "mask-size" , "mask-composite"], - initial_values: [ "match-source", "none", "repeat", "add", "0% 0%", "top left", "left top", "0% 0% / auto", "top left / auto", "left top / auto", "0% 0% / auto auto", - "top left none", "left top none", "none left top", "none top left", "none 0% 0%", "left top / auto none", "left top / auto auto none", - "match-source none repeat add top left", "left top repeat none add", "none repeat add top left / auto", "left top / auto repeat none add match-source", "none repeat add 0% 0% / auto auto match-source" ], - other_values: [ - "none alpha repeat add left top", - "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", - "repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==') alpha left top add", - "repeat-x", - "repeat-y", - "no-repeat", - "none repeat-y alpha add 0% 0%", - "substract", - "0% top substract alpha repeat none", - "top", - "left", - "50% 50%", - "center", - "top / 100px", - "left / contain", - "left / cover", - "10px / 10%", - "10em / calc(20px)", - "top left / 100px 100px", - "top left / 100px auto", - "top left / 100px 10%", - "top left / 100px calc(20px)", - "bottom right add none alpha repeat", - "50% alpha", - "alpha 50%", - "50%", - "url(#mymask)", - "-moz-radial-gradient(10% bottom, #ffffff, black) add no-repeat", - "-moz-linear-gradient(10px 10px -45deg, red, blue) repeat", - "-moz-linear-gradient(10px 10px -0.125turn, red, blue) repeat", - "-moz-repeating-radial-gradient(10% bottom, #ffffff, black) add no-repeat", - "-moz-repeating-linear-gradient(10px 10px -45deg, red, blue) repeat", - "-moz-element(#test) alpha", - /* multiple mask-image */ - "url(404.png), url(404.png)", - "repeat-x, substract, none", - "0% top url(404.png), url(404.png) 0% top", - "substract repeat-y top left url(404.png), repeat-x alpha", - "url(404.png), -moz-linear-gradient(20px 20px -45deg, blue, green), -moz-element(#a) alpha", - "top left / contain, bottom right / cover", - /* test cases with clip+origin in the shorthand */ - "url(404.png) alpha padding-box", - "url(404.png) border-box alpha", - "content-box url(404.png)", - "url(404.png) alpha padding-box padding-box", - "url(404.png) alpha padding-box border-box", - "content-box border-box url(404.png)", - ], - invalid_values: [ - /* mixes with keywords have to be in correct order */ - "50% left", "top 50%", - /* no quirks mode colors */ - "-moz-radial-gradient(10% bottom, ffffff, black) add no-repeat", - /* no quirks mode lengths */ - "-moz-linear-gradient(10 10px -45deg, red, blue) repeat", - "-moz-linear-gradient(10px 10 -45deg, red, blue) repeat", - "linear-gradient(red -99, yellow, green, blue 120%)", - /* bug 258080: don't accept background-position separated */ - "left url(404.png) top", "top url(404.png) left", - "alpha padding-box url(404.png) border-box", - "alpha padding-box url(404.png) padding-box", - "-moz-element(#a rubbish)", - "left top / match-source" - ] - }, - "mask-clip": { - domProp: "maskClip", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "border-box" ], - other_values: [ "content-box", "padding-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box" ], - invalid_values: [ "margin-box", "content-box content-box" ] - }, - "mask-image": { - domProp: "maskImage", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ - "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==')", 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")', - "none, none", - "none, none, none, none, none", - "url(#mymask)", - "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none", - "none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none", - "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", - ].concat(validGradientAndElementValues), - invalid_values: [ - ].concat(invalidGradientAndElementValues), - unbalanced_values: [ - ].concat(unbalancedGradientAndElementValues) - }, - "mask-mode": { - domProp: "maskMode", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "match-source" ], - other_values: [ "alpha", "luminance", "match-source, match-source", "match-source, alpha", "alpha, luminance, match-source"], - invalid_values: [ "match-source match-source", "alpha match-source" ] - }, - "mask-composite": { - domProp: "maskComposite", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "add" ], - other_values: [ "substract", "intersect", "exclude", "add, add", "substract, intersect", "substract, substract, add"], - invalid_values: [ "add substract", "intersect exclude" ] - }, - "mask-origin": { - domProp: "maskOrigin", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "padding-box" ], - other_values: [ "border-box", "content-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box" ], - invalid_values: [ "margin-box", "padding-box padding-box" ] - }, - "mask-position": { - domProp: "maskPosition", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "top 0% left 0%", "top 0% left", "top left", "left top", "0% 0%", "0% top", "left 0%" ], - other_values: [ "top", "left", "right", "bottom", "center", "center bottom", "bottom center", "center right", "right center", "center top", "top center", "center left", "left center", "right bottom", "bottom right", "50%", "top left, top left", "top left, top right", "top right, top left", "left top, 0% 0%", "10% 20%, 30%, 40%", "top left, bottom right", "right bottom, left top", "0%", "0px", "30px", "0%, 10%, 20%, 30%", "top, top, top, top, top", - "calc(20px)", - "calc(20px) 10px", - "10px calc(20px)", - "calc(20px) 25%", - "25% calc(20px)", - "calc(20px) calc(20px)", - "calc(20px + 1em) calc(20px / 2)", - "calc(20px + 50%) calc(50% - 10px)", - "calc(-20px) calc(-50%)", - "calc(-20%) calc(-50%)", - "0px 0px", - "right 20px top 60px", - "right 20px bottom 60px", - "left 20px top 60px", - "left 20px bottom 60px", - "right -50px top -50px", - "left -50px bottom -50px", - "right 20px top -50px", - "right -20px top 50px", - "right 3em bottom 10px", - "bottom 3em right 10px", - "top 3em right 10px", - "left 15px", - "10px top", - "left top 15px", - "left 10px top", - "left 20%", - "right 20%" - ], - invalid_values: [ "center 10px center 4px", "center 10px center", - "top 20%", "bottom 20%", "50% left", "top 50%", - "50% bottom 10%", "right 10% 50%", "left right", - "top bottom", "left 10% right", - "top 20px bottom 20px", "left left", - "0px calc(0px + rubbish)"], - }, - "mask-repeat": { - domProp: "maskRepeat", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "repeat", "repeat repeat" ], - other_values: [ "repeat-x", "repeat-y", "no-repeat", - "repeat-x, repeat-x", - "repeat, no-repeat", - "repeat-y, no-repeat, repeat-y", - "repeat, repeat, repeat", - "repeat no-repeat", - "no-repeat repeat", - "no-repeat no-repeat", - "repeat repeat, repeat repeat", - ], - invalid_values: [ "repeat repeat repeat", - "repeat-x repeat-y", - "repeat repeat-x", - "repeat repeat-y", - "repeat-x repeat", - "repeat-y repeat" ] - }, - "mask-size": { - domProp: "maskSize", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "auto", "auto auto" ], - other_values: [ "contain", "cover", "100px auto", "auto 100px", "100% auto", "auto 100%", "25% 50px", "3em 40%", - "calc(20px)", - "calc(20px) 10px", - "10px calc(20px)", - "calc(20px) 25%", - "25% calc(20px)", - "calc(20px) calc(20px)", - "calc(20px + 1em) calc(20px / 2)", - "calc(20px + 50%) calc(50% - 10px)", - "calc(-20px) calc(-50%)", - "calc(-20%) calc(-50%)" - ], - invalid_values: [ "contain contain", "cover cover", "cover auto", "auto cover", "contain cover", "cover contain", "-5px 3px", "3px -5px", "auto -5px", "-5px auto", "5 3", "10px calc(10px + rubbish)" ] - }, "shape-rendering": { domProp: "shapeRendering", inherited: true, @@ -6932,6 +6723,231 @@ if (IsCSSPropertyPrefEnabled("layout.css.scroll-snap.enabled")) { }; } +function SupportsMaskShorthand() { + return "maskImage" in document.documentElement.style; +} + +if (SupportsMaskShorthand()) { + gCSSProperties["mask"] = { + domProp: "mask", + inherited: false, + type: CSS_TYPE_SHORTHAND_AND_LONGHAND, + /* FIXME: All mask-border-* should be added when we implement them. */ + subproperties: ["mask-clip", "mask-image", "mask-mode", "mask-origin", "mask-position", "mask-repeat", "mask-size" , "mask-composite"], + initial_values: [ "match-source", "none", "repeat", "add", "0% 0%", "top left", "left top", "0% 0% / auto", "top left / auto", "left top / auto", "0% 0% / auto auto", + "top left none", "left top none", "none left top", "none top left", "none 0% 0%", "left top / auto none", "left top / auto auto none", + "match-source none repeat add top left", "left top repeat none add", "none repeat add top left / auto", "left top / auto repeat none add match-source", "none repeat add 0% 0% / auto auto match-source" ], + other_values: [ + "none alpha repeat add left top", + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", + "repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==') alpha left top add", + "repeat-x", + "repeat-y", + "no-repeat", + "none repeat-y alpha add 0% 0%", + "substract", + "0% top substract alpha repeat none", + "top", + "left", + "50% 50%", + "center", + "top / 100px", + "left / contain", + "left / cover", + "10px / 10%", + "10em / calc(20px)", + "top left / 100px 100px", + "top left / 100px auto", + "top left / 100px 10%", + "top left / 100px calc(20px)", + "bottom right add none alpha repeat", + "50% alpha", + "alpha 50%", + "50%", + "url(#mymask)", + "-moz-radial-gradient(10% bottom, #ffffff, black) add no-repeat", + "-moz-linear-gradient(10px 10px -45deg, red, blue) repeat", + "-moz-linear-gradient(10px 10px -0.125turn, red, blue) repeat", + "-moz-repeating-radial-gradient(10% bottom, #ffffff, black) add no-repeat", + "-moz-repeating-linear-gradient(10px 10px -45deg, red, blue) repeat", + "-moz-element(#test) alpha", + /* multiple mask-image */ + "url(404.png), url(404.png)", + "repeat-x, substract, none", + "0% top url(404.png), url(404.png) 0% top", + "substract repeat-y top left url(404.png), repeat-x alpha", + "url(404.png), -moz-linear-gradient(20px 20px -45deg, blue, green), -moz-element(#a) alpha", + "top left / contain, bottom right / cover", + /* test cases with clip+origin in the shorthand */ + "url(404.png) alpha padding-box", + "url(404.png) border-box alpha", + "content-box url(404.png)", + "url(404.png) alpha padding-box padding-box", + "url(404.png) alpha padding-box border-box", + "content-box border-box url(404.png)", + ], + invalid_values: [ + /* mixes with keywords have to be in correct order */ + "50% left", "top 50%", + /* no quirks mode colors */ + "-moz-radial-gradient(10% bottom, ffffff, black) add no-repeat", + /* no quirks mode lengths */ + "-moz-linear-gradient(10 10px -45deg, red, blue) repeat", + "-moz-linear-gradient(10px 10 -45deg, red, blue) repeat", + "linear-gradient(red -99, yellow, green, blue 120%)", + /* bug 258080: don't accept background-position separated */ + "left url(404.png) top", "top url(404.png) left", + "alpha padding-box url(404.png) border-box", + "alpha padding-box url(404.png) padding-box", + "-moz-element(#a rubbish)", + "left top / match-source" + ] + }; + gCSSProperties["mask-clip"] = { + domProp: "maskClip", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "border-box" ], + other_values: [ "content-box", "padding-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box" ], + invalid_values: [ "margin-box", "content-box content-box" ] + }; + gCSSProperties["mask-image"] = { + domProp: "maskImage", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "none" ], + other_values: [ + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==')", 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")', + "none, none", + "none, none, none, none, none", + "url(#mymask)", + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none", + "none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none", + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)", + ].concat(validGradientAndElementValues), + invalid_values: [ + ].concat(invalidGradientAndElementValues), + unbalanced_values: [ + ].concat(unbalancedGradientAndElementValues) + }; + gCSSProperties["mask-mode"] = { + domProp: "maskMode", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "match-source" ], + other_values: [ "alpha", "luminance", "match-source, match-source", "match-source, alpha", "alpha, luminance, match-source"], + invalid_values: [ "match-source match-source", "alpha match-source" ] + }; + gCSSProperties["mask-composite"] = { + domProp: "maskComposite", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "add" ], + other_values: [ "substract", "intersect", "exclude", "add, add", "substract, intersect", "substract, substract, add"], + invalid_values: [ "add substract", "intersect exclude" ] + }; + gCSSProperties["mask-origin"] = { + domProp: "maskOrigin", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "padding-box" ], + other_values: [ "border-box", "content-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box" ], + invalid_values: [ "margin-box", "padding-box padding-box" ] + }; + gCSSProperties["mask-position"] = { + domProp: "maskPosition", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "top 0% left 0%", "top 0% left", "top left", "left top", "0% 0%", "0% top", "left 0%" ], + other_values: [ "top", "left", "right", "bottom", "center", "center bottom", "bottom center", "center right", "right center", "center top", "top center", "center left", "left center", "right bottom", "bottom right", "50%", "top left, top left", "top left, top right", "top right, top left", "left top, 0% 0%", "10% 20%, 30%, 40%", "top left, bottom right", "right bottom, left top", "0%", "0px", "30px", "0%, 10%, 20%, 30%", "top, top, top, top, top", + "calc(20px)", + "calc(20px) 10px", + "10px calc(20px)", + "calc(20px) 25%", + "25% calc(20px)", + "calc(20px) calc(20px)", + "calc(20px + 1em) calc(20px / 2)", + "calc(20px + 50%) calc(50% - 10px)", + "calc(-20px) calc(-50%)", + "calc(-20%) calc(-50%)", + "0px 0px", + "right 20px top 60px", + "right 20px bottom 60px", + "left 20px top 60px", + "left 20px bottom 60px", + "right -50px top -50px", + "left -50px bottom -50px", + "right 20px top -50px", + "right -20px top 50px", + "right 3em bottom 10px", + "bottom 3em right 10px", + "top 3em right 10px", + "left 15px", + "10px top", + "left top 15px", + "left 10px top", + "left 20%", + "right 20%" + ], + invalid_values: [ "center 10px center 4px", "center 10px center", + "top 20%", "bottom 20%", "50% left", "top 50%", + "50% bottom 10%", "right 10% 50%", "left right", + "top bottom", "left 10% right", + "top 20px bottom 20px", "left left", + "0px calc(0px + rubbish)"], + }; + gCSSProperties["mask-repeat"] = { + domProp: "maskRepeat", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "repeat", "repeat repeat" ], + other_values: [ "repeat-x", "repeat-y", "no-repeat", + "repeat-x, repeat-x", + "repeat, no-repeat", + "repeat-y, no-repeat, repeat-y", + "repeat, repeat, repeat", + "repeat no-repeat", + "no-repeat repeat", + "no-repeat no-repeat", + "repeat repeat, repeat repeat", + ], + invalid_values: [ "repeat repeat repeat", + "repeat-x repeat-y", + "repeat repeat-x", + "repeat repeat-y", + "repeat-x repeat", + "repeat-y repeat" ] + }; + gCSSProperties["mask-size"] = { + domProp: "maskSize", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "auto", "auto auto" ], + other_values: [ "contain", "cover", "100px auto", "auto 100px", "100% auto", "auto 100%", "25% 50px", "3em 40%", + "calc(20px)", + "calc(20px) 10px", + "10px calc(20px)", + "calc(20px) 25%", + "25% calc(20px)", + "calc(20px) calc(20px)", + "calc(20px + 1em) calc(20px / 2)", + "calc(20px + 50%) calc(50% - 10px)", + "calc(-20px) calc(-50%)", + "calc(-20%) calc(-50%)" + ], + invalid_values: [ "contain contain", "cover cover", "cover auto", "auto cover", "contain cover", "cover contain", "-5px 3px", "3px -5px", "auto -5px", "-5px auto", "5 3", "10px calc(10px + rubbish)" ] + }; +} else { + gCSSProperties["mask"] = { + domProp: "mask", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "none" ], + other_values: [ "url(#mymask)" ], + invalid_values: [] + }; +} + if (IsCSSPropertyPrefEnabled("layout.css.prefixes.webkit")) { gCSSProperties["-webkit-animation"] = { domProp: "webkitAnimation", @@ -7214,64 +7230,67 @@ if (IsCSSPropertyPrefEnabled("layout.css.prefixes.webkit")) { alias_for: "-moz-user-select", subproperties: [ "-moz-user-select" ], }; - gCSSProperties["-webkit-mask"] = { - domProp: "webkitMask", - inherited: false, - type: CSS_TYPE_TRUE_SHORTHAND, - alias_for: "mask", - subproperties: [ "mask-clip", "mask-image", "mask-mode", "mask-origin", "mask-position", "mask-repeat", "mask-size" , "mask-composite" ], - }; - gCSSProperties["-webkit-mask-clip"] = { - domProp: "webkitMaskClip", - inherited: false, - type: CSS_TYPE_SHORTHAND_AND_LONGHAND, - alias_for: "mask-clip", - subproperties: [ "mask-clip" ], - }; - gCSSProperties["-webkit-mask-composite"] = { - domProp: "webkitMaskComposite", - inherited: false, - type: CSS_TYPE_SHORTHAND_AND_LONGHAND, - alias_for: "mask-composite", - subproperties: [ "mask-composite" ], - }; + if (SupportsMaskShorthand()) { + gCSSProperties["-webkit-mask"] = { + domProp: "webkitMask", + inherited: false, + type: CSS_TYPE_TRUE_SHORTHAND, + alias_for: "mask", + subproperties: [ "mask-clip", "mask-image", "mask-mode", "mask-origin", "mask-position", "mask-repeat", "mask-size" , "mask-composite" ], + }; + gCSSProperties["-webkit-mask-clip"] = { + domProp: "webkitMaskClip", + inherited: false, + type: CSS_TYPE_SHORTHAND_AND_LONGHAND, + alias_for: "mask-clip", + subproperties: [ "mask-clip" ], + }; - gCSSProperties["-webkit-mask-image"] = { - domProp: "webkitMaskImage", - inherited: false, - type: CSS_TYPE_SHORTHAND_AND_LONGHAND, - alias_for: "mask-image", - subproperties: [ "mask-image" ], - }; - gCSSProperties["-webkit-mask-origin"] = { - domProp: "webkitMaskOrigin", - inherited: false, - type: CSS_TYPE_SHORTHAND_AND_LONGHAND, - alias_for: "mask-origin", - subproperties: [ "mask-origin" ], - }; - gCSSProperties["-webkit-mask-position"] = { - domProp: "webkitMaskPosition", - inherited: false, - type: CSS_TYPE_SHORTHAND_AND_LONGHAND, - alias_for: "mask-position", - subproperties: [ "mask-position" ], - }; - gCSSProperties["-webkit-mask-repeat"] = { - domProp: "webkitMaskRepeat", - inherited: false, - type: CSS_TYPE_SHORTHAND_AND_LONGHAND, - alias_for: "mask-repeat", - subproperties: [ "mask-repeat" ], - }; - gCSSProperties["-webkit-mask-size"] = { - domProp: "webkitMaskSize", - inherited: false, - type: CSS_TYPE_SHORTHAND_AND_LONGHAND, - alias_for: "mask-size", - subproperties: [ "mask-size" ], - }; + gCSSProperties["-webkit-mask-composite"] = { + domProp: "webkitMaskComposite", + inherited: false, + type: CSS_TYPE_SHORTHAND_AND_LONGHAND, + alias_for: "mask-composite", + subproperties: [ "mask-composite" ], + }; + + gCSSProperties["-webkit-mask-image"] = { + domProp: "webkitMaskImage", + inherited: false, + type: CSS_TYPE_SHORTHAND_AND_LONGHAND, + alias_for: "mask-image", + subproperties: [ "mask-image" ], + }; + gCSSProperties["-webkit-mask-origin"] = { + domProp: "webkitMaskOrigin", + inherited: false, + type: CSS_TYPE_SHORTHAND_AND_LONGHAND, + alias_for: "mask-origin", + subproperties: [ "mask-origin" ], + }; + gCSSProperties["-webkit-mask-position"] = { + domProp: "webkitMaskPosition", + inherited: false, + type: CSS_TYPE_SHORTHAND_AND_LONGHAND, + alias_for: "mask-position", + subproperties: [ "mask-position" ], + }; + gCSSProperties["-webkit-mask-repeat"] = { + domProp: "webkitMaskRepeat", + inherited: false, + type: CSS_TYPE_SHORTHAND_AND_LONGHAND, + alias_for: "mask-repeat", + subproperties: [ "mask-repeat" ], + }; + gCSSProperties["-webkit-mask-size"] = { + domProp: "webkitMaskSize", + inherited: false, + type: CSS_TYPE_SHORTHAND_AND_LONGHAND, + alias_for: "mask-size", + subproperties: [ "mask-size" ], + }; + } } if (IsCSSPropertyPrefEnabled("layout.css.unset-value.enabled")) { diff --git a/layout/style/test/test_transitions_per_property.html b/layout/style/test/test_transitions_per_property.html index af5d38458e78..b11c51ea6f90 100644 --- a/layout/style/test/test_transitions_per_property.html +++ b/layout/style/test/test_transitions_per_property.html @@ -170,16 +170,6 @@ var supported_properties = { test_length_unclamped, test_percent_unclamped ], "marker-offset": [ test_length_transition, test_length_unclamped ], - "mask-position": [ test_background_position_transition, - // FIXME: We don't currently test clamping, - // since mask-position uses calc() as - // an intermediate form. - /* test_length_percent_pair_unclamped */ ], - "mask-size": [ test_background_size_transition, - // FIXME: We don't currently test clamping, - // since mask-size uses calc() as an - // intermediate form. - /* test_length_percent_pair_clamped */ ], "max-height": [ test_length_transition, test_percent_transition, test_length_percent_calc_transition, test_length_clamped, test_percent_clamped ], @@ -269,6 +259,19 @@ var supported_properties = { "z-index": [ test_integer_transition, test_pos_integer_or_auto_transition ], }; +if (SupportsMaskShorthand()) { + supported_properties["mask-position"] = [ test_background_position_transition, + // FIXME: We don't currently test clamping, + // since mask-position uses calc() as + // an intermediate form. + /* test_length_percent_pair_unclamped */ ]; + supported_properties["mask-size"] = [ test_background_size_transition, + // FIXME: We don't currently test clamping, + // since mask-size uses calc() as an + // intermediate form. + /* test_length_percent_pair_clamped */ ]; +} + var div = document.getElementById("display"); var OMTAdiv = document.getElementById("transformTest"); var cs = getComputedStyle(div, "");