Procházet zdrojové kódy

Tests: Made the theme-lark iconset manual test more useful by displaying icons in different color variations and scales.

Aleksander Nowodzinski před 5 roky
rodič
revize
0609d29cb2

+ 39 - 1
packages/ckeditor5-theme-lark/tests/manual/iconset.html

@@ -1,3 +1,41 @@
 <style>
-	svg.ck-icon .ck-icon__fill { fill: yellow; }
+	#color .ck-toolbar .ck-button {
+		color: hsl(0deg 100% 50%);
+	}
+
+	#inverted .ck-toolbar {
+		--ck-custom-background: hsl(270, 1%, 29%);
+		--ck-custom-border: hsl(300, 1%, 22%);
+
+		--ck-color-base-foreground: var(--ck-custom-background);
+		--ck-color-focus-border: hsl(208, 90%, 62%);
+		--ck-color-text: hsl(0, 0%, 98%);
+		--ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
+		--ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
+
+		--ck-color-button-default-background: var(--ck-custom-background);
+		--ck-color-button-default-hover-background: hsl(270, 1%, 22%);
+		--ck-color-button-default-active-background: hsl(270, 2%, 20%);
+		--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
+		--ck-color-button-default-disabled-background: var(--ck-custom-background);
+
+		--ck-color-toolbar-background: var(--ck-custom-background);
+		--ck-color-toolbar-border: var(--ck-custom-border);
+	}
+
+	#zoom .ck-toolbar .ck-button {
+		font-size: 25px;
+	}
 </style>
+
+<h2>Standard</h2>
+<div id="standard"></div>
+
+<h2>Colors</h2>
+<div id="color"></div>
+
+<h2>Colors inverted</h2>
+<div id="inverted"></div>
+
+<h2>Scaled up</h2>
+<div id="zoom"></div>

+ 5 - 2
packages/ckeditor5-theme-lark/tests/manual/iconset.js

@@ -183,7 +183,7 @@ for ( const i in icons ) {
 		tooltip: true
 	} );
 
-	button.iconView.fillColor = '#FFDA51';
+	button.iconView.fillColor = 'hsl(47deg 100% 66%)';
 
 	toolbar.items.add( button );
 }
@@ -191,4 +191,7 @@ for ( const i in icons ) {
 toolbar.class = 'ck-editor-toolbar ck-reset_all';
 toolbar.render();
 
-document.body.appendChild( toolbar.element );
+document.querySelector( '#standard' ).appendChild( toolbar.element );
+document.querySelector( '#color' ).appendChild( toolbar.element.cloneNode( true ) );
+document.querySelector( '#inverted' ).appendChild( toolbar.element.cloneNode( true ) );
+document.querySelector( '#zoom' ).appendChild( toolbar.element.cloneNode( true ) );

+ 5 - 1
packages/ckeditor5-theme-lark/tests/manual/iconset.md

@@ -2,6 +2,10 @@
 
 Make sure all icons in the toolbar render correctly.
 
+* Make sure all red icons are evenly filled with color (e.g. no black pieces).
+* Make sure all white icons (inverted toolbar) are evenly filled with color (e.g. no black pieces).
+* Check out the scaled up iconset. It is the same as the first one but the `font-size` of buttons hosting the icons is non-standard. Look for glitches and rendering issues.
+
 ## Notes
 
-* Some icons like "marker" and "pen" should be filled with yellow color.
+* Some icons like "marker" and "pen" should be filled with yellow color. This **must** work regardless of the color of the icon (black, red, or white).