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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../../resources/js-test.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description("This test checks that textareas have the right metrics. These numbers match IE7 except for scrollHeight. For two reasons:<br>" +
"1. scrollHeight is different for elements without enough content to cause scroll because IE7 then reports the height of the text inside the " +
"element as the scrollHeight. IE8 reports has scrollHeight == offsetHeight. Gecko/WebKit have scrollHeight == clientHeight.<br>" +
"2. For the elements with scroll in standards-mode, IE wraps the text differently. It seems to leave 2px less space for the text. We don't " +
"currently mimic this quirk. It's not clear whether we should given that we agree with IE7's clientWidth numbers in all these cases.");
function assertTextareaMetrics(doc, properties, expectedMetrics) {
var textarea = doc.createElement('textarea');
// Give some consistent CSS for consistent rendering across platforms
// and to help in reasoning when trying to match IE metrics.
var style = 'overflow-y:auto; font-family:Ahem; line-height:20px; height:50px; width:50px;';
var title = '';
for (property in properties) {
var value = properties[property];
title += ' ' + property + ': "' + value + '",';
if (property == 'style')
style += value;
else
textarea[property] = value;
}
textarea.style.cssText = style;
doc.body.appendChild(textarea);
// Create a more human-readable ID.
var id = title.replace(/[\'\",;\:]/g, ' ').replace(/ +/g, '-');
id = id == '' ? 'no-styles' : id;
textarea.id = id;
window[doc.compatMode + 'doc'] = doc;
function assertMetricsForTextarea() {
if (!title)
title = ' none';
debug('Properties =' + title);
shouldBe(doc.compatMode + "doc.getElementById('" + id + "').clientWidth", String(expectedMetrics.clientWidth));
shouldBe(doc.compatMode + "doc.getElementById('" + id + "').clientHeight", String(expectedMetrics.clientHeight));
shouldBe(doc.compatMode + "doc.getElementById('" + id + "').offsetWidth", String(expectedMetrics.offsetWidth));
shouldBe(doc.compatMode + "doc.getElementById('" + id + "').offsetHeight", String(expectedMetrics.offsetHeight));
shouldBe(doc.compatMode + "doc.getElementById('" + id + "').scrollWidth", String(expectedMetrics.scrollWidth));
shouldBe(doc.compatMode + "doc.getElementById('" + id + "').scrollHeight", String(expectedMetrics.scrollHeight));
debug('');
}
if (document.all)
// Give a timeout so IE has time to figure out it's metrics.
setTimeout(assertMetricsForTextarea, 100);
else
assertMetricsForTextarea();
}
var smallHTML = 'A';
var htmlThatCausesScroll = 'AAAAAAAAA';
function testTextareasForDocument(doc, compatMode,
textareaSizes, textareaWithScrollSizes,
textareaWith8pxPaddingSizes, textareaWith8pxPaddingAndScrollbarSizes) {
if (doc.compatMode != compatMode)
testFailed('This doc should be in ' + compatMode + ' mode.');
try {
var scrollbarStyle = doc.createElement('style');
scrollbarStyle.innerText = 'textarea::-webkit-scrollbar{ width:17px }';
doc.getElementsByTagName('head')[0].appendChild(scrollbarStyle);
} catch (e) {
// IE throws an exception here, but doesn't need the above clause anyways.
}
debug('Testing ' + compatMode + ' document.')
assertTextareaMetrics(doc, {}, textareaSizes);
assertTextareaMetrics(doc, {disabled: true}, textareaSizes);
assertTextareaMetrics(doc, {innerHTML: smallHTML}, textareaSizes);
assertTextareaMetrics(doc, {innerHTML: htmlThatCausesScroll}, textareaWithScrollSizes);
assertTextareaMetrics(doc, {innerHTML: smallHTML, disabled: true}, textareaSizes);
assertTextareaMetrics(doc, {innerHTML: htmlThatCausesScroll, disabled: true}, textareaWithScrollSizes);
assertTextareaMetrics(doc, {innerHTML: smallHTML, style: 'padding:8px'}, textareaWith8pxPaddingSizes);
assertTextareaMetrics(doc, {innerHTML: htmlThatCausesScroll, style: 'padding:8px'}, textareaWith8pxPaddingAndScrollbarSizes);
assertTextareaMetrics(doc, {innerHTML: smallHTML, rows: 10}, textareaSizes);
assertTextareaMetrics(doc, {innerHTML: htmlThatCausesScroll, rows: 10}, textareaWithScrollSizes);
}
// For textareas with scrollbars have the expected clientWidth be the
// expected offsetWidth - scrollbarPlusBorderWidth.
// default border on textareas is 1px solid. So, the border width is 2.
// And the scrollbarWidth we set to be 17 to match windows so that
// these numbers will be platform independent and match IE.
var scrollbarPlusBorderWidth = 19;
var textareaSizesQuirks = {clientWidth: 48,
clientHeight: 48,
offsetWidth: 50,
offsetHeight: 50,
scrollWidth: 48,
scrollHeight: 48};
var textareaWithScrollSizesQuirks = {clientWidth: 50 - scrollbarPlusBorderWidth,
clientHeight: 48,
offsetWidth: 50,
offsetHeight: 50,
scrollWidth: 50 - scrollbarPlusBorderWidth,
scrollHeight: 104};
var textareaWith8pxPaddingSizesQuirks = {clientWidth: 48,
clientHeight: 48,
offsetWidth: 50,
offsetHeight: 50,
scrollWidth: 48,
scrollHeight: 48};
var textareaWith8pxPaddingAndScrollbarSizesQuirks = {clientWidth: 50 - scrollbarPlusBorderWidth,
clientHeight: 48,
offsetWidth: 50,
offsetHeight: 50,
scrollWidth: 50 - scrollbarPlusBorderWidth,
scrollHeight: 196};
testTextareasForDocument(document, 'BackCompat',
textareaSizesQuirks, textareaWithScrollSizesQuirks,
textareaWith8pxPaddingSizesQuirks, textareaWith8pxPaddingAndScrollbarSizesQuirks);
var standardsIframe = document.createElement('iframe');
standardsIframe.style.width = '100%';
document.body.appendChild(standardsIframe);
standardsIframe.contentWindow.document.write('<!DocType html><html><head></head><body></body></html>');
standardsIframe.contentWindow.document.close();
var textareaSizesStandards = {clientWidth: 54,
clientHeight: 54,
offsetWidth: 56,
offsetHeight: 56,
scrollWidth: 54,
scrollHeight: 54};
var textareaWithScrollSizesStandards = {clientWidth: 56 - scrollbarPlusBorderWidth,
clientHeight: 54,
offsetWidth: 56,
offsetHeight: 56,
scrollWidth: 56 - scrollbarPlusBorderWidth,
scrollHeight: 64};
var textareaWith8pxPaddingSizesStandards = {clientWidth: 66,
clientHeight: 66,
offsetWidth: 68,
offsetHeight: 68,
scrollWidth: 66,
scrollHeight: 66};
var textareaWith8pxPaddingAndScrollbarSizesStandards = {clientWidth: 68 - scrollbarPlusBorderWidth,
clientHeight: 66,
offsetWidth: 68,
offsetHeight: 68,
scrollWidth: 68 - scrollbarPlusBorderWidth,
scrollHeight: 76};
testTextareasForDocument(standardsIframe.contentWindow.document, 'CSS1Compat',
textareaSizesStandards, textareaWithScrollSizesStandards,
textareaWith8pxPaddingSizesStandards, textareaWith8pxPaddingAndScrollbarSizesStandards);
</script>
</body>
</html>
|
