blob: 7bfc192eb3335522fc18ff92beee64121b8e9d63 [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 {
-webkit-margin-before: 1px;
-webkit-margin-end: 2px;
-webkit-margin-after: 3px;
-webkit-margin-start: 4px;
-webkit-padding-before:4px;
-webkit-padding-end:3px;
-webkit-padding-after:2px;
-webkit-padding-start:1px;
-webkit-logical-width:100px;
-webkit-logical-height:50px;
-webkit-border-before: 1px solid black;
-webkit-border-end: 2px dotted green;
-webkit-border-after: 3px dashed yellow;
-webkit-border-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>