Skip to content

Commit ab605c6

Browse files
Khadrealwordpressfan
Khadreal
and
wordpressfan
authored
Release v1.0.7 (#35)
* Closes #6959 UI issue after clear cache and apply LRC with certain template (#30) * Add new method to avoid conflicts with lrc -- :closes: wp-media/wp-rocket#6959 * Add tests for lrc conflicts method * Fixed codacy error * ✨ fixed codacy issues --------- Co-authored-by: WordPress Fan <[email protected]> * Change package version (#36) * Add new method to avoid conflicts with lrc -- :closes: wp-media/wp-rocket#6959 * Add tests for lrc conflicts method * Fixed codacy error * ✨ fixed codacy issues * change package version number --------- Co-authored-by: WordPress Fan <[email protected]> --------- Co-authored-by: WordPress Fan <[email protected]>
1 parent b2fc2f2 commit ab605c6

File tree

3 files changed

+158
-5
lines changed

3 files changed

+158
-5
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "wp-rocket-scripts",
3-
"version": "1.0.6",
3+
"version": "1.0.7",
44
"description": "Rocket main scripts packages",
55
"type": "module",
66
"main": "./src/BeaconEntryPoint.js",

‎src/BeaconLrc.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,57 @@ class BeaconLrc {
7272
return false;
7373
}
7474

75+
_checkLcrConflict(element) {
76+
const conflictingElements = [];
77+
const computedStyle = window.getComputedStyle(element);
78+
79+
const validMargins = ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'];
80+
81+
const negativeMargins = validMargins
82+
.some(margin => parseFloat(computedStyle[margin]) < 0);
83+
84+
const currentElementConflicts = negativeMargins ||
85+
computedStyle.contentVisibility === 'auto' ||
86+
computedStyle.contentVisibility === 'hidden';
87+
88+
if (currentElementConflicts) {
89+
conflictingElements.push({
90+
element,
91+
conflicts: [
92+
negativeMargins && 'negative margin',
93+
computedStyle.contentVisibility === 'auto' && 'content-visibility:auto',
94+
computedStyle.contentVisibility === 'hidden' && 'content-visibility:hidden'
95+
].filter(Boolean)
96+
});
97+
}
98+
99+
Array.from(element.children).forEach(child => {
100+
const childStyle = window.getComputedStyle(child);
101+
102+
const validMargins = ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'];
103+
104+
const childNegativeMargins = validMargins
105+
.some(margin => parseFloat(childStyle[margin]) < 0);
106+
107+
const childConflicts = childNegativeMargins ||
108+
childStyle.position === 'absolute' ||
109+
childStyle.position === 'fixed';
110+
111+
if (childConflicts) {
112+
conflictingElements.push({
113+
element: child,
114+
conflicts: [
115+
childNegativeMargins && 'negative margin',
116+
childStyle.position === 'absolute' && 'position:absolute',
117+
childStyle.position === 'fixed' && 'position:fixed'
118+
].filter(Boolean)
119+
});
120+
}
121+
});
122+
123+
return conflictingElements;
124+
}
125+
75126
_processElements(elements) {
76127
elements.forEach(({ element, depth, distance, hash }) => {
77128
if (this._shouldSkipElement(element, this.config.exclusions || [])) {
@@ -82,6 +133,12 @@ class BeaconLrc {
82133
return;
83134
}
84135

136+
const conflicts = this._checkLcrConflict(element);
137+
if (conflicts.length > 0) {
138+
this.logger.logMessage('Skipping element due to conflicts:', conflicts);
139+
return;
140+
}
141+
85142
const can_push_hash = element.parentElement && this._getElementDistance(element.parentElement) < this.config.lrc_threshold && distance >= this.config.lrc_threshold;
86143

87144
const color = can_push_hash ? "green" : distance === 0 ? "red" : "";

‎test/BeaconLrc.test.js

Lines changed: 100 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ describe('BeaconLrc', function() {
1616
},
1717
getAttribute: () => 'hash1',
1818
hasAttribute: () => true,
19-
dataset: { rocketLocationHash: 'hash1' }
19+
dataset: { rocketLocationHash: 'hash1' },
20+
children: []
2021
},
2122
{
2223
getBoundingClientRect: () => {
@@ -26,7 +27,8 @@ describe('BeaconLrc', function() {
2627
},
2728
getAttribute: () => 'hash2',
2829
hasAttribute: () => true,
29-
dataset: { rocketLocationHash: 'hash2' }
30+
dataset: { rocketLocationHash: 'hash2' },
31+
children: []
3032
},
3133
{
3234
getBoundingClientRect: () => {
@@ -36,7 +38,8 @@ describe('BeaconLrc', function() {
3638
},
3739
getAttribute: () => 'hash3',
3840
hasAttribute: () => true,
39-
dataset: { rocketLocationHash: 'hash3' }
41+
dataset: { rocketLocationHash: 'hash3' },
42+
children: []
4043
},
4144
{
4245
getBoundingClientRect: () => {
@@ -46,7 +49,8 @@ describe('BeaconLrc', function() {
4649
},
4750
getAttribute: () => 'hash4',
4851
hasAttribute: () => true,
49-
dataset: { rocketLocationHash: 'hash4' }
52+
dataset: { rocketLocationHash: 'hash4' },
53+
children: []
5054
},
5155
];
5256

@@ -74,6 +78,18 @@ describe('BeaconLrc', function() {
7478

7579
// Mocking window.pageYOffset
7680
global.window = { pageYOffset: 100, innerHeight: 500 };
81+
82+
if (typeof global.window.getComputedStyle !== 'function') {
83+
global.window.getComputedStyle = () => ({
84+
marginTop: '0px',
85+
marginRight: '0px',
86+
marginBottom: '0px',
87+
marginLeft: '0px',
88+
contentVisibility: 'visible',
89+
position: 'static',
90+
overflow: 'visible'
91+
});
92+
}
7793
});
7894

7995
afterEach(function() {
@@ -232,4 +248,84 @@ describe('BeaconLrc', function() {
232248

233249
_getElementXPathStub.restore();
234250
});
251+
252+
it('should detect conflict when element has negative margins', () => {
253+
const element = mockElements[0];
254+
255+
sinon.stub(window, 'getComputedStyle').callsFake(() => ({
256+
marginTop: '-10px',
257+
marginRight: '0px',
258+
marginBottom: '0px',
259+
marginLeft: '0px',
260+
contentVisibility: 'visible',
261+
position: 'static',
262+
overflow: 'visible'
263+
}));
264+
265+
const result = beaconLrc._checkLcrConflict(element);
266+
267+
assert.strictEqual(result.length, 1);
268+
assert.strictEqual(result[0].conflicts.includes('negative margin'), true);
269+
window.getComputedStyle.restore();
270+
});
271+
272+
it('should detect conflict when content visibility is hidden', () => {
273+
const element = mockElements[0];
274+
275+
sinon.stub(window, 'getComputedStyle').callsFake(() => ({
276+
marginTop: '0px',
277+
marginRight: '0px',
278+
marginBottom: '0px',
279+
marginLeft: '0px',
280+
contentVisibility: 'hidden',
281+
position: 'static',
282+
overflow: 'visible'
283+
}));
284+
285+
const result = beaconLrc._checkLcrConflict(element);
286+
287+
assert.strictEqual(result.length, 1);
288+
assert.strictEqual(result[0].conflicts.includes('content-visibility:hidden'), true);
289+
window.getComputedStyle.restore();
290+
});
291+
292+
it('should detect conflict when child has negative margins', () => {
293+
const element = mockElements[0];
294+
295+
const child = {
296+
getBoundingClientRect: () => ({ top: 500 }),
297+
getAttribute: () => null,
298+
hasAttribute: () => false,
299+
children: []
300+
};
301+
element.children = [child];
302+
303+
sinon.stub(window, 'getComputedStyle')
304+
.onCall(0).returns({
305+
marginTop: '0px',
306+
marginRight: '0px',
307+
marginBottom: '0px',
308+
marginLeft: '0px',
309+
contentVisibility: 'visible',
310+
position: 'static',
311+
overflow: 'visible'
312+
})
313+
.onCall(1).returns({
314+
marginTop: '-20px',
315+
marginRight: '0px',
316+
marginBottom: '0px',
317+
marginLeft: '0px',
318+
contentVisibility: 'visible',
319+
position: 'absolute',
320+
overflow: 'visible'
321+
});
322+
323+
const result = beaconLrc._checkLcrConflict(element);
324+
325+
assert.strictEqual(result.length, 1);
326+
assert.strictEqual(result[0].element, child);
327+
assert.strictEqual(result[0].conflicts.includes('negative margin'), true);
328+
329+
window.getComputedStyle.restore();
330+
})
235331
});

0 commit comments

Comments
 (0)