Skip to content

Commit 8413f47

Browse files
asamuzaKasamuzaK
committed
Update constructor
1 parent 5dccc05 commit 8413f47

File tree

3 files changed

+70
-46
lines changed

3 files changed

+70
-46
lines changed

‎lib/CSSStyleDeclaration.js‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -27,22 +27,18 @@ const { asciiLowercase } = require("./utils/strings");
2727
*/
2828
class CSSStyleDeclaration {
2929
/**
30-
* @param {object} context - Window, Element or CSSStyleRule
30+
* @param {object} globalObject
3131
* @param {object} opt - Options
32-
* @param {object} opt.element - Required when the context is a Window
32+
* @param {object} opt.context - Window, Element or CSSStyleRule
33+
* @param {object} opt.ownerNode - Applies when the context is a Window
3334
* @param {string} opt.pseudoElement - Applies when the context is a Window
3435
* @param {Function} opt.onChange
35-
* - Executed when cssText changes or property is removed
3636
* - Applies when the context is an Element
37+
* - Executed when cssText changes or property is removed
3738
*/
38-
constructor(context = globalThis, opt = {}) {
39-
// Make constructor and internals non-enumerable.
39+
constructor(globalObject = globalThis, opt = {}) {
40+
// Make internals non-enumerable.
4041
Object.defineProperties(this, {
41-
constructor: {
42-
enumerable: false,
43-
writable: true
44-
},
45-
4642
// Window
4743
_global: {
4844
value: globalThis,
@@ -113,27 +109,23 @@ class CSSStyleDeclaration {
113109
}
114110
});
115111

112+
this._global = globalObject;
113+
114+
const { context } = opt;
116115
if (context) {
117116
if (typeof context.getComputedStyle === "function") {
118-
this._global = context;
119117
this._computed = true;
120118
this._readonly = true;
121-
if (opt.element && opt.element.nodeType === 1) {
122-
this._ownerNode = opt.element;
119+
if (opt.ownerNode && opt.ownerNode.nodeType === 1) {
120+
this._ownerNode = opt.ownerNode;
123121
}
124122
} else if (context.nodeType === 1 && Object.hasOwn(context, "style")) {
125-
this._global = context.ownerDocument.defaultView;
126123
this._ownerNode = context;
127124
if (typeof opt.onChange === "function") {
128125
this._onChange = opt.onChange;
129126
}
130127
} else if (Object.hasOwn(context, "parentRule")) {
131128
this._parentRule = context;
132-
// Find Window from the owner node of the StyleSheet.
133-
const window = context?.parentStyleSheet?.ownerNode?.ownerDocument?.defaultView;
134-
if (window) {
135-
this._global = window;
136-
}
137129
}
138130
}
139131
if (!Object.hasOwn(opt, "format")) {

‎test/CSSStyleDeclaration.test.js‎

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@ const assert = require("node:assert/strict");
55
const { CSSStyleDeclaration } = require("../lib/CSSStyleDeclaration");
66

77
describe("CSSStyleDeclaration", () => {
8-
it("does not enumerate constructor or internals", () => {
8+
it("does not enumerate internals", () => {
99
const style = new CSSStyleDeclaration();
10-
assert.strictEqual(Object.getOwnPropertyDescriptor(style, "constructor").enumerable, false);
1110
for (const i in style) {
1211
assert.strictEqual(i.startsWith("_"), false);
1312
}
@@ -36,7 +35,9 @@ describe("CSSStyleDeclaration", () => {
3635
getComputedStyle: () => {},
3736
DOMException: globalThis.DOMException
3837
};
39-
const style = new CSSStyleDeclaration(window);
38+
const style = new CSSStyleDeclaration(window, {
39+
context: window
40+
});
4041
assert.throws(
4142
() => {
4243
style.cssText = "color: green;";
@@ -62,38 +63,45 @@ describe("CSSStyleDeclaration", () => {
6263
});
6364

6465
it("sets internals for Element", () => {
66+
const window = {
67+
DOMException: globalThis.DOMException
68+
};
6569
const node = {
6670
nodeType: 1,
6771
style: {},
6872
ownerDocument: {
69-
defaultView: {
70-
DOMException: globalThis.DOMException
71-
}
73+
defaultView: window
7274
}
7375
};
7476
let callCount = 0;
7577
const callback = () => {
7678
callCount++;
7779
};
78-
const style = new CSSStyleDeclaration(node, {
80+
const style = new CSSStyleDeclaration(window, {
81+
context: node,
7982
onChange: callback
8083
});
8184
style.cssText = "color: green;";
8285
assert.strictEqual(callCount, 1);
8386
});
8487

8588
it("sets internals for CSSRule", () => {
89+
const window = {
90+
DOMException: globalThis.DOMException
91+
};
8692
const rule = {
8793
parentRule: {},
8894
parentStyleSheet: {
8995
ownerDocument: {
9096
defaultView: {
91-
DOMException: globalThis.DOMException
97+
DOMException: window.DOMException
9298
}
9399
}
94100
}
95101
};
96-
const style = new CSSStyleDeclaration(rule);
102+
const style = new CSSStyleDeclaration(window, {
103+
context: rule
104+
});
97105
assert.deepEqual(style.parentRule, rule);
98106
});
99107

@@ -121,7 +129,9 @@ describe("CSSStyleDeclaration", () => {
121129
getComputedStyle: () => {},
122130
DOMException: globalThis.DOMException
123131
};
124-
const style = new CSSStyleDeclaration(window);
132+
const style = new CSSStyleDeclaration(window, {
133+
context: window
134+
});
125135
assert.strictEqual(style.cssText, "");
126136
});
127137

@@ -130,7 +140,9 @@ describe("CSSStyleDeclaration", () => {
130140
getComputedStyle: () => {},
131141
DOMException: globalThis.DOMException
132142
};
133-
const style = new CSSStyleDeclaration(window);
143+
const style = new CSSStyleDeclaration(window, {
144+
context: window
145+
});
134146
assert.throws(
135147
() => {
136148
style.cssText = "color: green;";
@@ -200,4 +212,16 @@ describe("CSSStyleDeclaration", () => {
200212

201213
assert.strictEqual(style.getPropertyValue("--baz"), "");
202214
});
215+
216+
it("getPropertyPriority for property", () => {
217+
const style = new CSSStyleDeclaration();
218+
style.setProperty("color", "green", "important");
219+
assert.strictEqual(style.getPropertyPriority("color"), "important");
220+
});
221+
222+
it("getPropertyPriority for custom property", () => {
223+
const style = new CSSStyleDeclaration();
224+
style.setProperty("--foo", "green", "important");
225+
assert.strictEqual(style.getPropertyPriority("--foo"), "important");
226+
});
203227
});

‎test/CSSStyleProperties.test.js‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -816,17 +816,19 @@ describe("CSSStyleProperties", () => {
816816
});
817817

818818
it("onchange callback should be called when the csstext changes", () => {
819+
const window = {
820+
DOMException: globalThis.DOMException
821+
};
819822
const node = {
820823
nodeType: 1,
821824
style: {},
822825
ownerDocument: {
823-
defaultView: {
824-
DOMException: globalThis.DOMException
825-
}
826+
defaultView: window
826827
}
827828
};
828829
let called = 0;
829-
const style = new CSSStyleProperties(node, {
830+
const style = new CSSStyleProperties(window, {
831+
context: node,
830832
onChange: (cssText) => {
831833
called++;
832834
assert.strictEqual(cssText, "opacity: 0;");
@@ -839,17 +841,19 @@ describe("CSSStyleProperties", () => {
839841
});
840842

841843
it("onchange callback should be called only once when multiple properties were added", () => {
844+
const window = {
845+
DOMException: globalThis.DOMException
846+
};
842847
const node = {
843848
nodeType: 1,
844849
style: {},
845850
ownerDocument: {
846-
defaultView: {
847-
DOMException: globalThis.DOMException
848-
}
851+
defaultView: window
849852
}
850853
};
851854
let called = 0;
852-
const style = new CSSStyleProperties(node, {
855+
const style = new CSSStyleProperties(window, {
856+
context: node,
853857
onChange: (cssText) => {
854858
called++;
855859
assert.strictEqual(cssText, "width: 100px; height: 100px;");
@@ -860,17 +864,19 @@ describe("CSSStyleProperties", () => {
860864
});
861865

862866
it("onchange callback should not be called when property is set to the same value", () => {
867+
const window = {
868+
DOMException: globalThis.DOMException
869+
};
863870
const node = {
864871
nodeType: 1,
865872
style: {},
866873
ownerDocument: {
867-
defaultView: {
868-
DOMException: globalThis.DOMException
869-
}
874+
defaultView: window
870875
}
871876
};
872877
let called = 0;
873-
const style = new CSSStyleProperties(node, {
878+
const style = new CSSStyleProperties(window, {
879+
context: node,
874880
onChange: () => {
875881
called++;
876882
}
@@ -883,17 +889,19 @@ describe("CSSStyleProperties", () => {
883889
});
884890

885891
it("onchange callback should not be called when removeProperty was called on non-existing property", () => {
892+
const window = {
893+
DOMException: globalThis.DOMException
894+
};
886895
const node = {
887896
nodeType: 1,
888897
style: {},
889898
ownerDocument: {
890-
defaultView: {
891-
DOMException: globalThis.DOMException
892-
}
899+
defaultView: window
893900
}
894901
};
895902
let called = 0;
896-
const style = new CSSStyleProperties(node, {
903+
const style = new CSSStyleProperties(window, {
904+
context: node,
897905
onChange: () => {
898906
called++;
899907
}

0 commit comments

Comments
 (0)