Merge branch 't/13119' into major

ckeditor · Jun 1, 2015 · 2e0eee9 · 2e0eee9
2 parents cb5fd3a + 14b7f0f
commit 2e0eee9
Show file tree

Hide file tree

Showing 18 changed files with 144 additions and 19 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -32,6 +32,7 @@ Fixed Issues:
 
 Other Changes:
 
+* [#13119](http://dev.ckeditor.com/ticket/13119): Improved compatibility of editor skins ([Moono](http://ckeditor.com/addon/moono) and [Kama](http://ckeditor.com/addon/kama)) with external web page style sheets.
 * Toolbar configurators:
   * [#13147](http://dev.ckeditor.com/ticket/13147): Add buttons to the sticky toolbar.
   * [#13207](http://dev.ckeditor.com/ticket/13207): Use modal window to display help in toolbar configurator.

diff --git a/skins/kama/dialog.css b/skins/kama/dialog.css
@@ -250,7 +250,7 @@ a.cke_dialog_tab_disabled
 
 /* The close button at the top of the dialog. */
 
-.cke_dialog_close_button
+a.cke_dialog_close_button
 {
 	background-image: url(images/sprites.png);
 	background-repeat: no-repeat;

diff --git a/skins/kama/elementspath.css b/skins/kama/elementspath.css
@@ -27,10 +27,10 @@ The following is a visual representation of its main elements:
 }
 
 /* Each item of the elements path. */
-.cke_path_item,
+a.cke_path_item,
 /* Empty element available at the end of the elements path, to help us keeping
    the proper box size when the elements path is empty. */
-.cke_path_empty
+span.cke_path_empty
 {
 	display: inline-block;
 	float: left;

diff --git a/skins/kama/presets.css b/skins/kama/presets.css
@@ -23,12 +23,16 @@ For licensing, see LICENSE.md or http://ckeditor.com/license
 }
 
 /* Editable regions */
-.cke_source
+textarea.cke_source
 {
 	font-family: 'Courier New', Monospace;
 	font-size: small;
 	background-color: #fff;
 	white-space: pre-wrap;
+	border: none;
+	padding: 0;
+	margin: 0;
+	display: block;
 }
 
 .cke_wysiwyg_frame, .cke_wysiwyg_div

diff --git a/skins/kama/reset.css b/skins/kama/reset.css
@@ -46,7 +46,8 @@ http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Reset
 }
 
 /* Reset for elements and their children. */
-.cke_reset_all, .cke_reset_all *
+.cke_reset_all, .cke_reset_all *,
+.cke_reset_all a, .cke_reset_all textarea
 {
 	/* The following must be identical to .cke_reset. */
 	margin: 0;
@@ -73,6 +74,7 @@ http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Reset
     text-align: left;
 	white-space: nowrap;
 	cursor: auto;
+	float: none;
 }
 
 .cke_reset_all .cke_rtl *

diff --git a/skins/kama/richcombo.css b/skins/kama/richcombo.css
@@ -57,7 +57,7 @@ The visual representation of a rich combo widget looks as follows:
 }
 
 /* The container for combo text and arrow. */
-.cke_combo_button
+a.cke_combo_button
 {
 	display: inline-block;
 	-moz-border-radius: 5px;

diff --git a/skins/kama/toolbar.css b/skins/kama/toolbar.css
@@ -135,7 +135,7 @@ a.cke_button
 /* This class is applied to the button when it is "active" (pushed).
    This style indicates that the feature associated with the button is active
    i.e. currently writing in bold or when spell checking is enabled. */
-.cke_button_on
+a.cke_button_on
 {
 	background-color: #a3d7ff;
 }
@@ -150,7 +150,7 @@ a.cke_button
 
 /* This class is applied to the button when the feature associated with the
    button is available but currently not active.*/
-.cke_button_off
+a.cke_button_off
 {
 	opacity: 0.7;
 }
@@ -159,7 +159,7 @@ a.cke_button
    button cannot be used (grayed-out).
    i.e. paste button remains disabled when there is nothing in the clipboard to
    be pasted. */
-.cke_button_disabled
+a.cke_button_disabled
 {
 	opacity: 0.3;
 }
@@ -309,7 +309,7 @@ a.cke_button_off:active
 }
 
 /* The button, which when clicked hides (collapses) all the toolbars. */
-.cke_toolbox_collapser
+a.cke_toolbox_collapser
 {
 	width: 12px;
 	height: 11px;

diff --git a/skins/moono/dialog.css b/skins/moono/dialog.css
@@ -317,7 +317,7 @@ a.cke_dialog_tab_disabled
 
 /* The close button at the top of the dialog. */
 
-.cke_dialog_close_button
+a.cke_dialog_close_button
 {
 	background-image: url(images/close.png);
 	background-repeat: no-repeat;
@@ -327,7 +327,7 @@ a.cke_dialog_tab_disabled
 	text-align: center;
 	height: 20px;
 	width: 20px;
-	top: 5px;
+	top: 4px;
 	z-index: 5;
 	opacity: 0.8;
 	filter: alpha(opacity = 80);

diff --git a/skins/moono/elementspath.css b/skins/moono/elementspath.css
@@ -27,10 +27,10 @@ The following is a visual representation of its main elements:
 }
 
 /* Each item of the elements path. */
-.cke_path_item,
+a.cke_path_item,
 /* Empty element available at the end of the elements path, to help us keeping
    the proper box size when the elements path is empty. */
-.cke_path_empty
+span.cke_path_empty
 {
 	display: inline-block;
 	float: left;

diff --git a/skins/moono/presets.css b/skins/moono/presets.css
@@ -23,12 +23,16 @@ For licensing, see LICENSE.md or http://ckeditor.com/license
 }
 
 /* Editable regions */
-.cke_source
+textarea.cke_source
 {
 	font-family: 'Courier New', Monospace;
 	font-size: small;
 	background-color: #fff;
 	white-space: pre-wrap;
+	border: none;
+	padding: 0;
+	margin: 0;
+	display: block;
 }
 
 .cke_wysiwyg_frame, .cke_wysiwyg_div

diff --git a/skins/moono/reset.css b/skins/moono/reset.css
@@ -46,7 +46,8 @@ http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Reset
 }
 
 /* Reset for elements and their children. */
-.cke_reset_all, .cke_reset_all *
+.cke_reset_all, .cke_reset_all *,
+.cke_reset_all a, .cke_reset_all textarea
 {
 	/* The following must be identical to .cke_reset. */
 	margin: 0;

diff --git a/skins/moono/richcombo.css b/skins/moono/richcombo.css
@@ -60,7 +60,7 @@ The visual representation of a rich combo widget looks as follows:
 }
 
 /* The container for combo text and arrow. */
-.cke_combo_button
+a.cke_combo_button
 {
 	cursor: default;
 	display: inline-block;

diff --git a/skins/moono/toolbar.css b/skins/moono/toolbar.css
@@ -147,7 +147,7 @@ a.cke_button
 /* This class is applied to the button when it is "active" (pushed).
    This style indicates that the feature associated with the button is active
    i.e. currently writing in bold or when spell checking is enabled. */
-.cke_button_on
+a.cke_button_on
 {
 	-moz-box-shadow: 0 1px 5px rgba(0,0,0,.6) inset, 0 1px 0 rgba(0,0,0,.2);
 	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6) inset, 0 1px 0 rgba(0,0,0,.2);
@@ -348,7 +348,7 @@ a.cke_button_disabled:active
 }
 
 /* The button, which when clicked hides (collapses) all the toolbars. */
-.cke_toolbox_collapser
+a.cke_toolbox_collapser
 {
 	width: 12px;
 	height: 11px;

diff --git a/tests/core/skin/manual/_assets/styles.css b/tests/core/skin/manual/_assets/styles.css
@@ -0,0 +1,56 @@
+/*
+There's only sense testing rules with specificity 11
+because CKEditor's reset is not able to override higher ones.
+It also only makes sense to test some reasonable selectors.
+It is of course possible to do:
+.styled * { float: left }
+but it's unrealistic and it would be a developer's fault.
+Realistic, imprecise styles are based on specific tag names like `a` or `table`.
+*/
+
+* {
+	box-sizing: border-box;
+	font-family: Courier;
+	font-size: 20px;
+}
+
+input, textarea, a, label {
+	border: solid 5px blue;
+	padding: 5px;
+	text-decoration: underline;
+}
+
+table {
+	table-layout: fixed;
+	width: 800px;
+	float: right;
+	border: solid 2px blue;
+}
+
+p, h1 {
+	color: red;
+}
+
+iframe {
+	width: 500px;
+	border: solid 2px green;
+}
+
+/* Links are pretty often styled with similar styles
+and are used by us in many places in the UI. */
+.styled a {
+	text-decoration: underline;
+	border: solid 2px green;
+	color: red;
+	font-size: 15px;
+	background: blue;
+	padding: 5px;
+}
+
+.styled textarea {
+	margin: 20px;
+	padding: 10px;
+	border: solid 5px red;
+	width: 200px;
+	background: red;
+}
diff --git a/tests/core/skin/manual/reset.html b/tests/core/skin/manual/reset.html
@@ -0,0 +1,18 @@
+<head>
+	<link rel="stylesheet" href="_assets/styles.css">
+</head>
+
+<body class="styled">
+	<div id="editor">
+		<p>Foo</p>
+		<p>Foo</p>
+		<p>Foo</p>
+		<p>Foo</p>
+	</div>
+
+	<script>
+		CKEDITOR.replace( 'editor', {
+			toolbarCanCollapse: true
+		} );
+	</script>
+</body>
diff --git a/tests/core/skin/manual/reset.md b/tests/core/skin/manual/reset.md
@@ -0,0 +1,10 @@
+@bender-tags: 4.5.0, tc
+@bender-ckeditor-plugins: wysiwygarea, sourcearea, toolbar, basicstyles, colorbutton, image, font,about, language, elementspath, resize, justify, undo
+@bender-ui: collapsed
+
+Test whether skin of the editor was not affected by page's styling. Check:
+
+* Links in the elements path.
+* All dialogs.
+* Sourcearea.
+* Button states.
diff --git a/tests/core/skin/manual/resetkama.html b/tests/core/skin/manual/resetkama.html
@@ -0,0 +1,19 @@
+<head>
+	<link rel="stylesheet" href="_assets/styles.css">
+</head>
+
+<body class="styled">
+	<div id="editor">
+		<p>Foo</p>
+		<p>Foo</p>
+		<p>Foo</p>
+		<p>Foo</p>
+	</div>
+
+	<script>
+		CKEDITOR.replace( 'editor', {
+			skin: 'kama',
+			toolbarCanCollapse: true
+		} );
+	</script>
+</body>
diff --git a/tests/core/skin/manual/resetkama.md b/tests/core/skin/manual/resetkama.md
@@ -0,0 +1,10 @@
+@bender-tags: 4.5.0, tc
+@bender-ckeditor-plugins: wysiwygarea, sourcearea, toolbar, basicstyles, colorbutton, image, font, about, language, elementspath, resize, justify, undo
+@bender-ui: collapsed
+
+Test whether skin of the editor was not affected by page's styling. Check:
+
+* Links in the elements path.
+* All dialogs.
+* Sourcearea.
+* Button states.