Emilio Cobos Álvarez
34b249c82e
This also should fix bug 1881942 (placeholder is now scrollable alongside the textarea). This makes nsTextControlFrame a subclass of ScrollContainerFrame (with an inner block), and tweaks layout to match. It lays out the inner content using block layout and align-content, rather than bespoke reflow primitives. This makes field-sizing trivial to implement on top. This is a bit scary, but simpler in most ways. In particular, it needs to teach ScrollContainerFrame of the button, because that goes outside the scrollable area, like scrollbars. That said it needs less special-cases added than those removed, and it should also be faster (needs less frames to layout an input with placeholder etc), and match other browsers better. The general set-up is: <text-control-editing-root/> <placeholder/> <autofill-preview/> text-control-editing-root is always inline-block and always displayed (since it's what grabs the focus / shows the caret). If the autofill-preview or placeholder are displayed, the editing-root is zero-width and clipped (note that for placeholder that's guaranteed because placeholder is only shown with an empty value, but autofill-preview needs it). placeholder and autofill-preview are hidden via `display` rather than visibility. This doesn't make a difference with this patch but it matters for bug 1977176. Caret painting needs an extra hop to paint atop the placeholder (no observable behavior change, but worth calling out). There is one subtle behavior change, which is that single-line inputs never report scrollable overflow in the block axis. This matches other browsers (see the tweak in nsBlockFrame's overflow computation) and is needed to avoid regressing scrollable-overflow-padding-input.html. The changes in window_composition_text_querycontent.xhtml are needed because before this patch, the height of the control editing root was always the height of the whole textarea. The characters you're composing might legitimately be taller than the line. Bump the line height so that that doesn't happen in this test. Differential Revision: https://phabricator.services.mozilla.com/D293666
108 lines
3.5 KiB
HTML
108 lines
3.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=717878
|
|
-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Test for Bug 717878</title>
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
|
</head>
|
|
<body>
|
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=717878">Mozilla Bug 717878</a>
|
|
<p id="display"></p>
|
|
<div id="content" style="display: none">
|
|
</div>
|
|
<!-- size=10 and monospace font ensure there's no overflow in either direction -->
|
|
<input id="no-overflow" type="text"
|
|
size="10"
|
|
style="
|
|
font-family: monospace;
|
|
font-size: 1em;"
|
|
value="Short">
|
|
<!-- ditto, with appearance:none -->
|
|
<input id="no-overflow2" type="text"
|
|
size="10"
|
|
style="
|
|
-webkit-appearance:none;
|
|
font-family: monospace;
|
|
font-size: 1em;"
|
|
value="Short">
|
|
<!-- size=10, monospace font, and height=0.5em ensure overflow in both directions -->
|
|
<input id="overflow" type="text"
|
|
size="10"
|
|
style="
|
|
font-family: monospace;
|
|
font-size: 3em;
|
|
height: 0.5em;"
|
|
value="This is a long string">
|
|
<!-- ditto, with appearance:none -->
|
|
<input id="overflow2" type="text"
|
|
size="10"
|
|
style="
|
|
-webkit-appearance:none;
|
|
font-family: monospace;
|
|
font-size: 3em;
|
|
height: 0.5em;"
|
|
value="This is a long string">
|
|
<pre id="test">
|
|
<script type="application/javascript">
|
|
|
|
/** Test for Bug 717878 */
|
|
|
|
/**
|
|
* Test an element's scroll properties for correctness
|
|
*
|
|
* @param element Element to test
|
|
* @param scroll Specify the property to test,
|
|
* i.e. "scrollLeft" or "scrollTop"
|
|
* @param scrollMax Specify the scrollMax property to test,
|
|
* i.e. "scrollLeftMax" or "scrollTopMax"
|
|
* @param is_overflow Specify whether the element is
|
|
* scrollable in the above direction
|
|
*/
|
|
function test_scroll(element, scroll, scrollMax, is_overflow) {
|
|
|
|
is(element[scroll], 0, element.id + " initial " + scroll + " != 0");
|
|
if (is_overflow) {
|
|
isnot(element[scrollMax], 0, element.id + " " + scrollMax + " == 0");
|
|
} else {
|
|
is(element[scrollMax], 0, element.id + " " + scrollMax + " != 0");
|
|
}
|
|
|
|
element[scroll] = 10;
|
|
if (is_overflow) {
|
|
isnot(element[scroll], 0, element.id + " unable to scroll " + scroll);
|
|
} else {
|
|
is(element[scroll], 0, element.id + " able to scroll " + scroll);
|
|
}
|
|
|
|
element[scroll] = element[scrollMax];
|
|
isfuzzy(element[scroll], element[scrollMax], 1, element.id + " did not scroll to " + scrollMax);
|
|
|
|
element[scroll] = element[scrollMax] + 10;
|
|
isfuzzy(element[scroll], element[scrollMax], 1, element.id + " scrolled past " + scrollMax);
|
|
}
|
|
|
|
var no_overflow = document.getElementById("no-overflow");
|
|
test_scroll(no_overflow, "scrollLeft", "scrollLeftMax", /* is_overflow */ false);
|
|
test_scroll(no_overflow, "scrollTop", "scrollTopMax", /* is_overflow */ false);
|
|
|
|
var no_overflow2 = document.getElementById("no-overflow2");
|
|
test_scroll(no_overflow2, "scrollLeft", "scrollLeftMax", /* is_overflow */ false);
|
|
test_scroll(no_overflow2, "scrollTop", "scrollTopMax", /* is_overflow */ false);
|
|
|
|
var overflow = document.getElementById("overflow");
|
|
test_scroll(overflow, "scrollLeft", "scrollLeftMax", /* is_overflow */ true);
|
|
test_scroll(overflow, "scrollTop", "scrollTopMax", /* is_overflow */ false);
|
|
|
|
var overflow2 = document.getElementById("overflow2");
|
|
test_scroll(overflow2, "scrollLeft", "scrollLeftMax", /* is_overflow */ true);
|
|
test_scroll(overflow2, "scrollTop", "scrollTopMax", /* is_overflow */ false);
|
|
|
|
</script>
|
|
</pre>
|
|
</body>
|
|
</html>
|