Commit af17519b authored by Tim Zallmann's avatar Tim Zallmann

Merge branch 'ps-add-fallback-for-startup-css' into 'master'

Add fallback to load event for startup css

See merge request gitlab-org/gitlab!43329
parents b75389a9 3ee2ce38
......@@ -13,6 +13,9 @@ import './toggler_behavior';
import './preview_markdown';
import initCollapseSidebarOnWindowResize from './collapse_sidebar_on_window_resize';
import initSelect2Dropdowns from './select2';
import { loadStartupCSS } from './load_startup_css';
loadStartupCSS();
installGlEmojiElement();
......
export const loadStartupCSS = () => {
// We need to fallback to dispatching `load` in case our event listener was added too late
// or the browser environment doesn't load media=print.
// Do this on `window.load` so that the default deferred behavior takes precedence.
// https://gitlab.com/gitlab-org/gitlab/-/issues/239357
window.addEventListener(
'load',
() => {
document
.querySelectorAll('link[media=print]')
.forEach(x => x.dispatchEvent(new Event('load')));
},
{ once: true },
);
};
......@@ -7,4 +7,3 @@
const startupLinkLoadedEvent = new CustomEvent('CSSStartupLinkLoaded');
linkTag.addEventListener('load',function(){this.media='all';this.setAttribute('data-startupcss', 'loaded');document.dispatchEvent(startupLinkLoadedEvent);},{once: true});
})
- return unless use_startup_css?
import { setHTMLFixture } from 'helpers/fixtures';
import { loadStartupCSS } from '~/behaviors/load_startup_css';
describe('behaviors/load_startup_css', () => {
let loadListener;
const setupListeners = () => {
document
.querySelectorAll('link')
.forEach(x => x.addEventListener('load', () => loadListener(x)));
};
beforeEach(() => {
loadListener = jest.fn();
setHTMLFixture(`
<meta charset="utf-8" />
<link media="print" src="./lorem-print.css" />
<link media="print" src="./ipsum-print.css" />
<link media="all" src="./dolar-all.css" />
`);
setupListeners();
loadStartupCSS();
});
it('does nothing at first', () => {
expect(loadListener).not.toHaveBeenCalled();
});
describe('on window load', () => {
beforeEach(() => {
window.dispatchEvent(new Event('load'));
});
it('dispatches load to the print links', () => {
expect(loadListener.mock.calls.map(([el]) => el.getAttribute('src'))).toEqual([
'./lorem-print.css',
'./ipsum-print.css',
]);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment