Re: Computed Style and Border Width - Question [CSSOM]

On Mon, Jun 30, 2008 at 8:39 PM, Robert O'Callahan <robert@ocallahan.org> wrote:
> On Tue, Jul 1, 2008 at 6:04 AM, Garrett Smith <dhtmlkitchen@gmail.com>
> wrote:
>>

>
>
> In Gecko, getComputedStyle returns the used border values, and we round
> border widths to *device* pixels before layout, so it can return non-integer
> CSS px values when zooming is in effect.
>

Webkit seems to do something similar. It seems to me that the behavior
is not consistent with the way measurements are applied to other
properties. For example, with the width property, when using
percentages:-

http://dhtmlkitchen.com/test/bug/float-bug.html

And using the following javascript:
javascript:var ds =
document.getElementById('blinds').getElementsByTagName('div');alert(getComputedStyle(ds[0],'').width)

FF3: 152.6

The math works out right: 152.6 * 5 = 763

However, with the border width example, it seems that device pixel is used.

But with margin, a CSS Pixel is used. It's inconsistent.

Here's an example demonstrating the problem, where margin uses a css
pixel and border-width does not. The decimal math is also somewhat
interesting (not IEEE 754).

======================================================
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>DOM positioning Test</title>

    <style type='text/css'>
        #container {
            position: absolute;
            font-size: 0;
        }

        #c1 {
            position: absolute;
            height: 6px;
            background: #00c;
        }

        #target {
            position: absolute;
            display: block;
            height: 1px;
            background:#FF0;
        }
    </style>
</head>
<body style="position: relative;margin:0;padding:0;">

<!-- In IE, a relatively positioned descendant gets position offset by
font-size -->
<div id="container">
    <div id="c1" style="">
        <a id="target">a</a>
    </div>
</div>

<script type='text/javascript'>(function(){
var target = document.getElementById("target"),
    container = document.getElementById("container"),
    c1 = document.getElementById("c1");

  // Any larger and Opera will fail.
  var fontSize = 77,
      emSize = 1.18;

// Every element gets the same font size.
  document.documentElement.style.fontSize =
    document.body.style.fontSize =
    c1.style.fontSize =
    container.style.fontSize =
    target.style.fontSize = fontSize + "px";

// Assign borders.
  container.style.borderLeft =
  c1.style.borderLeft = emSize + "em solid red";

try {

  var expectedBorderWidth = (fontSize * emSize),
      borderLeftWidth =
    parseFloat(getComputedStyle(c1,'').borderLeftWidth );

  alert(["borderLeftWidth = " + borderLeftWidth,
  "expectedBorderWidth = " + expectedBorderWidth])

  target.style.marginLeft = emSize + "em";
  target.style.left = 0;

  var expectedMargin = fontSize * emSize,
      actualMargin = getComputedStyle(target,'').marginLeft;
  alert(["expectedMargin: " + expectedMargin,
        "actualMargin: " + actualMargin]);

  var expected = Math.round(expectedBorderWidth * 3),
      actual = target.getBoundingClientRect();

  alert([expected, actual.left,
    expected == actual.left ? "PASS" :
    "getting computed coords from EM values failed."]);
  } catch(ex) { alert(ex); }
})();
</script>
</body>
</html>

======================================================

It's inconsistent, but why? Doens't zoom work for margin, too?

Is it possible to acheive zoom effect in another way, or would the
code for zoom have to be massively changed?

Garrett

> Rob

Received on Tuesday, 1 July 2008 06:20:40 UTC