blob: ce654e0ad5e0147f9bc77d64fdab554eba0ef5ad [file] [log] [blame]
<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>