Merge pull request #127 from ckeditor/t/113

Fix: Classic editor's editable should have a background. Closes #113.

tests/manual/tickets/113/1.html

@@ -0,0 +1,23 @@
+<style>
+	body {
+		background: red;
+	}
+</style>
+
+<h2>Editor-classic</h2>
+
+<div id="editor-classic">
+	<p>This editable should have a background.</p>
+	<p>This editable should have a background.</p>
+	<p>This editable should have a background.</p>
+	<p>This editable should have a background.</p>
+</div>
+
+<h2>Editor-balloon</h2>
+
+<div id="editor-balloon">
+	<p>This editable's background should be transparent.</p>
+	<p>This editable's background should be transparent.</p>
+	<p>This editable's background should be transparent.</p>
+	<p>This editable's background should be transparent.</p>
+</div>

tests/manual/tickets/113/1.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals document, window, console */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+
+const config = {
+	plugins: [ ArticlePluginSet ]
+};
+
+ClassicEditor
+	.create( document.querySelector( '#editor-classic' ), config )
+	.then( editor => {
+		window.classicEditor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+BalloonEditor
+	.create( document.querySelector( '#editor-balloon' ), config )
+	.then( editor => {
+		window.balloonEditor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

tests/manual/tickets/113/1.md

@@ -0,0 +1,5 @@
+## Classic editor's editable should have a background [#113](https://github.com/ckeditor/ckeditor5-theme-lark/issues/113)
+
+1. The background of body should be red.
+2. The classic editor's editable background **should not** be red.
+2. The balloon editor's editable background **should** be red.

theme/ckeditor5-editor-classic/classiceditor.css

@@ -29,6 +29,9 @@
 
 /* Note: Use ck-editor__main to make sure these styles don't apply to other editor types */
 .ck-editor__main .ck-editor__editable {
+	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/113 */
+	background: var(--ck-color-base-background);
+
 	@mixin ck-rounded-corners {
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;