Sfoglia il codice sorgente

Tests: Implemented the text direction selector in the theme manual test.

Aleksander Nowodzinski 6 anni fa
parent
commit
92cfa821f8

+ 19 - 0
packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -1,5 +1,15 @@
 <head>
 <head>
 	<style>
 	<style>
+		.test-settings {
+			background: #eee;
+			border: 2px solid #ccc;
+			padding: 1em;
+		}
+
+		.test-settings h2 {
+			margin-top: .3em;
+		}
+
 		.wrappable {
 		.wrappable {
 			white-space: initial;
 			white-space: initial;
 			line-height: 3em;
 			line-height: 3em;
@@ -26,6 +36,15 @@
 	</style>
 	</style>
 </head>
 </head>
 
 
+<section class="test-settings">
+	<h2>Test settings</h2>
+	<label for="direcion-selector">Language direction:</label>
+	<select id="direcion-selector">
+		<option value="ltr">Left–to–right (LTR)</option>
+		<option value="rtl">Right-to-left (RTL)</option>
+	</select>
+</section>
+
 <h2>Icon</h2>
 <h2>Icon</h2>
 
 
 	<h3>Icon: In–text</h3>
 	<h3>Icon: In–text</h3>

+ 11 - 0
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -575,3 +575,14 @@ function input( {
 
 
 	return labeledInput;
 	return labeledInput;
 }
 }
+
+function setManualTestDirection( direction ) {
+	document.querySelector( '.manual-test-container' ).classList.add( 'ck' );
+	document.querySelector( '.manual-test-container' ).setAttribute( 'dir', direction );
+}
+
+document.querySelector( '#direcion-selector' ).addEventListener( 'change', evt => {
+	setManualTestDirection( evt.target.value );
+} );
+
+setManualTestDirection( 'ltr' );