mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-24 13:21:05 +00:00
Bug 1243734 - Part 2. Set up gCSSProperties depends on mask-as-shorthand; r=dbaron
MozReview-Commit-ID: 4QBJtezm9Tt
This commit is contained in:
CJKu
parent
27044084c1
commit
9aa8a082cd
@ -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")) {
|
||||
|
||||
@ -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, "");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user