diff --git a/core/modules/ckeditor5/css/editor.css b/core/modules/ckeditor5/css/editor.css index 7842eca88813205f5f0d1ce3e12fb80a33df8633..f0b2422630db8a7b5c6af957f198c72aa3618cc5 100644 --- a/core/modules/ckeditor5/css/editor.css +++ b/core/modules/ckeditor5/css/editor.css @@ -19,3 +19,8 @@ * any toolbars. */ max-height: calc(100vh - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - 20px); } + +/* Show the scrollbar on the source editing area. */ +.ck-editor__main > .ck-source-editing-area textarea { + overflow: auto; +} diff --git a/core/modules/ckeditor5/tests/src/Nightwatch/Tests/ckEditor5EditorHeightTest.js b/core/modules/ckeditor5/tests/src/Nightwatch/Tests/ckEditor5EditorHeightTest.js index d9ceea8e66d0464359ffb016419fadd1ef19ae57..2d1f001d2e953d2fcd13333eb1626a1216738b9b 100644 --- a/core/modules/ckeditor5/tests/src/Nightwatch/Tests/ckEditor5EditorHeightTest.js +++ b/core/modules/ckeditor5/tests/src/Nightwatch/Tests/ckEditor5EditorHeightTest.js @@ -125,6 +125,47 @@ module.exports = { ); }, ) + // Source Editor textarea should have vertical scrollbar when needed. + .click('.ck-source-editing-button') + .waitForElementVisible('.ck-source-editing-area') + .execute( + // eslint-disable-next-line func-names, prefer-arrow-callback, no-shadow + function () { + function isScrollableY(element) { + const style = window.getComputedStyle(element); + + if ( + element.scrollHeight > element.clientHeight && + style.overflow !== 'hidden' && + style['overflow-y'] !== 'hidden' && + style.overflow !== 'clip' && + style['overflow-y'] !== 'clip' + ) { + if ( + element === document.scrollingElement || + (style.overflow !== 'visible' && + style['overflow-y'] !== 'visible') + ) { + return true; + } + } + + return false; + } + + return isScrollableY( + document.querySelector('.ck-source-editing-area textarea'), + ); + }, + [], + (result) => { + browser.assert.strictEqual( + result.value, + true, + 'Source Editor textarea should have vertical scrollbar when needed.', + ); + }, + ) // Double the editor row count. .drupalRelativeURL('/admin/structure/types/manage/test/form-display')