Bug 1637391 [wpt PR 23546] - Invalidate style for inner editor when focus changes., a=testonly

lilles · moz-wptsync-bot · commit d45d2380ecd1 · 2020-05-25T14:32:25.000Z
Automatic update from web-platform-tests Invalidate style for inner editor when focus changes. The inner editor style invalidation relied on marking the element style dirty during style recalc if the host input style changed, but that might not be the case if the author overrides any focus styles. Bug: 1078663 Change-Id: I2914ff9bebc4bc239ca29ced7365b2c9155ebbb0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2196583 Reviewed-by: Ionel Popescu <iopopesc@microsoft.com> Commit-Queue: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/master@{#768172} -- wpt-commits: 41769744060adc5877bf51085bfa98b16fce5737 wpt-pr: 23546
diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-editing-input-ref.html b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-editing-input-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+  input {
+    all: initial;
+    width: 100px;
+  }
+</style>
+<p>You should not see an ellipsis for the text below.</p>
+<input id="input_element" value="xxxxxxxxxxxxxxxxxxxx">
diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-editing-input.html b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-editing-input.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<title>CSS Overflow Test: text-overflow:ellipsis not rendered while editing</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow/#ellipsis-interaction">
+<link rel="match" href="text-overflow-ellipsis-editing-input-ref.html">
+<!-- The specification says it "may" render ellipsis as clip while editing, but
+     all current engines do for input elements. -->
+<style>
+  input {
+    all: initial;
+    width: 100px;
+    text-overflow: ellipsis;
+    caret-color: transparent;
+  }
+</style>
+<p>You should not see an ellipsis for the text below.</p>
+<input id="input_element" value="xxxxxxxxxxxxxxxxxxxx">
+<script>
+  input_element.offsetTop;
+  input_element.focus();
+</script>
