| <html> |
| <head> |
| <style> |
| .ltr-text { |
| direction: ltr |
| } |
| |
| .rtl-text { |
| direction: rtl |
| } |
| |
| .tb-block { |
| -webkit-writing-mode: horizontal-tb; |
| } |
| |
| .bt-block { |
| -webkit-writing-mode: horizontal-bt |
| } |
| |
| .lr-block { |
| -webkit-writing-mode: vertical-lr |
| } |
| |
| .rl-block { |
| -webkit-writing-mode: vertical-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 = "This test has incorrect results but reflects what's happening as we bring block-flow online.<br>"; |
| 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 tb-block test"></div> |
| <div class="ltr-text bt-block test"></div> |
| <div class="ltr-text lr-block test"></div> |
| <div class="ltr-text rl-block test"></div> |
| <div class="rtl-text tb-block test"></div> |
| <div class="rtl-text bt-block test"></div> |
| <div class="rtl-text lr-block test"></div> |
| <div class="rtl-text rl-block test"></div> |
| <p style="clear:both" id="result"></p> |
| </body> |
| </html> |
| |
