third_party/WebKit/LayoutTests/fast/forms/textarea-metrics.html

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