Merge e41a32e into 68a9eba

vaadin · May 17, 2019 · b5cbaff · b5cbaff
2 parents 68a9eba + e41a32e
commit b5cbaff
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 2 deletions.
diff --git a/test/visual/screens/vaadin-text-field/text-area-1-lumo/text-area-1/chrome.png b/test/visual/screens/vaadin-text-field/text-area-1-lumo/text-area-1/chrome.png
diff --git a/test/visual/screens/vaadin-text-field/text-area-1-lumo/text-area-1/firefox.png b/test/visual/screens/vaadin-text-field/text-area-1-lumo/text-area-1/firefox.png
diff --git a/test/visual/screens/vaadin-text-field/text-area-1-material/text-area-1/chrome.png b/test/visual/screens/vaadin-text-field/text-area-1-material/text-area-1/chrome.png
diff --git a/test/visual/screens/vaadin-text-field/text-area-1-material/text-area-1/firefox.png b/test/visual/screens/vaadin-text-field/text-area-1-material/text-area-1/firefox.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -91,7 +91,11 @@ gemini.suite('vaadin-text-field', function(rootSuite) {
       suite
         .setUrl(`vaadin-text-area/text-area-1.html?theme=${theme}`)
         .setCaptureElements('#text-area')
-        .capture('text-area-1');
+        .capture('text-area-1', function(actions) {
+          actions.executeJS(function(window) {
+            window.scrollTextArea();
+          });
+        });
     });
 
     gemini.suite(`text-area-2-${theme}`, function(suite) {

diff --git a/test/visual/vaadin-text-area/text-area-1.html b/test/visual/vaadin-text-area/text-area-1.html
@@ -39,7 +39,7 @@
       <p>
       focused: <vaadin-text-area autofocus class="hidden-caret"></vaadin-text-area>
       <p>
-      readonly: <vaadin-text-area readonly value="
+      readonly: <vaadin-text-area readonly style="max-height: 100px;" value="
       Go Vaadin
       Go
       Go
@@ -48,4 +48,12 @@
     </fieldset>
   </form>
 
+  <script>
+    // eslint-disable-next-line no-unused-vars
+    function scrollTextArea() {
+      const textarea = document.querySelector('[readonly]');
+      textarea.shadowRoot.querySelector('[part="input-field"]').scrollTop = 50;
+    }
+  </script>
+
 </body>
diff --git a/theme/lumo/vaadin-text-area-styles.html b/theme/lumo/vaadin-text-area-styles.html
@@ -20,6 +20,15 @@
         display: none;
       }
 
+      :host([readonly]) [part="input-field"] {
+        border: 1px dashed var(--lumo-contrast-30pct);
+        margin: -1px;
+      }
+
+      :host([readonly]) [part="input-field"]::after {
+        border: none;
+      }
+
       :host(:hover:not([readonly]):not([focused])) [part="input-field"] {
         background-color: var(--lumo-contrast-20pct);
       }