<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>