| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .outer { |
| width: 500px; |
| height: 300px; |
| border: 1px solid black; |
| } |
| |
| .testbox { |
| color: white; |
| font: 24px 'Lucida Grande'; |
| background: green; |
| border: 1em solid black; |
| } |
| |
| #fixed { |
| line-height: 30px; |
| width: 150px; |
| height: 100px; |
| margin-top: 15px; |
| margin-right: 30px; |
| margin-bottom: 20px; |
| margin-left: 10px; |
| padding: 20px; |
| } |
| |
| #percents { |
| line-height: 150%; |
| width: 50%; |
| height: 25%; |
| margin-top: 10%; |
| margin-right: 5%; |
| margin-bottom: 10%; |
| margin-left: 20%; |
| padding: 5%; |
| } |
| |
| #ems { |
| line-height: 24px; |
| width: 10em; |
| height: 5em; |
| margin-top: 1em; |
| margin-right: .5em; |
| margin-bottom: 1.5em; |
| margin-left: 2em; |
| padding: .75em; |
| } |
| |
| #auto { |
| line-height: 30px; |
| width: 200px; |
| height: auto; |
| margin: 0px auto; |
| padding: auto; |
| } |
| |
| #mixed { |
| line-height: 200%; |
| width: 30%; |
| height: 20%; |
| margin-top: 3em; |
| /* margin-right/margin-bottom omitted */ |
| margin-left: auto; |
| padding-top: 40px; |
| padding-right: 10%; |
| padding-bottom: 1em; |
| padding-left: auto; |
| } |
| </style> |
| |
| <script> |
| var resolvedValueStyles = [ |
| 'line-height', |
| 'width', |
| 'height', |
| 'margin-top', |
| 'margin-right', |
| 'margin-bottom', |
| 'margin-left', |
| 'padding-top', |
| 'padding-right', |
| 'padding-bottom', |
| 'padding-left' |
| ]; |
| |
| var displayValues = [ |
| 'block', |
| 'inline', |
| 'inline-block', |
| 'none' |
| ]; |
| |
| function log(msg) { |
| document.getElementById('console').appendChild(document.createTextNode(msg + '\n')); |
| } |
| |
| function test(id) { |
| var div = document.getElementById(id), |
| prop, displayValue, style, computedStyle; |
| |
| for (var i = 0; i < displayValues.length; i++) { |
| div.style.display = displayValue = displayValues[i]; |
| computedStyle = window.getComputedStyle(div, null); |
| log('Resolved values for element "' + id + '" with display "' + displayValue + '":'); |
| |
| for (var j = 0; j < resolvedValueStyles.length; j++) { |
| style = resolvedValueStyles[j]; |
| log(style + ': ' + computedStyle.getPropertyValue(style)); |
| } |
| log(''); |
| } |
| div.style.display = ''; |
| log(''); |
| } |
| |
| function runTests() { |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| test('fixed'); |
| test('percents'); |
| test('ems'); |
| test('auto'); |
| test('mixed'); |
| } |
| </script> |
| </head> |
| |
| <body onload="runTests();"> |
| <p> |
| Test calling getPropertyValue on computed styles that return "resolved" values.<br /> |
| See <a href="http://dev.w3.org/csswg/cssom/#resolved-values">http://dev.w3.org/csswg/cssom/#resolved-values</a> for more information. |
| </p> |
| <pre id="console"></pre> |
| |
| <div class="outer"> |
| <div class="testbox" id="fixed">Fixed</div> |
| </div> |
| <div class="outer"> |
| <div class="testbox" id="percents">Percents</div> |
| </div> |
| <div class="outer"> |
| <div class="testbox" id="ems">EMs</div> |
| </div> |
| <div class="outer"> |
| <div class="testbox" id="auto">Auto</div> |
| </div> |
| <div class="outer"> |
| <div class="testbox" id="mixed">Mixed</div> |
| </div> |
| </body> |
| </html> |
