100 lines
3.2 KiB
HTML
100 lines
3.2 KiB
HTML
<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>
|
|
|