Skip to content

Commit 203f11a

Browse files
ausiausi
committed
Improve performance and file size of getContainer(), #47 
1 parent cc459da commit 203f11a

File tree

2 files changed

+43
-53
lines changed

2 files changed

+43
-53
lines changed

‎cq-prolyfill.js

Lines changed: 25 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -908,7 +908,7 @@ function evaluateQuery(parent, query) {
908908
cValue = getSize(container, query._prop);
909909
}
910910
else {
911-
cValue = getComputedStyle(container).getPropertyValue(query._prop);
911+
cValue = getComputedStyle(container, query._prop);
912912
}
913913

914914
if (query._filter) {
@@ -1000,7 +1000,7 @@ function getContainer(element, prop) {
10001000

10011001
else if (prop !== 'width' && prop !== 'height') {
10021002
// Skip transparent background colors
1003-
if (prop === 'background-color' && !parseColor(getComputedStyle(element).getPropertyValue(prop))[3]) {
1003+
if (prop === 'background-color' && !parseColor(getComputedStyle(element, prop))[3]) {
10041004
cache[prop] = getContainer(element.parentNode, prop);
10051005
}
10061006
else {
@@ -1009,7 +1009,7 @@ function getContainer(element, prop) {
10091009
}
10101010

10111011
// Skip inline elements
1012-
else if (getComputedStyle(element).display === 'inline') {
1012+
else if (getComputedStyle(element, 'display') === 'inline') {
10131013
cache[prop] = getContainer(element.parentNode, prop);
10141014
}
10151015

@@ -1022,33 +1022,33 @@ function getContainer(element, prop) {
10221022
var parentNode = element.parentNode;
10231023

10241024
// Skip to next positioned ancestor for absolute positioned elements
1025-
if (getComputedStyle(element).position === 'absolute') {
1025+
if (getComputedStyle(element, 'position') === 'absolute') {
10261026
while (
10271027
parentNode.parentNode
10281028
&& parentNode.parentNode.nodeType === 1
1029-
&& ['relative', 'absolute'].indexOf(getComputedStyle(parentNode).position) === -1
1029+
&& ['relative', 'absolute'].indexOf(getComputedStyle(parentNode, 'position')) === -1
10301030
) {
10311031
parentNode = parentNode.parentNode;
10321032
}
10331033
}
10341034

10351035
// Skip to next ancestor with a transform applied for fixed positioned elements
1036-
if (getComputedStyle(element).position === 'fixed') {
1036+
if (getComputedStyle(element, 'position') === 'fixed') {
10371037
while (
10381038
parentNode.parentNode
10391039
&& parentNode.parentNode.nodeType === 1
10401040
&& [undefined, 'none'].indexOf(
1041-
getComputedStyle(parentNode).transform
1042-
|| getComputedStyle(parentNode).MsTransform
1043-
|| getComputedStyle(parentNode).WebkitTransform
1041+
getComputedStyle(parentNode, 'transform')
1042+
|| getComputedStyle(parentNode, 'MsTransform')
1043+
|| getComputedStyle(parentNode, 'WebkitTransform')
10441044
) !== -1
10451045
) {
10461046
parentNode = parentNode.parentNode;
10471047
}
10481048
}
10491049

10501050
var parentContainer = getContainer(parentNode, prop);
1051-
while (getComputedStyle(parentNode).display === 'inline') {
1051+
while (getComputedStyle(parentNode, 'display') === 'inline') {
10521052
parentNode = parentNode.parentNode;
10531053
}
10541054
if (parentNode === parentContainer && !isIntrinsicSize(element, prop)) {
@@ -1090,23 +1090,23 @@ function isFixedSize(element, prop) {
10901090
*/
10911091
function isIntrinsicSize(element, prop) {
10921092

1093-
var computedStyle = getComputedStyle(element);
1093+
var display = getComputedStyle(element, 'display');
10941094

1095-
if (computedStyle.display === 'none') {
1095+
if (display === 'none') {
10961096
return false;
10971097
}
10981098

1099-
if (computedStyle.display === 'inline') {
1099+
if (display === 'inline') {
11001100
return true;
11011101
}
11021102

11031103
// Non-floating non-absolute block elements (only width)
11041104
if (
11051105
prop === 'width'
1106-
&& ['block', 'list-item', 'flex', 'grid'].indexOf(computedStyle.display) !== -1
1107-
&& computedStyle.cssFloat === 'none'
1108-
&& computedStyle.position !== 'absolute'
1109-
&& computedStyle.position !== 'fixed'
1106+
&& ['block', 'list-item', 'flex', 'grid'].indexOf(display) !== -1
1107+
&& getComputedStyle(element, 'float') === 'none'
1108+
&& getComputedStyle(element, 'position') !== 'absolute'
1109+
&& getComputedStyle(element, 'position') !== 'fixed'
11101110
) {
11111111
return false;
11121112
}
@@ -1141,7 +1141,7 @@ function isIntrinsicSize(element, prop) {
11411141
* @return {number}
11421142
*/
11431143
function getSize(element, prop) {
1144-
var style = getComputedStyle(element);
1144+
var style = window.getComputedStyle(element);
11451145
if (prop === 'width') {
11461146
return element.offsetWidth
11471147
- parseFloat(style.borderLeftWidth)
@@ -1194,39 +1194,29 @@ function getComputedLength(value, element) {
11941194
if (unit === 'ex') {
11951195
value /= 2;
11961196
}
1197-
return parseFloat(getComputedStyle(element).fontSize) * value;
1197+
return parseFloat(getComputedStyle(element, 'fontSize')) * value;
11981198
}
11991199

12001200
/**
12011201
* @param {Element} element
12021202
* @return {CSSStyleDeclaration}
12031203
*/
1204-
function getComputedStyle(element) {
1204+
function getComputedStyle(element, prop) {
12051205

12061206
var style = window.getComputedStyle(element);
12071207

1208+
var value = style[prop] || style.getPropertyValue(prop);
1209+
12081210
// Fix display inline in some browsers
1209-
if (style.display === 'inline' && (
1211+
if (value === 'inline' && prop === 'display' && (
12101212
style.position === 'absolute'
12111213
|| style.position === 'fixed'
12121214
|| style.cssFloat !== 'none'
12131215
)) {
1214-
var newStyle = {};
1215-
for (var prop in style) {
1216-
if (typeof style[prop] === 'string') {
1217-
newStyle[prop] = style[prop];
1218-
}
1219-
}
1220-
style = newStyle;
1221-
style.display = 'block';
1222-
style.getPropertyValue = function(property) {
1223-
return this[property.replace(/-+(.)/g, function(match, char) {
1224-
return char.toUpperCase();
1225-
})];
1226-
};
1216+
return 'block';
12271217
}
12281218

1229-
return style;
1219+
return value;
12301220

12311221
}
12321222

‎tests.js

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,14 @@ QUnit[/Opera\/9\.80\s.*Version\/12\.16/.test(navigator.userAgent)
3939
assert.equal(getOriginalStyle(element, 'width'), '20%', 'Container Query with crossOrigin');
4040
load('cors.css', false, false, function() {
4141
assert.ok(getOriginalStyle(element, 'width') === undefined || getOriginalStyle(element, 'width') === '10%', 'Non-CORS Style Stylesheet');
42-
assert.equal(getComputedStyle(element).color, 'rgb(255, 0, 0)', 'Non-CORS Style Stylesheet computed style');
42+
assert.equal(getComputedStyle(element, 'color'), 'rgb(255, 0, 0)', 'Non-CORS Style Stylesheet computed style');
4343
load('cors.css', true, false, function() {
4444
assert.ok(getOriginalStyle(element, 'width') === undefined || getOriginalStyle(element, 'width') === '10%', 'Non-CORS Style Stylesheet with crossOrigin');
4545
if ('crossOrigin' in document.createElement('link')) {
46-
assert.equal(getComputedStyle(element).color, 'rgb(0, 0, 0)', 'Non-CORS Style Stylesheet with crossOrigin computed style (crossOrigin supported)');
46+
assert.equal(getComputedStyle(element, 'color'), 'rgb(0, 0, 0)', 'Non-CORS Style Stylesheet with crossOrigin computed style (crossOrigin supported)');
4747
}
4848
else {
49-
assert.equal(getComputedStyle(element).color, 'rgb(255, 0, 0)', 'Non-CORS Style Stylesheet with crossOrigin computed style (crossOrigin not supported)');
49+
assert.equal(getComputedStyle(element, 'color'), 'rgb(255, 0, 0)', 'Non-CORS Style Stylesheet with crossOrigin computed style (crossOrigin not supported)');
5050
}
5151
load('cors-with-cq.css', false, false, function() {
5252
assert.strictEqual(getOriginalStyle(element, 'width'), undefined, 'Non-CORS Container Query');
@@ -93,7 +93,7 @@ QUnit.test('DOM Mutations', function(assert) {
9393
delete config.skipObserving;
9494
startObserving();
9595

96-
assert.equal(getComputedStyle(element).display, 'block', 'Display block');
96+
assert.equal(getComputedStyle(element, 'display'), 'block', 'Display block');
9797

9898
var style = document.createElement('style');
9999
style.type = 'text/css';
@@ -102,7 +102,7 @@ QUnit.test('DOM Mutations', function(assert) {
102102

103103
requestAnimationFrame(function() { setTimeout(function() {
104104

105-
assert.equal(getComputedStyle(element).display, 'none', 'Display none');
105+
assert.equal(getComputedStyle(element, 'display'), 'none', 'Display none');
106106

107107
var element2 = document.createElement('div');
108108
element2.className = 'mutations-test';
@@ -115,18 +115,18 @@ QUnit.test('DOM Mutations', function(assert) {
115115

116116
requestAnimationFrame(function() { setTimeout(function() {
117117

118-
assert.equal(getComputedStyle(element2).display, 'none', 'Display none');
118+
assert.equal(getComputedStyle(element2, 'display'), 'none', 'Display none');
119119

120120
fixture.appendChild(element3);
121-
assert.equal(getComputedStyle(element3).display, 'block', 'Display block');
121+
assert.equal(getComputedStyle(element3, 'display'), 'block', 'Display block');
122122

123123
fixture.removeChild(style);
124124

125125
requestAnimationFrame(function() { setTimeout(function() {
126126

127-
assert.equal(getComputedStyle(element).display, 'block', 'Display block');
128-
assert.equal(getComputedStyle(element2).display, 'block', 'Display block');
129-
assert.equal(getComputedStyle(element3).display, 'block', 'Display block');
127+
assert.equal(getComputedStyle(element, 'display'), 'block', 'Display block');
128+
assert.equal(getComputedStyle(element2, 'display'), 'block', 'Display block');
129+
assert.equal(getComputedStyle(element3, 'display'), 'block', 'Display block');
130130

131131
// Cleanup
132132
if (observer) {
@@ -798,15 +798,15 @@ QUnit.test('getComputedStyle', function(assert) {
798798
element.style.height = '1in';
799799
element.style.cssFloat = 'left';
800800
fixture.appendChild(element);
801-
assert.equal(getComputedStyle(element).width, '100px', 'Normal style');
802-
assert.equal(getComputedStyle(element).height, '96px', 'Converted to pixel');
803-
assert.equal(getComputedStyle(element).cssFloat, 'left', 'Float left');
804-
assert.equal(getComputedStyle(element).display, 'block', 'Default style');
801+
assert.equal(getComputedStyle(element, 'width'), '100px', 'Normal style');
802+
assert.equal(getComputedStyle(element, 'height'), '96px', 'Converted to pixel');
803+
assert.equal(getComputedStyle(element, 'float'), 'left', 'Float left');
804+
assert.equal(getComputedStyle(element, 'cssFloat'), 'left', 'Float left cssFloat');
805+
assert.equal(getComputedStyle(element, 'display'), 'block', 'Default style');
805806
element.style.cssText = 'display: inline; float: left; font-size: 10px';
806-
assert.equal(getComputedStyle(element).display, 'block', 'Correct display value');
807-
assert.equal(getComputedStyle(element).getPropertyValue('display'), 'block', 'Correct display value via getPropertyValue');
808-
assert.equal(getComputedStyle(element).fontSize, '10px', 'Correct font-size value');
809-
assert.equal(getComputedStyle(element).getPropertyValue('font-size'), '10px', 'Correct font-size value via getPropertyValue');
807+
assert.equal(getComputedStyle(element, 'display'), 'block', 'Correct display value');
808+
assert.equal(getComputedStyle(element, 'fontSize'), '10px', 'Correct font-size value');
809+
assert.equal(getComputedStyle(element, 'font-size'), '10px', 'Correct font-size value via getPropertyValue');
810810
});
811811

812812
/*global getOriginalStyle, buildStyleCache*/

0 commit comments

Comments
 (0)