| <html> |
| <head> |
| <style> |
| .ltr-text { |
| direction: ltr |
| } |
| |
| .rtl-text { |
| direction: rtl |
| } |
| |
| .hTB-block { |
| -webkit-writing-mode: horizontal-tb; |
| } |
| |
| .hBT-block { |
| -webkit-writing-mode: horizontal-bt |
| } |
| |
| .vLR-block { |
| -webkit-writing-mode: vertical-lr |
| } |
| |
| .vRL-block { |
| -webkit-writing-mode: vertical-rl |
| } |
| |
| .sLR-block { |
| writing-mode: sideways-lr |
| } |
| |
| .sRL-block { |
| writing-mode: sideways-rl |
| } |
| |
| .test { |
| margin-block-start: 1px; |
| margin-inline-end: 2px; |
| margin-block-end: 3px; |
| margin-inline-start: 4px; |
| padding-block-start:4px; |
| padding-inline-end:3px; |
| padding-block-end:2px; |
| padding-inline-start:1px; |
| inline-size:100px; |
| block-size:50px; |
| border-block-start: 1px solid black; |
| border-inline-end: 2px dotted green; |
| border-block-end: 3px dashed yellow; |
| border-inline-start: 4px double purple; |
| float:left; |
| } |
| </style> |
| <script> |
| if (window.testRunner) |
| window.testRunner.dumpAsText() |
| |
| function dumpBlockProperties() |
| { |
| result = document.getElementById('result'); |
| blocks = document.getElementsByTagName('div'); |
| resultStr = ""; |
| for (i = 0; i < blocks.length; ++i) { |
| resultStr += "<b>Block #" + (i+1) + ":</b><br>"; |
| resultStr += "Margins: "; |
| c = getComputedStyle(blocks[i], null); |
| resultStr += c.getPropertyValue("margin-top") + " " |
| + c.getPropertyValue("margin-right") + " " |
| + c.getPropertyValue("margin-bottom") + " " |
| + c.getPropertyValue("margin-left") + "<br>"; |
| |
| resultStr += "Padding: "; |
| c = getComputedStyle(blocks[i], null); |
| resultStr += c.getPropertyValue("padding-top") + " " |
| + c.getPropertyValue("padding-right") + " " |
| + c.getPropertyValue("padding-bottom") + " " |
| + c.getPropertyValue("padding-left") + "<br>"; |
| |
| resultStr += "Borders: " |
| resultStr += c.getPropertyValue("border-top-width") + " " + c.getPropertyValue("border-top-style") + " " + c.getPropertyValue("border-top-color") + ", " |
| + c.getPropertyValue("border-right-width") + " " + c.getPropertyValue("border-right-style") + " " + c.getPropertyValue("border-right-color") + ", " |
| + c.getPropertyValue("border-bottom-width") + " " + c.getPropertyValue("border-bottom-style") + " " + c.getPropertyValue("border-bottom-color") + ", " |
| + c.getPropertyValue("border-left-width") + " " + c.getPropertyValue("border-left-style") + " " + c.getPropertyValue("border-left-color") + "<br>" |
| |
| resultStr += "Width: " |
| resultStr += c.getPropertyValue("width") + "<br>"; |
| |
| resultStr += "Height: " |
| resultStr += c.getPropertyValue("height") + "<br>"; |
| } |
| result.innerHTML = resultStr; |
| } |
| </script> |
| </head> |
| <body onload="dumpBlockProperties()"> |
| <div class="ltr-text hTB-block test">ltr-hTB.</div> |
| <div class="ltr-text hBT-block test">ltr-hBT.</div> |
| <div class="ltr-text vLR-block test">ltr-vLR.</div> |
| <div class="ltr-text vRL-block test">ltr-vRL.</div> |
| <div class="ltr-text sLR-block test">ltr-sLR.</div> |
| <div class="ltr-text sRL-block test">ltr-sRL.</div> |
| <div class="rtl-text hTB-block test">rtl-hTB.</div> |
| <div class="rtl-text hBT-block test">rtl-hBT.</div> |
| <div class="rtl-text vLR-block test">rtl-vLR.</div> |
| <div class="rtl-text vRL-block test">rtl-vRL.</div> |
| <div class="ltr-text sLR-block test">ltr-sLR.</div> |
| <div class="ltr-text sRL-block test">ltr-sRL.</div> |
| <p style="clear:both" id="result"></p> |
| </body> |
| </html> |
| |
