LayoutTests/fast/forms/script-tests/textarea-metrics.js

   1 description("This test checks that textareas have the right metrics. These numbers match IE7 except for scrollHeight. For two reasons:<br>" +
   2 "1. scrollHeight is different for elements without enough content to cause scroll because IE7 then reports the height of the text inside the " +
   3 "element as the scrollHeight. IE8 reports has scrollHeight == offsetHeight. Gecko/WebKit have scrollHeight == clientHeight.<br>" +
   4 "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 " +
   5 "currently mimic this quirk. It's not clear whether we should given that we agree with IE7's clientWidth numbers in all these cases.");
   6
   7 function assertTextareaMetrics(doc, properties, expectedMetrics) {
   8     var textarea = doc.createElement('textarea');
   9     // Give some consistent CSS for consistent rendering across platforms
  10     // and to help in reasoning when trying to match IE metrics.
  11     var style = 'overflow-y:auto; font-family:Ahem; line-height:20px; height:50px; width:50px;';
  12     var title = '';
  13     for (property in properties) {
  14         var value = properties[property];
  15         title += ' ' + property + ': "' + value + '",';
  16         if (property == 'style')
  17             style += value;
  18         else
  19             textarea[property] = value;
  20     }
  21     textarea.style.cssText = style;
  22     doc.body.appendChild(textarea);
  23
  24     // Create a more human-readable ID.
  25     var id = title.replace(/[\'\",;\:]/g, ' ').replace(/ +/g, '-');
  26     id = id == '' ? 'no-styles' : id;
  27     textarea.id = id;
  28
  29     window[doc.compatMode + 'doc'] = doc;
  30
  31     function assertMetricsForTextarea() {
  32         if (!title)
  33             title = ' none';
  34
  35         debug('Properties =' + title);
  36         shouldBe(doc.compatMode + "doc.getElementById('" + id + "').clientWidth", String(expectedMetrics.clientWidth));
  37         shouldBe(doc.compatMode + "doc.getElementById('" + id + "').clientHeight", String(expectedMetrics.clientHeight));
  38         shouldBe(doc.compatMode + "doc.getElementById('" + id + "').offsetWidth", String(expectedMetrics.offsetWidth));
  39         shouldBe(doc.compatMode + "doc.getElementById('" + id + "').offsetHeight", String(expectedMetrics.offsetHeight));
  40         shouldBe(doc.compatMode + "doc.getElementById('" + id + "').scrollWidth", String(expectedMetrics.scrollWidth));
  41         shouldBe(doc.compatMode + "doc.getElementById('" + id + "').scrollHeight", String(expectedMetrics.scrollHeight));
  42         debug('');
  43     }
  44     if (document.all)
  45       // Give a timeout so IE has time to figure out it's metrics.
  46       setTimeout(assertMetricsForTextarea, 100);
  47     else
  48       assertMetricsForTextarea();
  49 }
  50
  51 var smallHTML = 'A';
  52 var htmlThatCausesScroll = 'AAAAAAAAA';
  53
  54 function testTextareasForDocument(doc, compatMode,
  55         textareaSizes, textareaWithScrollSizes,
  56         textareaWith8pxPaddingSizes, textareaWith8pxPaddingAndScrollbarSizes) {
  57     if (doc.compatMode != compatMode)
  58         testFailed('This doc should be in ' + compatMode + ' mode.');
  59
  60     try {
  61         var scrollbarStyle = doc.createElement('style');
  62         scrollbarStyle.innerText = 'textarea::-webkit-scrollbar{ width:17px }';
  63         doc.getElementsByTagName('head')[0].appendChild(scrollbarStyle);
  64     } catch (e) {
  65         // IE throws an exception here, but doesn't need the above clause anyways.
  66     }
  67
  68     debug('Testing ' + compatMode + ' document.')
  69     assertTextareaMetrics(doc, {}, textareaSizes);
  70     assertTextareaMetrics(doc, {disabled: true}, textareaSizes);
  71     assertTextareaMetrics(doc, {innerHTML: smallHTML}, textareaSizes);
  72     assertTextareaMetrics(doc, {innerHTML: htmlThatCausesScroll}, textareaWithScrollSizes);
  73     assertTextareaMetrics(doc, {innerHTML: smallHTML, disabled: true}, textareaSizes);
  74     assertTextareaMetrics(doc, {innerHTML: htmlThatCausesScroll, disabled: true}, textareaWithScrollSizes);
  75     assertTextareaMetrics(doc, {innerHTML: smallHTML, style: 'padding:8px'}, textareaWith8pxPaddingSizes);
  76     assertTextareaMetrics(doc, {innerHTML: htmlThatCausesScroll, style: 'padding:8px'}, textareaWith8pxPaddingAndScrollbarSizes);
  77     assertTextareaMetrics(doc, {innerHTML: smallHTML, rows: 10}, textareaSizes);
  78     assertTextareaMetrics(doc, {innerHTML: htmlThatCausesScroll, rows: 10}, textareaWithScrollSizes);
  79 }
  80
  81 // For textareas with scrollbars have the expected clientWidth be the
  82 // expected offsetWidth - scrollbarPlusBorderWidth.
  83 // default border on textareas is 1px solid. So, the border width is 2.
  84 // And the scrollbarWidth we set to be 17 to match windows so that
  85 // these numbers will be platform independent and match IE.
  86 var scrollbarPlusBorderWidth = 19;
  87
  88 var textareaSizesQuirks = {clientWidth: 48,
  89                            clientHeight: 48,
  90                            offsetWidth: 50,
  91                            offsetHeight: 50,
  92                            scrollWidth: 48,
  93                            scrollHeight: 48};
  94
  95 var textareaWithScrollSizesQuirks = {clientWidth: 50 - scrollbarPlusBorderWidth,
  96                                      clientHeight: 48,
  97                                      offsetWidth: 50,
  98                                      offsetHeight: 50,
  99                                      scrollWidth: 50 - scrollbarPlusBorderWidth,
 100                                      scrollHeight: 104};
 101
 102 var textareaWith8pxPaddingSizesQuirks = {clientWidth: 48,
 103                                          clientHeight: 48,
 104                                          offsetWidth: 50,
 105                                          offsetHeight: 50,
 106                                          scrollWidth: 48,
 107                                          scrollHeight: 48};
 108
 109 var textareaWith8pxPaddingAndScrollbarSizesQuirks = {clientWidth: 50 - scrollbarPlusBorderWidth,
 110                                                      clientHeight: 48,
 111                                                      offsetWidth: 50,
 112                                                      offsetHeight: 50,
 113                                                      scrollWidth: 50 - scrollbarPlusBorderWidth,
 114                                                      scrollHeight: 196};
 115
 116 testTextareasForDocument(document, 'BackCompat',
 117                          textareaSizesQuirks, textareaWithScrollSizesQuirks,
 118                          textareaWith8pxPaddingSizesQuirks, textareaWith8pxPaddingAndScrollbarSizesQuirks);
 119
 120 var standardsIframe = document.createElement('iframe');
 121 standardsIframe.style.width = '100%';
 122 document.body.appendChild(standardsIframe);
 123 standardsIframe.contentWindow.document.write('<!DocType html><html><head></head><body></body></html>');
 124 standardsIframe.contentWindow.document.close();
 125
 126 var textareaSizesStandards = {clientWidth: 54,
 127                               clientHeight: 54,
 128                               offsetWidth: 56,
 129                               offsetHeight: 56,
 130                               scrollWidth: 54,
 131                               scrollHeight: 54};
 132
 133 var textareaWithScrollSizesStandards = {clientWidth: 56 - scrollbarPlusBorderWidth,
 134                                         clientHeight: 54,
 135                                         offsetWidth: 56,
 136                                         offsetHeight: 56,
 137                                         scrollWidth: 56 - scrollbarPlusBorderWidth,
 138                                         scrollHeight: 64};
 139
 140 var textareaWith8pxPaddingSizesStandards = {clientWidth: 66,
 141                                             clientHeight: 66,
 142                                             offsetWidth: 68,
 143                                             offsetHeight: 68,
 144                                             scrollWidth: 66,
 145                                             scrollHeight: 66};
 146
 147 var textareaWith8pxPaddingAndScrollbarSizesStandards = {clientWidth: 68 - scrollbarPlusBorderWidth,
 148                                                         clientHeight: 66,
 149                                                         offsetWidth: 68,
 150                                                         offsetHeight: 68,
 151                                                         scrollWidth: 68 - scrollbarPlusBorderWidth,
 152                                                         scrollHeight: 76};
 153
 154 testTextareasForDocument(standardsIframe.contentWindow.document, 'CSS1Compat',
 155                          textareaSizesStandards, textareaWithScrollSizesStandards,
 156                          textareaWith8pxPaddingSizesStandards, textareaWith8pxPaddingAndScrollbarSizesStandards);