Add some tests for CSS and scrolling; fix scroll handling so errors clearer

WebCoder49 · WebCoder49 · commit 2e5cf0a61ba0 · 2025-07-18T09:50:15.000+01:00
diff --git a/code-input.css b/code-input.css
@@ -190,7 +190,7 @@ code-input .code-input_dialog-container .code-input_keyboard-navigation-instruct
   padding-left: 10px;
   margin: 0;
   text-wrap: balance;
-  overflow: hidden;
+  overflow: auto;
   text-overflow: ellipsis;
   width: calc(100% - 12px);
   box-sizing: content-box; /* Make height, width work consistently no matter the box-sizing of ancestors. */
diff --git a/code-input.js b/code-input.js
@@ -1066,17 +1066,26 @@ var codeInput = {
         set scrollHeight(val) { this.textareaElement.scrollHeight = val; };
         get scrollWidth() { return this.textareaElement.scrollWidth; };
         set scrollWidth(val) { this.textareaElement.scrollWidth = val; };
-        scroll(firstArg, secondArg=undefined) {
-            if(secondArg === undefined) this.textareaElement.scroll(firstArg);
-            else this.textareaElement.scroll(firstArg, secondArg);
+        scroll(options) {
+            this.textareaElement.scroll(options);
+            this.textareaElement.scroll(x, y);
         };
-        scrollTo(firstArg, secondArg=undefined) {
-            if(secondArg === undefined) this.textareaElement.scrollTo(firstArg);
-            else this.textareaElement.scrollTo(firstArg, secondArg);
+        scroll(x, y) {
+            this.textareaElement.scroll(x, y);
         };
-        scrollBy(firstArg, secondArg=undefined) {
-            if(secondArg === undefined) this.textareaElement.scrollBy(firstArg);
-            else this.textareaElement.scrollBy(firstArg, secondArg);
+        scrollTo(options) {
+            this.textareaElement.scroll(options);
+            this.textareaElement.scroll(x, y);
+        };
+        scrollTo(x, y) {
+            this.textareaElement.scroll(x, y);
+        };
+        scrollBy(options) {
+            this.textareaElement.scroll(options);
+            this.textareaElement.scroll(x, y);
+        };
+        scrollBy(x, y) {
+            this.textareaElement.scroll(x, y);
         };
     },
 
diff --git a/tests/tester.js b/tests/tester.js
@@ -323,6 +323,25 @@ console.log("I've got another line!", 2 &lt; 3, "should be true.");`);
 // A second line
 // A third line with &lt;html&gt; tags`);
 
+    codeInputElement.setAttribute("style", "width: 10em; height: 30em; white-space: pre-wrap; word-break: normal;");
+    textarea.selectionStart -= 1;
+    await waitAsync(50); // Wait for CSS to visibly change
+    testAssertion("Core", "CSS pre-wrap normal", confirm("Is the code wrapped, and the selected character aligned? (OK=Yes)"), "user-judged");
+    codeInputElement.setAttribute("style", "width: 10em; height: 30em; white-space: pre-wrap; word-break: break-word;");
+    await waitAsync(50); // Wait for CSS to visibly change
+    testAssertion("Core", "CSS pre-wrap break-word", confirm("Is the code wrapped, and the selected character aligned? (OK=Yes)"), "user-judged");
+    codeInputElement.setAttribute("style", "width: 10em; height: 30em; white-space: pre-wrap; word-break: break-all;");
+    await waitAsync(50); // Wait for CSS to visibly change
+    testAssertion("Core", "CSS pre-wrap break-all", confirm("Is the code wrapped, and the selected character aligned? (OK=Yes)"), "user-judged");
+    codeInputElement.setAttribute("style", "font-size: 50px; height: 10em;");
+    await waitAsync(50); // Wait for CSS to visibly change
+    testAssertion("Core", "CSS font-size", confirm("Is the selected character aligned? (OK=Yes)"), "user-judged");
+    codeInputElement.setAttribute("style", "width: 10em; height: 10em; white-space: pre-wrap; word-break: break-all;");
+    codeInputElement.scrollTo(0, (codeInputElement.offsetHeight - codeInputElement.clientHeight) + codeInputElement.scrollHeight); // Scroll to bottom - offset-client is margin+border+padding
+    await waitAsync(50); // Wait for CSS to visibly change
+    testAssertion("Core", "Scroll aligned", confirm("Is the selected character aligned? (OK=Yes)"), "user-judged");
+    codeInputElement.removeAttribute("style");
+
     /*--- Tests for plugins ---*/
     // AutoCloseBrackets
     testAddingText("AutoCloseBrackets", textarea, function(textarea) {
