diff --git a/core/modules/ckeditor/js/ckeditor.off-canvas-css-reset.es6.js b/core/modules/ckeditor/js/ckeditor.off-canvas-css-reset.es6.js index e1d0324a44..bb47444802 100644 --- a/core/modules/ckeditor/js/ckeditor.off-canvas-css-reset.es6.js +++ b/core/modules/ckeditor/js/ckeditor.off-canvas-css-reset.es6.js @@ -94,6 +94,11 @@ editorCssPath.indexOf(CKEDITOR.timestamp) !== -1 && dialogCssPath.indexOf(CKEDITOR.timestamp) !== -1 ) { + Object.keys(window.localStorage).forEach(key => { + if (key.indexOf('Drupal.off-canvas.css.') === 0) { + window.localStorage.removeItem(key); + } + }); window.localStorage.setItem( `Drupal.off-canvas.css.${editorCssPath}${dialogCssPath}`, cssToInsert, diff --git a/core/modules/ckeditor/js/ckeditor.off-canvas-css-reset.js b/core/modules/ckeditor/js/ckeditor.off-canvas-css-reset.js index c0738bb08f..2299c160e9 100644 --- a/core/modules/ckeditor/js/ckeditor.off-canvas-css-reset.js +++ b/core/modules/ckeditor/js/ckeditor.off-canvas-css-reset.js @@ -44,6 +44,11 @@ insertCss(cssToInsert); if (CKEDITOR.timestamp && editorCssPath.indexOf(CKEDITOR.timestamp) !== -1 && dialogCssPath.indexOf(CKEDITOR.timestamp) !== -1) { + Object.keys(window.localStorage).forEach(function (key) { + if (key.indexOf('Drupal.off-canvas.css.') === 0) { + window.localStorage.removeItem(key); + } + }); window.localStorage.setItem('Drupal.off-canvas.css.' + editorCssPath + dialogCssPath, cssToInsert); } }); diff --git a/core/modules/ckeditor/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php b/core/modules/ckeditor/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php index 2a66b65ca2..b9c6666861 100644 --- a/core/modules/ckeditor/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php +++ b/core/modules/ckeditor/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php @@ -211,6 +211,27 @@ public function testOffCanvasStyles() { $assert_session->elementExists('css', '.cke_button__source'); $ckeditor_source_button_bg_color = $this->getSession()->evaluateScript('window.getComputedStyle(document.getElementsByClassName(\'cke_button__source\')[0]).backgroundColor'); $this->assertEqual($ckeditor_source_button_bg_color, 'rgba(0, 0, 0, 0)'); + + // Check that only one off-canvas style is cached in local storage and that + // it gets updated with the cache-busting query string. + $get_cache_keys = 'Object.keys(window.localStorage).filter(function (i) {return i.indexOf(\'Drupal.off-canvas.css.\') === 0})'; + $old_keys = $this->getSession()->evaluateScript($get_cache_keys); + // Flush the caches to ensure the new timestamp is altered into the + // drupal.ckeditor library's javascript settings. + drupal_flush_all_caches(); + // Normally flushing caches regenerates the cache busting query string, but + // as it's based on the request time, it won't change within this test so + // explicitly set it. + \Drupal::state()->set('system.css_js_query_string', '0'); + $this->drupalGet('/ckeditor_test/off_canvas'); + $page->clickLink('Add Node'); + $assert_session->waitForElementVisible('css', '#drupal-off-canvas'); + $assert_session->assertWaitOnAjaxRequest(); + $new_keys = $this->getSession()->evaluateScript($get_cache_keys); + + $this->assertCount(1, $old_keys, 'Only one off-canvas style was cached before clearing caches.'); + $this->assertCount(1, $new_keys, 'Only one off-canvas style was cached after clearing caches.'); + $this->assertNotEquals($old_keys, $new_keys, 'Clearing caches changed the off-canvas style cache key.'); } }