ref: dfab56b94698b9ebb5291931a9f67c6cebac8881
dir: opossum/domino-lib/CSSStyleDeclaration.js
"use strict";
var parserlib = require('./cssparser');
module.exports = CSSStyleDeclaration;
function CSSStyleDeclaration(elt) {
this._element = elt;
}
// Utility function for parsing style declarations
// Pass in a string like "margin-left: 5px; border-style: solid"
// and this function returns an object like
// {"margin-left":"5px", "border-style":"solid"}
function parseStyles(s) {
var parser = new parserlib.css.Parser();
var result = { property: Object.create(null), priority: Object.create(null) };
parser.addListener("property", function(e) {
if (e.invalid) return; // Skip errors
result.property[e.property.text] = e.value.text;
if (e.important) result.priority[e.property.text] = 'important';
});
s = (''+s).replace(/^;/, '');
parser.parseStyleAttribute(s);
return result;
}
var NO_CHANGE = {}; // Private marker object
CSSStyleDeclaration.prototype = Object.create(Object.prototype, {
// Return the parsed form of the element's style attribute.
// If the element's style attribute has never been parsed
// or if it has changed since the last parse, then reparse it
// Note that the styles don't get parsed until they're actually needed
_parsed: { get: function() {
if (!this._parsedStyles || this.cssText !== this._lastParsedText) {
var text = this.cssText;
this._parsedStyles = parseStyles(text);
this._lastParsedText = text;
delete this._names;
}
return this._parsedStyles;
}},
// Call this method any time the parsed representation of the
// style changes. It converts the style properties to a string and
// sets cssText and the element's style attribute
_serialize: { value: function() {
var styles = this._parsed;
var s = "";
for(var name in styles.property) {
if (s) s += " ";
s += name + ": " + styles.property[name];
if (styles.priority[name]) {
s += " !" + styles.priority[name];
}
s += ";";
}
this.cssText = s; // also sets the style attribute
this._lastParsedText = s; // so we don't reparse
delete this._names;
}},
cssText: {
get: function() {
// XXX: this is a CSSStyleDeclaration for an element.
// A different impl might be necessary for a set of styles
// associated returned by getComputedStyle(), e.g.
return this._element.getAttribute("style");
},
set: function(value) {
// XXX: I should parse and serialize the value to
// normalize it and remove errors. FF and chrome do that.
this._element.setAttribute("style", value);
}
},
length: { get: function() {
if (!this._names)
this._names = Object.getOwnPropertyNames(this._parsed.property);
return this._names.length;
}},
item: { value: function(n) {
if (!this._names)
this._names = Object.getOwnPropertyNames(this._parsed.property);
return this._names[n];
}},
getPropertyValue: { value: function(property) {
property = property.toLowerCase();
return this._parsed.property[property] || "";
}},
getPropertyPriority: { value: function(property) {
property = property.toLowerCase();
return this._parsed.priority[property] || "";
}},
setProperty: { value: function(property, value, priority) {
property = property.toLowerCase();
if (value === null || value === undefined) {
value = "";
}
if (priority === null || priority === undefined) {
priority = "";
}
// String coercion
if (value !== NO_CHANGE) {
value = "" + value;
}
if (value === "") {
this.removeProperty(property);
return;
}
if (priority !== "" && priority !== NO_CHANGE &&
!/^important$/i.test(priority)) {
return;
}
var styles = this._parsed;
if (value === NO_CHANGE) {
if (!styles.property[property]) {
return; // Not a valid property name.
}
if (priority !== "") {
styles.priority[property] = "important";
} else {
delete styles.priority[property];
}
} else {
// We don't just accept the property value. Instead
// we parse it to ensure that it is something valid.
// If it contains a semicolon it is invalid
if (value.indexOf(";") !== -1) return;
var newprops = parseStyles(property + ":" + value);
if (Object.getOwnPropertyNames(newprops.property).length === 0) {
return; // no valid property found
}
if (Object.getOwnPropertyNames(newprops.priority).length !== 0) {
return; // if the value included '!important' it wasn't valid.
}
// XXX handle shorthand properties
for (var p in newprops.property) {
styles.property[p] = newprops.property[p];
if (priority === NO_CHANGE) {
continue;
} else if (priority !== "") {
styles.priority[p] = "important";
} else if (styles.priority[p]) {
delete styles.priority[p];
}
}
}
// Serialize and update cssText and element.style!
this._serialize();
}},
setPropertyValue: { value: function(property, value) {
return this.setProperty(property, value, NO_CHANGE);
}},
setPropertyPriority: { value: function(property, priority) {
return this.setProperty(property, NO_CHANGE, priority);
}},
removeProperty: { value: function(property) {
property = property.toLowerCase();
var styles = this._parsed;
if (property in styles.property) {
delete styles.property[property];
delete styles.priority[property];
// Serialize and update cssText and element.style!
this._serialize();
}
}},
});
var cssProperties = {
alignContent: "align-content",
alignItems: "align-items",
alignmentBaseline: "alignment-baseline",
alignSelf: "align-self",
animation: "animation",
animationDelay: "animation-delay",
animationDirection: "animation-direction",
animationDuration: "animation-duration",
animationFillMode: "animation-fill-mode",
animationIterationCount: "animation-iteration-count",
animationName: "animation-name",
animationPlayState: "animation-play-state",
animationTimingFunction: "animation-timing-function",
backfaceVisibility: "backface-visibility",
background: "background",
backgroundAttachment: "background-attachment",
backgroundClip: "background-clip",
backgroundColor: "background-color",
backgroundImage: "background-image",
backgroundOrigin: "background-origin",
backgroundPosition: "background-position",
backgroundPositionX: "background-position-x",
backgroundPositionY: "background-position-y",
backgroundRepeat: "background-repeat",
backgroundSize: "background-size",
baselineShift: "baseline-shift",
border: "border",
borderBottom: "border-bottom",
borderBottomColor: "border-bottom-color",
borderBottomLeftRadius: "border-bottom-left-radius",
borderBottomRightRadius: "border-bottom-right-radius",
borderBottomStyle: "border-bottom-style",
borderBottomWidth: "border-bottom-width",
borderCollapse: "border-collapse",
borderColor: "border-color",
borderImage: "border-image",
borderImageOutset: "border-image-outset",
borderImageRepeat: "border-image-repeat",
borderImageSlice: "border-image-slice",
borderImageSource: "border-image-source",
borderImageWidth: "border-image-width",
borderLeft: "border-left",
borderLeftColor: "border-left-color",
borderLeftStyle: "border-left-style",
borderLeftWidth: "border-left-width",
borderRadius: "border-radius",
borderRight: "border-right",
borderRightColor: "border-right-color",
borderRightStyle: "border-right-style",
borderRightWidth: "border-right-width",
borderSpacing: "border-spacing",
borderStyle: "border-style",
borderTop: "border-top",
borderTopColor: "border-top-color",
borderTopLeftRadius: "border-top-left-radius",
borderTopRightRadius: "border-top-right-radius",
borderTopStyle: "border-top-style",
borderTopWidth: "border-top-width",
borderWidth: "border-width",
bottom: "bottom",
boxShadow: "box-shadow",
boxSizing: "box-sizing",
breakAfter: "break-after",
breakBefore: "break-before",
breakInside: "break-inside",
captionSide: "caption-side",
clear: "clear",
clip: "clip",
clipPath: "clip-path",
clipRule: "clip-rule",
color: "color",
colorInterpolationFilters: "color-interpolation-filters",
columnCount: "column-count",
columnFill: "column-fill",
columnGap: "column-gap",
columnRule: "column-rule",
columnRuleColor: "column-rule-color",
columnRuleStyle: "column-rule-style",
columnRuleWidth: "column-rule-width",
columns: "columns",
columnSpan: "column-span",
columnWidth: "column-width",
content: "content",
counterIncrement: "counter-increment",
counterReset: "counter-reset",
cssFloat: "float",
cursor: "cursor",
direction: "direction",
display: "display",
dominantBaseline: "dominant-baseline",
emptyCells: "empty-cells",
enableBackground: "enable-background",
fill: "fill",
fillOpacity: "fill-opacity",
fillRule: "fill-rule",
filter: "filter",
flex: "flex",
flexBasis: "flex-basis",
flexDirection: "flex-direction",
flexFlow: "flex-flow",
flexGrow: "flex-grow",
flexShrink: "flex-shrink",
flexWrap: "flex-wrap",
floodColor: "flood-color",
floodOpacity: "flood-opacity",
font: "font",
fontFamily: "font-family",
fontFeatureSettings: "font-feature-settings",
fontSize: "font-size",
fontSizeAdjust: "font-size-adjust",
fontStretch: "font-stretch",
fontStyle: "font-style",
fontVariant: "font-variant",
fontWeight: "font-weight",
glyphOrientationHorizontal: "glyph-orientation-horizontal",
glyphOrientationVertical: "glyph-orientation-vertical",
grid: "grid",
gridArea: "grid-area",
gridAutoColumns: "grid-auto-columns",
gridAutoFlow: "grid-auto-flow",
gridAutoRows: "grid-auto-rows",
gridColumn: "grid-column",
gridColumnEnd: "grid-column-end",
gridColumnGap: "grid-column-gap",
gridColumnStart: "grid-column-start",
gridGap: "grid-gap",
gridRow: "grid-row",
gridRowEnd: "grid-row-end",
gridRowGap: "grid-row-gap",
gridRowStart: "grid-row-start",
gridTemplate: "grid-template",
gridTemplateAreas: "grid-template-areas",
gridTemplateColumns: "grid-template-columns",
gridTemplateRows: "grid-template-rows",
height: "height",
imeMode: "ime-mode",
justifyContent: "justify-content",
kerning: "kerning",
layoutGrid: "layout-grid",
layoutGridChar: "layout-grid-char",
layoutGridLine: "layout-grid-line",
layoutGridMode: "layout-grid-mode",
layoutGridType: "layout-grid-type",
left: "left",
letterSpacing: "letter-spacing",
lightingColor: "lighting-color",
lineBreak: "line-break",
lineHeight: "line-height",
listStyle: "list-style",
listStyleImage: "list-style-image",
listStylePosition: "list-style-position",
listStyleType: "list-style-type",
margin: "margin",
marginBottom: "margin-bottom",
marginLeft: "margin-left",
marginRight: "margin-right",
marginTop: "margin-top",
marker: "marker",
markerEnd: "marker-end",
markerMid: "marker-mid",
markerStart: "marker-start",
mask: "mask",
maxHeight: "max-height",
maxWidth: "max-width",
minHeight: "min-height",
minWidth: "min-width",
msContentZoomChaining: "-ms-content-zoom-chaining",
msContentZooming: "-ms-content-zooming",
msContentZoomLimit: "-ms-content-zoom-limit",
msContentZoomLimitMax: "-ms-content-zoom-limit-max",
msContentZoomLimitMin: "-ms-content-zoom-limit-min",
msContentZoomSnap: "-ms-content-zoom-snap",
msContentZoomSnapPoints: "-ms-content-zoom-snap-points",
msContentZoomSnapType: "-ms-content-zoom-snap-type",
msFlowFrom: "-ms-flow-from",
msFlowInto: "-ms-flow-into",
msFontFeatureSettings: "-ms-font-feature-settings",
msGridColumn: "-ms-grid-column",
msGridColumnAlign: "-ms-grid-column-align",
msGridColumns: "-ms-grid-columns",
msGridColumnSpan: "-ms-grid-column-span",
msGridRow: "-ms-grid-row",
msGridRowAlign: "-ms-grid-row-align",
msGridRows: "-ms-grid-rows",
msGridRowSpan: "-ms-grid-row-span",
msHighContrastAdjust: "-ms-high-contrast-adjust",
msHyphenateLimitChars: "-ms-hyphenate-limit-chars",
msHyphenateLimitLines: "-ms-hyphenate-limit-lines",
msHyphenateLimitZone: "-ms-hyphenate-limit-zone",
msHyphens: "-ms-hyphens",
msImeAlign: "-ms-ime-align",
msOverflowStyle: "-ms-overflow-style",
msScrollChaining: "-ms-scroll-chaining",
msScrollLimit: "-ms-scroll-limit",
msScrollLimitXMax: "-ms-scroll-limit-x-max",
msScrollLimitXMin: "-ms-scroll-limit-x-min",
msScrollLimitYMax: "-ms-scroll-limit-y-max",
msScrollLimitYMin: "-ms-scroll-limit-y-min",
msScrollRails: "-ms-scroll-rails",
msScrollSnapPointsX: "-ms-scroll-snap-points-x",
msScrollSnapPointsY: "-ms-scroll-snap-points-y",
msScrollSnapType: "-ms-scroll-snap-type",
msScrollSnapX: "-ms-scroll-snap-x",
msScrollSnapY: "-ms-scroll-snap-y",
msScrollTranslation: "-ms-scroll-translation",
msTextCombineHorizontal: "-ms-text-combine-horizontal",
msTextSizeAdjust: "-ms-text-size-adjust",
msTouchAction: "-ms-touch-action",
msTouchSelect: "-ms-touch-select",
msUserSelect: "-ms-user-select",
msWrapFlow: "-ms-wrap-flow",
msWrapMargin: "-ms-wrap-margin",
msWrapThrough: "-ms-wrap-through",
opacity: "opacity",
order: "order",
orphans: "orphans",
outline: "outline",
outlineColor: "outline-color",
outlineOffset: "outline-offset",
outlineStyle: "outline-style",
outlineWidth: "outline-width",
overflow: "overflow",
overflowX: "overflow-x",
overflowY: "overflow-y",
padding: "padding",
paddingBottom: "padding-bottom",
paddingLeft: "padding-left",
paddingRight: "padding-right",
paddingTop: "padding-top",
page: "page",
pageBreakAfter: "page-break-after",
pageBreakBefore: "page-break-before",
pageBreakInside: "page-break-inside",
perspective: "perspective",
perspectiveOrigin: "perspective-origin",
pointerEvents: "pointer-events",
position: "position",
quotes: "quotes",
right: "right",
rotate: "rotate",
rubyAlign: "ruby-align",
rubyOverhang: "ruby-overhang",
rubyPosition: "ruby-position",
scale: "scale",
size: "size",
stopColor: "stop-color",
stopOpacity: "stop-opacity",
stroke: "stroke",
strokeDasharray: "stroke-dasharray",
strokeDashoffset: "stroke-dashoffset",
strokeLinecap: "stroke-linecap",
strokeLinejoin: "stroke-linejoin",
strokeMiterlimit: "stroke-miterlimit",
strokeOpacity: "stroke-opacity",
strokeWidth: "stroke-width",
tableLayout: "table-layout",
textAlign: "text-align",
textAlignLast: "text-align-last",
textAnchor: "text-anchor",
textDecoration: "text-decoration",
textIndent: "text-indent",
textJustify: "text-justify",
textKashida: "text-kashida",
textKashidaSpace: "text-kashida-space",
textOverflow: "text-overflow",
textShadow: "text-shadow",
textTransform: "text-transform",
textUnderlinePosition: "text-underline-position",
top: "top",
touchAction: "touch-action",
transform: "transform",
transformOrigin: "transform-origin",
transformStyle: "transform-style",
transition: "transition",
transitionDelay: "transition-delay",
transitionDuration: "transition-duration",
transitionProperty: "transition-property",
transitionTimingFunction: "transition-timing-function",
translate: "translate",
unicodeBidi: "unicode-bidi",
verticalAlign: "vertical-align",
visibility: "visibility",
webkitAlignContent: "-webkit-align-content",
webkitAlignItems: "-webkit-align-items",
webkitAlignSelf: "-webkit-align-self",
webkitAnimation: "-webkit-animation",
webkitAnimationDelay: "-webkit-animation-delay",
webkitAnimationDirection: "-webkit-animation-direction",
webkitAnimationDuration: "-webkit-animation-duration",
webkitAnimationFillMode: "-webkit-animation-fill-mode",
webkitAnimationIterationCount: "-webkit-animation-iteration-count",
webkitAnimationName: "-webkit-animation-name",
webkitAnimationPlayState: "-webkit-animation-play-state",
webkitAnimationTimingFunction: "-webkit-animation-timing-funciton",
webkitAppearance: "-webkit-appearance",
webkitBackfaceVisibility: "-webkit-backface-visibility",
webkitBackgroundClip: "-webkit-background-clip",
webkitBackgroundOrigin: "-webkit-background-origin",
webkitBackgroundSize: "-webkit-background-size",
webkitBorderBottomLeftRadius: "-webkit-border-bottom-left-radius",
webkitBorderBottomRightRadius: "-webkit-border-bottom-right-radius",
webkitBorderImage: "-webkit-border-image",
webkitBorderRadius: "-webkit-border-radius",
webkitBorderTopLeftRadius: "-webkit-border-top-left-radius",
webkitBorderTopRightRadius: "-webkit-border-top-right-radius",
webkitBoxAlign: "-webkit-box-align",
webkitBoxDirection: "-webkit-box-direction",
webkitBoxFlex: "-webkit-box-flex",
webkitBoxOrdinalGroup: "-webkit-box-ordinal-group",
webkitBoxOrient: "-webkit-box-orient",
webkitBoxPack: "-webkit-box-pack",
webkitBoxSizing: "-webkit-box-sizing",
webkitColumnBreakAfter: "-webkit-column-break-after",
webkitColumnBreakBefore: "-webkit-column-break-before",
webkitColumnBreakInside: "-webkit-column-break-inside",
webkitColumnCount: "-webkit-column-count",
webkitColumnGap: "-webkit-column-gap",
webkitColumnRule: "-webkit-column-rule",
webkitColumnRuleColor: "-webkit-column-rule-color",
webkitColumnRuleStyle: "-webkit-column-rule-style",
webkitColumnRuleWidth: "-webkit-column-rule-width",
webkitColumns: "-webkit-columns",
webkitColumnSpan: "-webkit-column-span",
webkitColumnWidth: "-webkit-column-width",
webkitFilter: "-webkit-filter",
webkitFlex: "-webkit-flex",
webkitFlexBasis: "-webkit-flex-basis",
webkitFlexDirection: "-webkit-flex-direction",
webkitFlexFlow: "-webkit-flex-flow",
webkitFlexGrow: "-webkit-flex-grow",
webkitFlexShrink: "-webkit-flex-shrink",
webkitFlexWrap: "-webkit-flex-wrap",
webkitJustifyContent: "-webkit-justify-content",
webkitOrder: "-webkit-order",
webkitPerspective: "-webkit-perspective-origin",
webkitPerspectiveOrigin: "-webkit-perspective-origin",
webkitTapHighlightColor: "-webkit-tap-highlight-color",
webkitTextFillColor: "-webkit-text-fill-color",
webkitTextSizeAdjust: "-webkit-text-size-adjust",
webkitTextStroke: "-webkit-text-stroke",
webkitTextStrokeColor: "-webkit-text-stroke-color",
webkitTextStrokeWidth: "-webkit-text-stroke-width",
webkitTransform: "-webkit-transform",
webkitTransformOrigin: "-webkit-transform-origin",
webkitTransformStyle: "-webkit-transform-style",
webkitTransition: "-webkit-transition",
webkitTransitionDelay: "-webkit-transition-delay",
webkitTransitionDuration: "-webkit-transition-duration",
webkitTransitionProperty: "-webkit-transition-property",
webkitTransitionTimingFunction: "-webkit-transition-timing-function",
webkitUserModify: "-webkit-user-modify",
webkitUserSelect: "-webkit-user-select",
webkitWritingMode: "-webkit-writing-mode",
whiteSpace: "white-space",
widows: "widows",
width: "width",
wordBreak: "word-break",
wordSpacing: "word-spacing",
wordWrap: "word-wrap",
writingMode: "writing-mode",
zIndex: "z-index",
zoom: "zoom",
resize: "resize",
userSelect: "user-select",
};
for(var prop in cssProperties) defineStyleProperty(prop);
function defineStyleProperty(jsname) {
var cssname = cssProperties[jsname];
Object.defineProperty(CSSStyleDeclaration.prototype, jsname, {
get: function() {
return this.getPropertyValue(cssname);
},
set: function(value) {
this.setProperty(cssname, value);
}
});
if (!CSSStyleDeclaration.prototype.hasOwnProperty(cssname)) {
Object.defineProperty(CSSStyleDeclaration.prototype, cssname, {
get: function() {
return this.getPropertyValue(cssname);
},
set: function(value) {
this.setProperty(cssname, value);
}
});
}
}