W3C home > Mailing lists > Public > public-css-archive@w3.org > March 2017

Re: [csswg-drafts] [cssom-view] Expose inner border dimensions

From: Richard Gibson via GitHub <sysbot+gh@w3.org>
Date: Fri, 31 Mar 2017 15:42:50 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-290748596-1490974968-sysbot+gh@w3.org>
`getBoxQuads` definitely helps, but is still _very_ clumsy. The problem is that it can describe [four boxes](https://www.w3.org/TR/css3-box/#various), but scrollbars actually introduce a _fifth_ by [separating](https://www.w3.org/TR/css3-box/#overflow0) the padding edge from the inner border edge. So I guess utilization would look something like
```js
function getScrollGutterWidth(elem) {
	let paddingBox = elem.getBoxQuads({box: "padding"});
	let paddingBoxWidth = paddingBox.p2.x - paddingBox.p1.x;

	let borderBox = elem.getBoxQuads({box: "border"});
	let borderBoxWidth = borderBox.p2.x - borderBox.p1.x;

	// Both borders and scrollbars can contribute to the difference between
	// border- and padding-box width.
	// Determine scrollbar width by subtract border widths from that difference.
	let style = elem.ownerDocument.defaultView.getComputedStyle(elem);
	return borderBoxWidth - paddingBoxWidth -
		parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth);
}
```
Honestly, that's not really an improvement.

-- 
GitHub Notification of comment by gibson042
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1129#issuecomment-290748596 using your GitHub account
Received on Friday, 31 March 2017 15:42:56 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:26:38 UTC