third_party/WebKit/LayoutTests/fast/css/getComputedStyle/getComputedStyle-resolved-values.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style>
   5         .outer {
   6             width: 500px;
   7             height: 300px;
   8             border: 1px solid black;
   9         }
  10
  11         .testbox {
  12             color: white;
  13             font: 24px 'Lucida Grande';
  14             background: green;
  15             border: 1em solid black;
  16         }
  17
  18         #fixed {
  19             line-height: 30px;
  20             width: 150px;
  21             height: 100px;
  22             margin-top: 15px;
  23             margin-right: 30px;
  24             margin-bottom: 20px;
  25             margin-left: 10px;
  26             padding: 20px;
  27         }
  28
  29         #percents {
  30             line-height: 150%;
  31             width: 50%;
  32             height: 25%;
  33             margin-top: 10%;
  34             margin-right: 5%;
  35             margin-bottom: 10%;
  36             margin-left: 20%;
  37             padding: 5%;
  38         }
  39
  40         #ems {
  41             line-height: 24px;
  42             width: 10em;
  43             height: 5em;
  44             margin-top: 1em;
  45             margin-right: .5em;
  46             margin-bottom: 1.5em;
  47             margin-left: 2em;
  48             padding: .75em;
  49         }
  50
  51         #auto {
  52             line-height: 30px;
  53             width: 200px;
  54             height: auto;
  55             margin: 0px auto;
  56             padding: auto;
  57         }
  58
  59         #mixed {
  60             line-height: 200%;
  61             width: 30%;
  62             height: 20%;
  63             margin-top: 3em;
  64             /* margin-right/margin-bottom omitted */
  65             margin-left: auto;
  66             padding-top: 40px;
  67             padding-right: 10%;
  68             padding-bottom: 1em;
  69             padding-left: auto;
  70         }
  71     </style>
  72
  73     <script>
  74         var resolvedValueStyles = [
  75             'line-height',
  76             'width',
  77             'height',
  78             'margin-top',
  79             'margin-right',
  80             'margin-bottom',
  81             'margin-left',
  82             'padding-top',
  83             'padding-right',
  84             'padding-bottom',
  85             'padding-left'
  86         ];
  87
  88         var displayValues = [
  89             'block',
  90             'inline',
  91             'inline-block',
  92             'none'
  93         ];
  94
  95         function log(msg) {
  96             document.getElementById('console').appendChild(document.createTextNode(msg + '\n'));
  97         }
  98
  99         function test(id) {
 100             var div = document.getElementById(id),
 101                 prop, displayValue, style, computedStyle;
 102
 103             for (var i = 0; i < displayValues.length; i++) {
 104                 div.style.display = displayValue = displayValues[i];
 105                 computedStyle = window.getComputedStyle(div, null);
 106                 log('Resolved values for element "' + id + '" with display "' + displayValue + '":');
 107
 108                 for (var j = 0; j < resolvedValueStyles.length; j++) {
 109                     style = resolvedValueStyles[j];
 110                     log(style + ': ' + computedStyle.getPropertyValue(style));
 111                 }
 112                 log('');
 113             }
 114             div.style.display = '';
 115             log('');
 116         }
 117
 118         function runTests() {
 119             if (window.testRunner)
 120                 testRunner.dumpAsText();
 121
 122             test('fixed');
 123             test('percents');
 124             test('ems');
 125             test('auto');
 126             test('mixed');
 127         }
 128     </script>
 129 </head>
 130
 131 <body onload="runTests();">
 132     <p>
 133         Test calling getPropertyValue on computed styles that return "resolved" values.<br />
 134         See <a href="http://dev.w3.org/csswg/cssom/#resolved-values">http://dev.w3.org/csswg/cssom/#resolved-values</a> for more information.
 135     </p>
 136     <pre id="console"></pre>
 137
 138     <div class="outer">
 139         <div class="testbox" id="fixed">Fixed</div>
 140     </div>
 141     <div class="outer">
 142         <div class="testbox" id="percents">Percents</div>
 143     </div>
 144     <div class="outer">
 145         <div class="testbox" id="ems">EMs</div>
 146     </div>
 147     <div class="outer">
 148         <div class="testbox" id="auto">Auto</div>
 149     </div>
 150     <div class="outer">
 151         <div class="testbox" id="mixed">Mixed</div>
 152     </div>
 153 </body>
 154 </html>