summaryrefslogtreecommitdiffstats
path: root/layout/forms/test/test_bug717878_input_scroll.html
blob: 6bd27ddaccda8e3462b45722e39cfa6153f53905 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!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 prop Specify the property to test,
 *             i.e. "scrollLeft" or "scrollTop"
 * @param propMax 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];
  is(element[scroll], element[scrollMax], element.id + " did not scroll to " + scrollMax);

  element[scroll] = element[scrollMax] + 10;
  is(element[scroll], element[scrollMax], 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 */ true);

var overflow2 = document.getElementById("overflow2");
test_scroll(overflow2, "scrollLeft", "scrollLeftMax", /* is_overflow */ true);
test_scroll(overflow2, "scrollTop", "scrollTopMax", /* is_overflow */ true);

</script>
</pre>
</body>
</html>