diff --git a/CHANGES.md b/CHANGES.md index a697a66b8e7..3ae8766b2cf 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -10,6 +10,7 @@ Fixed Issues: * [#4301](https://github.com/ckeditor/ckeditor4/issues/4301): Fixed: Pasted content is overwritten when pasted in initially empty editor with [`div` enter mode](https://ckeditor.com/docs/ckeditor4/latest/features/enterkey.html). * [#4351](https://github.com/ckeditor/ckeditor4/issues/4351): Fixed: Incorrect values for RGBA/HSLA colors in [Color Dialog](https://ckeditor.com/cke4/addon/colordialog). * [#4509](https://github.com/ckeditor/ckeditor4/issues/4509): Fixed: Incorrect handling of drag & drop inside [widgets](https://ckeditor.com/cke4/addon/widget) and nested editables. +* [#4611](https://github.com/ckeditor/ckeditor4/issues/4611): [Android, iOS] Fixed: Incorrect hover styles for buttons in the toolbar on mobile devices. ## CKEditor 4.16 diff --git a/skins/kama/richcombo.css b/skins/kama/richcombo.css index 49e0fe1b61f..d1c6a70d419 100644 --- a/skins/kama/richcombo.css +++ b/skins/kama/richcombo.css @@ -79,6 +79,23 @@ a.cke_combo_button outline: none; } +/* Disable hover styles on mobile devices (#4611). */ +@media screen and ( hover: none ) { + + .cke_combo_off .cke_combo_button:hover + { + background: url(images/sprites.png) 0 -100px repeat-x; /* For backwards compatibility. */ + background: linear-gradient(to top, #fff, #d3d3d3 100px); + } + + /* We need to restore :active styles. */ + .cke_combo_off .cke_combo_button:active + { + background: #DFF1FF; + outline: none; + } +} + .cke_rtl .cke_combo_button { float: right; @@ -133,6 +150,21 @@ a.cke_combo_button opacity: 1; } +/* Disable hover styles on mobile devices (#4611). */ +@media screen and ( hover: none ) { + + .cke_combo_off .cke_combo_button:hover .cke_combo_inlinelabel + { + opacity: 0.70; + } + + /* We need to restore :active styles. */ + .cke_combo_off .cke_combo_button:active .cke_combo_inlinelabel + { + opacity: 1; + } +} + /* The handler which opens the panel of rich combo properties. It holds an arrow as a visual indicator. */ .cke_combo_open diff --git a/skins/kama/toolbar.css b/skins/kama/toolbar.css index 501eb797131..bdba9870531 100644 --- a/skins/kama/toolbar.css +++ b/skins/kama/toolbar.css @@ -179,6 +179,31 @@ a.cke_button_off:active opacity: 1; } +/* Disable hover styles on mobile devices (#4611). */ +@media screen and ( hover: none ) { + a.cke_button_off:hover + { + background: transparent; + opacity: 0.7; + } + + a.cke_button_on:hover { + background-color: #a3d7ff; + } + + /* We need to restore :active styles. */ + a.cke_button_off:active + { + background-color: #dff1ff; + opacity: 1; + } + + a.cke_button_on:active + { + background-color: #86caff; + } +} + /* The icon which is a visual representation of the button. */ .cke_button_icon { diff --git a/skins/moono-lisa/richcombo.css b/skins/moono-lisa/richcombo.css index 809cb6e1aa2..7e937159790 100644 --- a/skins/moono-lisa/richcombo.css +++ b/skins/moono-lisa/richcombo.css @@ -113,14 +113,29 @@ a.cke_combo_button outline: none; } - - .cke_combo_on a.cke_combo_button, .cke_combo_off a.cke_combo_button:active { background: #fff; } +/* Disable hover styles on mobile devices (#4611). */ +@media screen and ( hover: none ) { + + .cke_combo_off a.cke_combo_button:hover + { + background: transparent; + border-color: transparent; + } + + /* We need to restore :active styles. */ + .cke_combo_off a.cke_combo_button:active + { + background: #fff; + border: 1px solid #bcbcbc; + } +} + .cke_rtl .cke_combo_on a.cke_combo_button, .cke_rtl .cke_combo_off a.cke_combo_button:hover, .cke_rtl .cke_combo_off a.cke_combo_button:focus, diff --git a/skins/moono-lisa/toolbar.css b/skins/moono-lisa/toolbar.css index 3b7867fdfdf..32fa90de823 100644 --- a/skins/moono-lisa/toolbar.css +++ b/skins/moono-lisa/toolbar.css @@ -178,6 +178,35 @@ a.cke_button_expandable.cke_button_off:active padding: 1px 3px; } +/* Disable hover styles on mobile devices (#4611). */ +@media screen and ( hover: none ) { + a.cke_button_off:hover + { + background: transparent; + border: 0; + padding: 4px 6px; + } + + a.cke_button_expandable.cke_button_off:hover + { + padding: 4px 5px; + } + + /* We need to restore :active styles. */ + a.cke_button_off:active + { + background: #e5e5e5; + border: 1px #bcbcbc solid; + /* Compensate the border change */ + padding: 3px 5px; + } + + a.cke_button_expandable.cke_button_off:active + { + padding: 3px 4px; + } +} + /* Disabled Button states. */ a.cke_button_disabled:hover, diff --git a/skins/moono/richcombo.css b/skins/moono/richcombo.css index 41f8030c550..42766747fc3 100644 --- a/skins/moono/richcombo.css +++ b/skins/moono/richcombo.css @@ -109,6 +109,41 @@ a.cke_combo_button box-shadow: 0 1px 6px rgba(0,0,0,.7) inset, 0 1px 0 rgba(0,0,0,.2); } +/* Disable hover styles on mobile devices (#4611). */ +@media screen and ( hover: none ) { + + .cke_combo_off a.cke_combo_button:hover + { + background: #e4e4e4; + background-image: linear-gradient(to bottom, #ffffff, #e4e4e4); + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#e4e4e4'); + + outline: none; + } + + .cke_combo_on a.cke_combo_button:hover + { + box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset; + } + + /* We need to restore :active styles. */ + .cke_combo_off a.cke_combo_button:active + { + border: 1px solid #777; + + box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.6) inset; + + background: #b5b5b5; + background-image: linear-gradient(to bottom, #aaa, #cacaca); + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#aaaaaa', endColorstr='#cacaca'); + } + + .cke_combo_on a.cke_combo_button:active + { + box-shadow: 0 1px 6px rgba(0,0,0,.7) inset, 0 1px 0 rgba(0,0,0,.2); + } +} + .cke_rtl .cke_combo_button { float: right; diff --git a/skins/moono/toolbar.css b/skins/moono/toolbar.css index b6dbf1a17b5..ed5daf6e30d 100644 --- a/skins/moono/toolbar.css +++ b/skins/moono/toolbar.css @@ -196,6 +196,37 @@ a.cke_button_disabled:active filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc'); } +/* Disable hover styles on mobile devices (#4611). */ +@media screen and ( hover: none ) { + a.cke_button_off:hover, + a.cke_button_disabled:hover + { + box-shadow: none; + background: transparent; + filter: none; + } + + a.cke_button_on:hover + { + box-shadow: 0 1px 5px rgba(0,0,0,.6) inset, 0 1px 0 rgba(0,0,0,.2); + } + + /* We need to restore :active styles. */ + a.cke_button_off:active, + a.cke_button_disabled:active + { + box-shadow: 0 0 1px rgba(0,0,0,.3) inset; + background: #ccc; + background-image: linear-gradient(to bottom, #f2f2f2, #ccc); + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc'); + } + + a.cke_button_on:active + { + box-shadow: 0 1px 6px rgba(0,0,0,.7) inset, 0 1px 0 rgba(0,0,0,.2); + } +} + /* The icon which is a visual representation of the button. */ .cke_button_icon { diff --git a/tests/plugins/toolbar/manual/hover/__template__.html b/tests/plugins/toolbar/manual/hover/__template__.html new file mode 100644 index 00000000000..6f61142a2fc --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/__template__.html @@ -0,0 +1,47 @@ +

Iframe-based editor

+
+

Foo Bar

+
+ +

Div-based editor

+
+

Foo Bar

+
+ + diff --git a/tests/plugins/toolbar/manual/hover/androidbutton.md b/tests/plugins/toolbar/manual/hover/androidbutton.md new file mode 100644 index 00000000000..70cbc03e470 --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/androidbutton.md @@ -0,0 +1,29 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, language + +## Procedure (Moono-Lisa on Android device) + +1. Check if buttons have hover styles (darker background) by long tapping on them and releasing the finger. + + ### Expected result + + * There are hover styles **during** the tap. + * There aren't any hover styles **after** releasing the finger. + + ### Unexpected result + + * There aren't any hover styles **during** the tap. + * There are hover style **after** releasing the finger. + +2. Check if taping on buttons activate their toggled on state (lighter background). + + ### Expected result + + * Tapped button has toggled on state. + + ### Unexpected result + + * Tapped button does not have toggled on state. + +3. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/androidbuttonkama.md b/tests/plugins/toolbar/manual/hover/androidbuttonkama.md new file mode 100644 index 00000000000..63e57bca371 --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/androidbuttonkama.md @@ -0,0 +1,41 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, language + +## Procedure (Kama on Android device) + +1. Check if buttons have hover styles (light-blue background) by long tapping on them and releasing the finger. + + ### Expected result + + * There are hover styles **during** the tap. + * There aren't any hover styles **after** releasing the finger. + + ### Unexpected result + + * There aren't any hover styles **during** the tap. + * There are hover style **after** releasing the finger. + +2. Check if taping on buttons activate their toggle on state (darker blue background). + + ### Expected result + + * Tapped button has toggled on state. + + ### Unexpected result + + * Tapped button does not have toggled on state. + +3. Check if toggled on buttons have hover styles (even darker blue background) by long tapping on them and releasing the finger. + + ### Expected result + + * There are hover styles **during** the tap. + * There aren't any hover styles **after** releasing the finger. + + ### Unexpected result + + * There aren't any hover styles **during** the tap. + * There are hover style **after** releasing the finger. + +4. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/androidbuttonmoono.md b/tests/plugins/toolbar/manual/hover/androidbuttonmoono.md new file mode 100644 index 00000000000..5c55cc5c810 --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/androidbuttonmoono.md @@ -0,0 +1,41 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, language + +## Procedure (Moono on Android device) + +1. Check if buttons have hover styles (darker background) by long tapping on them and releasing the finger. + + ### Expected result + + * There are hover styles **during** the tap. + * There aren't any hover styles **after** releasing the finger. + + ### Unexpected result + + * There aren't any hover styles **during** the tap. + * There are hover style **after** releasing the finger. + +2. Check if taping on buttons activate their toggle on state ("pressed in" button). + + ### Expected result + + * Tapped button has toggled on state. + + ### Unexpected result + + * Tapped button does not have toggled on state. + +3. Check if toggled on buttons have hover styles (additional shadow, "deeper pressed in" button) by long tapping on them and releasing the finger. + + ### Expected result + + * There are hover styles **during** the tap. + * There aren't any hover styles **after** releasing the finger. + + ### Unexpected result + + * There aren't any hover styles **during** the tap. + * There are hover style **after** releasing the finger. + +4. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/androidrichcombo.md b/tests/plugins/toolbar/manual/hover/androidrichcombo.md new file mode 100644 index 00000000000..adab7a028c7 --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/androidrichcombo.md @@ -0,0 +1,29 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, stylescombo, format + +## Procedure (Moono-Lisa on Android device) + +1. Check if rich combos have hover styles (darker background) by long tapping on them and releasing the finger. + + ### Expected result + + * There are hover styles **during** the tap. + * There aren't any hover styles **after** releasing the finger. + + ### Unexpected result + + * There aren't any hover styles **during** the tap. + * There are hover style **after** releasing the finger. + +2. Check if taping on rich combos activate their toggled on state (lighter background). + + ### Expected result + + * Tapped rich combo has toggled on state. + + ### Unexpected result + + * Tapped rich combo does not have toggled on state. + +3. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/androidrichcombokama.md b/tests/plugins/toolbar/manual/hover/androidrichcombokama.md new file mode 100644 index 00000000000..f159fd67063 --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/androidrichcombokama.md @@ -0,0 +1,18 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, stylescombo, format + +## Procedure (Kama on Android device) + +1. Check if buttons have hover styles (light-blue background) by long tapping on them and releasing the finger. + + ### Expected result + + * There are hover styles **during** the tap. + * There aren't any hover styles **after** releasing the finger. + + ### Unexpected result + + * There aren't any hover styles **during** the tap. + * There are hover style **after** releasing the finger. +3. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/androidrichcombomoono.md b/tests/plugins/toolbar/manual/hover/androidrichcombomoono.md new file mode 100644 index 00000000000..aa552f6e1d1 --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/androidrichcombomoono.md @@ -0,0 +1,45 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, stylescombo, format + +## Procedure (Moono on Android device) + +1. Check if rich combos have hover styles (darker background) by long tapping on them and releasing the finger. + + ### Expected result + + * There are hover styles **during** the tap. + * There aren't any hover styles **after** releasing the finger. + + ### Unexpected result + + * There aren't any hover styles **during** the tap. + * There are hover style **after** releasing the finger. + +2. Check if taping on rich combos activate their toggle on state ("pressed in" combo). + + ### Expected result + + * Tapped rich combo has toggled on state. + + ### Unexpected result + + * Tapped rich combo does not have toggled on state. + +3. Check if toggled on rich combos have hover styles (additional shadow, "deeper pressed in" combo) by long tapping on them and releasing the finger. + + ### Expected result + + * There are hover styles **during** the tap. + * There aren't any hover styles **after** releasing the finger. + + ### Unexpected result + + * There aren't any hover styles **during** the tap. + * There are hover style **after** releasing the finger. + + ### Notes + + * Rich combo might close itself during the tap. + +4. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/desktopbutton.md b/tests/plugins/toolbar/manual/hover/desktopbutton.md new file mode 100644 index 00000000000..e36bd5b7f16 --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/desktopbutton.md @@ -0,0 +1,27 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, language + +## Procedure (Moono-Lisa) + +1. Check if buttons have hover styles (darker background). + + ### Expected result + + * There are hover styles. + + ### Unexpected result + + * There aren't hover styles. + +2. Check if clicking on buttons activate their toggled on state (lighter background). + + ### Expected result + + * Clicked button has toggled on state. + + ### Unexpected result + + * Clicked button does not have toggled on state. + +3. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/desktopbuttonkama.md b/tests/plugins/toolbar/manual/hover/desktopbuttonkama.md new file mode 100644 index 00000000000..a99d8318e2b --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/desktopbuttonkama.md @@ -0,0 +1,37 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, language + +## Procedure (Kama) + +1. Check if buttons have hover styles (light-blue background). + + ### Expected result + + * There are hover styles. + + ### Unexpected result + + * There aren't hover styles. + +2. Check if clicking on buttons activate their toggled on state (darker blue background). + + ### Expected result + + * Clicked button has toggled on state. + + ### Unexpected result + + * Clicked button does not have toggled on state. + +3. Check if toggled on buttons have hover styles (even darker blue background). + + ### Expected result + + * There are hover styles. + + ### Unexpected result + + * There aren't hover styles. + +4. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/desktopbuttonmoono.md b/tests/plugins/toolbar/manual/hover/desktopbuttonmoono.md new file mode 100644 index 00000000000..a75bdc8b795 --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/desktopbuttonmoono.md @@ -0,0 +1,37 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, language + +## Procedure (Moono) + +1. Check if buttons have hover styles (darker background). + + ### Expected result + + * There are hover styles. + + ### Unexpected result + + * There aren't hover styles. + +2. Check if clicking on buttons activate their toggled on state ("pressed in" button). + + ### Expected result + + * Clicked button has toggled on state. + + ### Unexpected result + + * Clicked button does not have toggled on state. + +3. Check if toggled on buttons have hover styles (additional shadow, "deeper pressed in" button). + + ### Expected result + + * There are hover styles. + + ### Unexpected result + + * There aren't hover styles. + +4. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/desktoprichcombo.md b/tests/plugins/toolbar/manual/hover/desktoprichcombo.md new file mode 100644 index 00000000000..ad80366b3d2 --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/desktoprichcombo.md @@ -0,0 +1,27 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, stylescombo, format + +## Procedure (Moono-Lisa) + +1. Check if rich combos have hover styles (darker background). + + ### Expected result + + * There are hover styles. + + ### Unexpected result + + * There aren't hover styles. + +2. Check if clicking on rich combos activate their toggled on state (lighter background). + + ### Expected result + + * Clicked combo has toggled on state. + + ### Unexpected result + + * Clicked combo does not have toggled on state. + +3. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/desktoprichcombokama.md b/tests/plugins/toolbar/manual/hover/desktoprichcombokama.md new file mode 100644 index 00000000000..4200ef6693a --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/desktoprichcombokama.md @@ -0,0 +1,17 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, stylescombo, format + +## Procedure (Kama) + +1. Check if rich combos have hover styles (light-blue background). + + ### Expected result + + * There are hover styles. + + ### Unexpected result + + * There aren't hover styles. + +2. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/desktoprichcombomoono.md b/tests/plugins/toolbar/manual/hover/desktoprichcombomoono.md new file mode 100644 index 00000000000..15898319e1c --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/desktoprichcombomoono.md @@ -0,0 +1,37 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, stylescombo, format + +## Procedure (Moono) + +1. Check if rich combos have hover styles (darker background). + + ### Expected result + + * There are hover styles. + + ### Unexpected result + + * There aren't hover styles. + +2. Check if clicking on rich combos activate their toggled on state ("pressed in" combo). + + ### Expected result + + * Clicked rich combo has toggled on state. + + ### Unexpected result + + * Clicked rich combo does not have toggled on state. + +3. Check if toggled on rich combos have hover styles (additional shadow, "deeper pressed in" combo). + + ### Expected result + + * There are hover styles. + + ### Unexpected result + + * There aren't hover styles. + +4. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/iosbutton.md b/tests/plugins/toolbar/manual/hover/iosbutton.md new file mode 100644 index 00000000000..b2c1660ac84 --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/iosbutton.md @@ -0,0 +1,29 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, language + +## Procedure (Moono-Lisa on iOS device) + +1. Check if buttons have hover styles (darker background) by long tapping on them and releasing the finger. + + ### Expected result + + * There aren't hover styles **during** the tap. + * Upon releasing finger, the hover styles "flashes" before the button gets into toggled on state. + + ### Unexpected result + + * There are hover styles **during** the tap. + * Releasing the finger didn't cause the "flash" of hover styles. + +2. Check if the button is in its toggled on state (lighter background) after the tap. + + ### Expected result + + * Tapped button has toggled on state. + + ### Unexpected result + + * Tapped button does not have toggled on state. + +3. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/iosbuttonkama.md b/tests/plugins/toolbar/manual/hover/iosbuttonkama.md new file mode 100644 index 00000000000..87ec8e07a18 --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/iosbuttonkama.md @@ -0,0 +1,41 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, language + +## Procedure (Kama on iOS device) + +1. Check if buttons have hover styles (light-blue background) by long tapping on them and releasing the finger. + + ### Expected result + + * There aren't hover styles **during** the tap. + * Upon releasing finger, the hover styles "flashes" before the button gets into toggled on state. + + ### Unexpected result + + * There are hover styles **during** the tap. + * Releasing the finger didn't cause the "flash" of hover styles. + +2. Check if the button is in its toggled on state (darker blue background) after the tap. + + ### Expected result + + * Tapped button has toggled on state. + + ### Unexpected result + + * Tapped button does not have toggled on state. + +3. Check if toggled on buttons have hover styles (even darker blue background) by long tapping on them and releasing the finger. + + ### Expected result + + * There aren't hover styles **during** the tap. + * Upon releasing finger, the hover styles "flashes" before the button gets into off state. + + ### Unexpected result + + * There are hover styles **during** the tap. + * Releasing the finger didn't cause the "flash" of hover styles. + +4. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/iosbuttonmoono.md b/tests/plugins/toolbar/manual/hover/iosbuttonmoono.md new file mode 100644 index 00000000000..0f249bcf9c1 --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/iosbuttonmoono.md @@ -0,0 +1,41 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, language + +## Procedure (Moono on iOS device) + +1. Check if buttons have hover styles (darker background) by long tapping on them and releasing the finger. + + ### Expected result + + * There aren't hover styles **during** the tap. + * Upon releasing finger, the hover styles "flashes" before the button gets into toggled on state. + + ### Unexpected result + + * There are hover styles **during** the tap. + * Releasing the finger didn't cause the "flash" of hover styles. + +2. Check if the button is in its toggled on state ("pressed in" button) after the tap. + + ### Expected result + + * Tapped button has toggled on state. + + ### Unexpected result + + * Tapped button does not have toggled on state. + +3. Check if toggled on buttons have hover styles (additional shadow, "deeper pressed in" button) by long tapping on them and releasing the finger. + + ### Expected result + + * There aren't hover styles **during** the tap. + * Upon releasing finger, the hover styles "flashes" before the button gets into off state. + + ### Unexpected result + + * There are hover styles **during** the tap. + * Releasing the finger didn't cause the "flash" of hover styles. + +4. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/iosrichcombo.md b/tests/plugins/toolbar/manual/hover/iosrichcombo.md new file mode 100644 index 00000000000..d1ed20b7230 --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/iosrichcombo.md @@ -0,0 +1,41 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, stylescombo, format + +## Procedure (Moono-Lisa on iOS device) + +1. Check if rich combos have hover styles (darker background) by long tapping on them and releasing the finger. + + ### Expected result + + * There aren't hover styles **during** the tap. + * Upon releasing finger, the hover styles "flashes" before the combo gets into toggled on state. + + ### Unexpected result + + * There are hover styles **during** the tap. + * Releasing the finger didn't cause the "flash" of hover styles. + +2. Check if the rich combo is in its toggled on state ("pressed in" combo) after the tap. + + ### Expected result + + * Tapped rich combohas toggled on state. + + ### Unexpected result + + * Tapped rich combo does not have toggled on state. + +3. Check if toggled on rich combos have hover styles (additional shadow, "deeper pressed in" combo) by long tapping on them and releasing the finger. + + ### Expected result + + * There aren't hover styles **during** the tap. + * Upon releasing finger, the hover styles "flashes" before the rich combo gets into off state. + + ### Unexpected result + + * There are hover styles **during** the tap. + * Releasing the finger didn't cause the "flash" of hover styles. + +4. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/iosrichcombokama.md b/tests/plugins/toolbar/manual/hover/iosrichcombokama.md new file mode 100644 index 00000000000..2d2a29b8485 --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/iosrichcombokama.md @@ -0,0 +1,19 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, stylescombo, format + +## Procedure (Kama on iOS device) + +1. Check if rich combos have hover styles (light-blue background) by long tapping on them and releasing the finger. + + ### Expected result + + * There aren't hover styles **during** the tap. + * Upon releasing finger, the hover styles "flashes" before the combo gets into toggled on state. + + ### Unexpected result + + * There are hover styles **during** the tap. + * Releasing the finger didn't cause the "flash" of hover styles. + +2. Repeat the procedure for the second editor. diff --git a/tests/plugins/toolbar/manual/hover/iosrichcombomoono.md b/tests/plugins/toolbar/manual/hover/iosrichcombomoono.md new file mode 100644 index 00000000000..7be3c18f4c7 --- /dev/null +++ b/tests/plugins/toolbar/manual/hover/iosrichcombomoono.md @@ -0,0 +1,41 @@ +@bender-tags: 4.16.1, 4611, bug +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, stylescombo, format + +## Procedure (Moono on iOS device) + +1. Check if rich combos have hover styles (darker background) by long tapping on them and releasing the finger. + + ### Expected result + + * There aren't hover styles **during** the tap. + * Upon releasing finger, the hover styles "flashes" before the combo gets into toggled on state. + + ### Unexpected result + + * There are hover styles **during** the tap. + * Releasing the finger didn't cause the "flash" of hover styles. + +2. Check if the rich combo is in its toggled on state ("pressed in" combo) after the tap. + + ### Expected result + + * Tapped rich combohas toggled on state. + + ### Unexpected result + + * Tapped rich combo does not have toggled on state. + +3. Check if toggled on rich combos have hover styles (additional shadow, "deeper pressed in" combo) by long tapping on them and releasing the finger. + + ### Expected result + + * There aren't hover styles **during** the tap. + * Upon releasing finger, the hover styles "flashes" before the rich combo gets into off state. + + ### Unexpected result + + * There are hover styles **during** the tap. + * Releasing the finger didn't cause the "flash" of hover styles. + +4. Repeat the procedure for the second editor.