third_party/WebKit/LayoutTests/fast/css/logical-property-resolution.html

   1 <html>
   2 <head>
   3 <style>
   4 .ltr-text {
   5   direction: ltr
   6 }
   7
   8 .rtl-text {
   9   direction: rtl
  10 }
  11
  12 .tb-block {
  13   -webkit-writing-mode: horizontal-tb;
  14 }
  15
  16 .bt-block {
  17   -webkit-writing-mode: horizontal-bt
  18 }
  19
  20 .lr-block {
  21   -webkit-writing-mode: vertical-lr
  22 }
  23
  24 .rl-block {
  25   -webkit-writing-mode: vertical-rl
  26 }
  27
  28 .test {
  29   -webkit-margin-before: 1px;
  30   -webkit-margin-end: 2px;
  31   -webkit-margin-after: 3px;
  32   -webkit-margin-start: 4px;
  33   -webkit-padding-before:4px;
  34   -webkit-padding-end:3px;
  35   -webkit-padding-after:2px;
  36   -webkit-padding-start:1px;
  37   -webkit-logical-width:100px;
  38   -webkit-logical-height:50px;
  39   -webkit-border-before: 1px solid black;
  40   -webkit-border-end: 2px dotted green;
  41   -webkit-border-after: 3px dashed yellow;
  42   -webkit-border-start: 4px double purple;
  43   float:left;
  44 }
  45 </style>
  46 <script>
  47 if (window.testRunner)
  48   window.testRunner.dumpAsText()
  49
  50 function dumpBlockProperties()
  51 {
  52    result = document.getElementById('result');
  53    blocks = document.getElementsByTagName('div');
  54    resultStr = "This test has incorrect results but reflects what's happening as we bring block-flow online.<br>";
  55    for (i = 0; i < blocks.length; ++i) {
  56         resultStr += "<b>Block #" + (i+1) + ":</b><br>";
  57         resultStr += "Margins: ";
  58         c = getComputedStyle(blocks[i], null);
  59         resultStr += c.getPropertyValue("margin-top") + " "
  60                      + c.getPropertyValue("margin-right") + " "
  61                      + c.getPropertyValue("margin-bottom") + " "
  62                      + c.getPropertyValue("margin-left") + "<br>";
  63
  64         resultStr += "Padding: ";
  65         c = getComputedStyle(blocks[i], null);
  66         resultStr += c.getPropertyValue("padding-top") + " "
  67                      + c.getPropertyValue("padding-right") + " "
  68                      + c.getPropertyValue("padding-bottom") + " "
  69                      + c.getPropertyValue("padding-left") + "<br>";
  70
  71         resultStr += "Borders: "
  72         resultStr += c.getPropertyValue("border-top-width") + " " + c.getPropertyValue("border-top-style") + " " + c.getPropertyValue("border-top-color") + ", "
  73                      + c.getPropertyValue("border-right-width") + " " + c.getPropertyValue("border-right-style") + " " + c.getPropertyValue("border-right-color") + ", "
  74                      + c.getPropertyValue("border-bottom-width") + " " + c.getPropertyValue("border-bottom-style") + " " + c.getPropertyValue("border-bottom-color") + ", "
  75                      + c.getPropertyValue("border-left-width") + " " + c.getPropertyValue("border-left-style") + " " + c.getPropertyValue("border-left-color") + "<br>"
  76
  77         resultStr += "Width: "
  78         resultStr += c.getPropertyValue("width") + "<br>";
  79
  80         resultStr += "Height: "
  81         resultStr += c.getPropertyValue("height") + "<br>";
  82    }
  83    result.innerHTML = resultStr;
  84 }
  85 </script>
  86 </head>
  87 <body onload="dumpBlockProperties()">
  88 <div class="ltr-text tb-block test"></div>
  89 <div class="ltr-text bt-block test"></div>
  90 <div class="ltr-text lr-block test"></div>
  91 <div class="ltr-text rl-block test"></div>
  92 <div class="rtl-text tb-block test"></div>
  93 <div class="rtl-text bt-block test"></div>
  94 <div class="rtl-text lr-block test"></div>
  95 <div class="rtl-text rl-block test"></div>
  96 <p style="clear:both" id="result"></p>
  97 </body>
  98 </html>
  99