-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Mateusz Samsel
committed
Jun 29, 2017
1 parent
79da85a
commit c69e723
Showing
3 changed files
with
258 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,240 @@ | ||
/* bender-tags: editor,unit */ | ||
/* bender-ckeditor-plugins: colorbutton,colordialog,toolbar,wysiwygarea */ | ||
|
||
|
||
( function() { | ||
'use strict'; | ||
|
||
bender.editor = {}; | ||
|
||
|
||
var test = { | ||
_createEditor: function( config, fn ) { | ||
if ( bender.editor ) { | ||
bender.editor.destroy(); | ||
} | ||
|
||
var tc = this; | ||
|
||
bender.editorBot.create( { config: config }, function( bot ) { | ||
bender.editor = tc.editor = bot.editor; | ||
tc.editorBot = bot; | ||
fn.call( tc ); | ||
} ); | ||
}, | ||
|
||
// We need fresh instance of editor every time (#565). | ||
'test adding hash (3) to color in background': function() { | ||
this._createEditor( { name: 'editor1' }, function() { | ||
var editor = this.editor, | ||
bot = this.editorBot, | ||
bgColorBtn = editor.ui.get( 'BGColor' ); | ||
|
||
// open panel | ||
bgColorBtn.click( editor ); | ||
bot.setHtmlWithSelection( '<p>[foo]</p>' ); | ||
editor.once( 'dialogHide', function( evt ) { | ||
resume( function() { | ||
assert.areSame( '<p><span style="background-color:#aabbcc">foo</span></p>', evt.editor.getData() ); | ||
} ); | ||
} ); | ||
|
||
var item = document.querySelector( '.cke_panel_frame' ).contentWindow.document.querySelector( '.cke_colormore' ); | ||
|
||
item.click(); | ||
|
||
wait( function() { | ||
editor.on( 'dialogShow', function( evt ) { | ||
var dialog = evt.data; | ||
dialog.setValueOf( 'picker', 'selectedColor', 'ABC' ); | ||
dialog.getButton( 'ok' ).click(); | ||
} ); | ||
} ); | ||
} ); | ||
}, | ||
|
||
'test adding hash (6) to color in background': function() { | ||
this._createEditor( { name: 'editor1' }, function() { | ||
var editor = this.editor, | ||
bot = this.editorBot, | ||
bgColorBtn = editor.ui.get( 'BGColor' ); | ||
|
||
// open panel | ||
bgColorBtn.click( editor ); | ||
bot.setHtmlWithSelection( '<p>[foo]</p>' ); | ||
editor.once( 'dialogHide', function( evt ) { | ||
resume( function() { | ||
assert.areSame( '<p><span style="background-color:#123456">foo</span></p>', evt.editor.getData() ); | ||
} ); | ||
} ); | ||
|
||
var item = document.querySelector( '.cke_panel_frame' ).contentWindow.document.querySelector( '.cke_colormore' ); | ||
|
||
item.click(); | ||
|
||
wait( function() { | ||
editor.on( 'dialogShow', function( evt ) { | ||
var dialog = evt.data; | ||
dialog.setValueOf( 'picker', 'selectedColor', '123456' ); | ||
dialog.getButton( 'ok' ).click(); | ||
} ); | ||
} ); | ||
} ); | ||
}, | ||
|
||
'test adding hash (3) to color in foreground': function() { | ||
this._createEditor( { name: 'editor1' }, function() { | ||
var editor = this.editor, | ||
bot = this.editorBot, | ||
txtColorBtn = editor.ui.get( 'TextColor' ); | ||
|
||
// open panel | ||
txtColorBtn.click( editor ); | ||
bot.setHtmlWithSelection( '<p>[foo]</p>' ); | ||
editor.once( 'dialogHide', function( evt ) { | ||
resume( function() { | ||
assert.areSame( '<p><span style="color:#778899">foo</span></p>', evt.editor.getData() ); | ||
} ); | ||
} ); | ||
|
||
var item = document.querySelector( '.cke_panel_frame' ).contentWindow.document.querySelector( '.cke_colormore' ); | ||
|
||
item.click(); | ||
|
||
wait( function() { | ||
editor.on( 'dialogShow', function( evt ) { | ||
var dialog = evt.data; | ||
dialog.setValueOf( 'picker', 'selectedColor', '789' ); | ||
dialog.getButton( 'ok' ).click(); | ||
} ); | ||
} ); | ||
} ); | ||
}, | ||
|
||
'test adding hash (6) to color in foreground': function() { | ||
this._createEditor( { name: 'editor1' }, function() { | ||
var editor = this.editor, | ||
bot = this.editorBot, | ||
txtColorBtn = editor.ui.get( 'TextColor' ); | ||
|
||
// open panel | ||
txtColorBtn.click( editor ); | ||
bot.setHtmlWithSelection( '<p>[foo]</p>' ); | ||
editor.once( 'dialogHide', function( evt ) { | ||
resume( function() { | ||
assert.areSame( '<p><span style="color:#abcdef">foo</span></p>', evt.editor.getData() ); | ||
} ); | ||
} ); | ||
|
||
var item = document.querySelector( '.cke_panel_frame' ).contentWindow.document.querySelector( '.cke_colormore' ); | ||
|
||
item.click(); | ||
|
||
wait( function() { | ||
editor.on( 'dialogShow', function( evt ) { | ||
var dialog = evt.data; | ||
dialog.setValueOf( 'picker', 'selectedColor', 'ABCDEF' ); | ||
dialog.getButton( 'ok' ).click(); | ||
} ); | ||
} ); | ||
} ); | ||
}, | ||
|
||
'test adding non hash color to background - color name': function() { | ||
this._createEditor( { name: 'editor1' }, function() { | ||
var editor = this.editor, | ||
bot = this.editorBot, | ||
bgColorBtn = editor.ui.get( 'BGColor' ); | ||
|
||
// open panel | ||
bgColorBtn.click( editor ); | ||
bot.setHtmlWithSelection( '<p>[foo]</p>' ); | ||
editor.once( 'dialogHide', function( evt ) { | ||
resume( function() { | ||
assert.areSame( '<p><span style="background-color:blue">foo</span></p>', evt.editor.getData() ); | ||
} ); | ||
} ); | ||
|
||
var item = document.querySelector( '.cke_panel_frame' ).contentWindow.document.querySelector( '.cke_colormore' ); | ||
|
||
item.click(); | ||
|
||
wait( function() { | ||
editor.on( 'dialogShow', function( evt ) { | ||
var dialog = evt.data; | ||
dialog.setValueOf( 'picker', 'selectedColor', 'blue' ); | ||
dialog.getButton( 'ok' ).click(); | ||
} ); | ||
} ); | ||
} ); | ||
}, | ||
|
||
'test adding non hash color to background - rgba()': function() { | ||
|
||
|
||
this._createEditor( { name: 'editor1' }, function() { | ||
var editor = this.editor, | ||
bot = this.editorBot, | ||
bgColorBtn = editor.ui.get( 'BGColor' ); | ||
|
||
// open panel | ||
bgColorBtn.click( editor ); | ||
bot.setHtmlWithSelection( '<p>[foo]</p>' ); | ||
editor.once( 'dialogHide', function( evt ) { | ||
resume( function() { | ||
if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) { | ||
assert.areSame( '<p>foo</p>', evt.editor.getData() ); | ||
} else { | ||
assert.areSame( '<p><span style="background-color:rgba(10, 20, 30, 0.4)">foo</span></p>', evt.editor.getData() ); | ||
} | ||
} ); | ||
} ); | ||
|
||
var item = document.querySelector( '.cke_panel_frame' ).contentWindow.document.querySelector( '.cke_colormore' ); | ||
|
||
item.click(); | ||
|
||
wait( function() { | ||
editor.on( 'dialogShow', function( evt ) { | ||
var dialog = evt.data; | ||
dialog.setValueOf( 'picker', 'selectedColor', 'rgba(10, 20, 30, 0.4)' ); | ||
dialog.getButton( 'ok' ).click(); | ||
} ); | ||
} ); | ||
} ); | ||
}, | ||
|
||
'test adding non hash color to background - empty string': function() { | ||
this._createEditor( { name: 'editor1' }, function() { | ||
var editor = this.editor, | ||
bot = this.editorBot, | ||
bgColorBtn = editor.ui.get( 'BGColor' ); | ||
|
||
// open panel | ||
bgColorBtn.click( editor ); | ||
bot.setHtmlWithSelection( '<p>[foo]</p>' ); | ||
editor.once( 'dialogHide', function( evt ) { | ||
resume( function() { | ||
assert.areSame( '<p>foo</p>', evt.editor.getData() ); | ||
} ); | ||
} ); | ||
|
||
var item = document.querySelector( '.cke_panel_frame' ).contentWindow.document.querySelector( '.cke_colormore' ); | ||
|
||
item.click(); | ||
|
||
wait( function() { | ||
editor.on( 'dialogShow', function( evt ) { | ||
var dialog = evt.data; | ||
dialog.setValueOf( 'picker', 'selectedColor', '' ); | ||
dialog.getButton( 'ok' ).click(); | ||
} ); | ||
} ); | ||
} ); | ||
} | ||
|
||
|
||
}; | ||
|
||
bender.test( test ); | ||
} )(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
<textarea id="editor">Hello World</textarea> | ||
<script> | ||
CKEDITOR.replace('editor'); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
@bender-tags: manual, tc, 4.8.0, feature, 565 | ||
@bender-ui: collapsed | ||
@bender-ckeditor-plugins: colorbutton,colordialog,toolbar,wysiwygarea,sourcearea | ||
|
||
1. Select text | ||
1. Press `Text Colour` | ||
1. Use option `More colours` | ||
1. Type **by yourself** color in hex notation **without** `#` at the beginning. E.g (`880088`). **Do not use color picking from the left side.** | ||
1. Color of seleted text should change | ||
1. In source `#` should be added to color value | ||
1. Now open `More colours` again and type 3-hexdigit color, also **without** `#` at the beginning. E.g (`0CF`) | ||
1. Color also should change and source should be modifiaed with `#` | ||
1. Now try to put values which are not correct. Like 4 digits, or number inside another string, or anything else what came to your mind. Those should not get additional `#` at the beginning | ||
1. Repeat above steps for `Background Colour` |