[24] The [DFN[NodeRect.js]] JavaScript library is available at
<https://suika.suikawiki.org/www/css/noderect/NodeRect.js>.

* NR

** [4] Public class method

:NR.resetIndex:

** [5] Private class attribute

:NR.index:

* Members common to NR.Rect, NR.Vector, and NR.Band

** [10] Class constant

:NR.[VAR[type]].invalid:

** [12] Instance attributes

:invalid:
:label:
:index:

** [8] Instance methods (rendering)

:getRenderedLeft ():
:getRenderedTop ():
:getRenderedWidth ():
:getRenderedHeight ():

** [9] Instance methods (stringify)

:getFullLabel ():
:toString ():

* NR.Rect

** [6] Constructor and public class methods

:new NR.Rect (top, right, bottom, left, width, height):
One of top, bottom, and height and one of left, right, and width can be omitted.
If one of arguments that cannot be omitted is not a number, then the invalid flag is set.
:NR.Rect.trbl (top, right, bottom, left):
:NR.Rect.trblCSS (element, top, right, bottom, left): Same as NR.Rect.trbl except that 
top, right, bottom, left are interpreted as CSS <length> in the context of [VAR@en[element]].
:NR.Rect.tlwh (top, left, width, height):
:NR.Rect.wh (width, height):top = 0, left = 0
:NR.Rect.whCSS (element, width, height): Same as NR.Rect.trbl except that 
[VAR@en[width]], [VAR@en[height]] are interpreted as CSS <length> in the context of [VAR@en[element]].

** [1] Instance attributes

:top:
:right:
:bottom:
:left:
:width:width == right - left; width > 0
:height:height == bottom - top; height > 0

** [29] Instance methods (properties)

:isZeroRect ():Return if width == 0 and height == 0.

** [7] Instance methods (operations)

:add (NR.Vector):top += arg.y; left += arg.x
:add (NR.Band):top -= |arg.top|; right += |arg.right|; bottom += |arg.bottom|; left -= |arg.left|
:subtract (NR.Vector):top -= arg.y; left -= arg.x
:subtract (NR.Band):top += |arg.top|; right -= |arg.right|; bottom -= |arg.bottom|; left += |arg.left|
:getTopLeft ():new NR.Vector (left, top)

* NR.Vector

** [11] Constructor

:new NR.Vector (x, y):

** [2] Instance attributes

:x:
:y:
:width:|-x|
:height:|-y|

** [13] Instance methods (operations)

:negate ():new (-x, -y)
:add (NR.Vector):x += arg.x; y += arg.y
:subtract (NR.Vector):x -= arg.x; y -= arg.y

* NR.Band

**[15] Constructor

:new NR.Band (t, r, b, l):

**[3] Instance attributes

:top:
:right:
:bottom:
:left:

** [14] Instance methods (oprerations)

:add (NR.Band):top = |top| + |arg.top|; ...
:and (NR.Band):top = arg.top != 0 ? this.top : 0, ...
:getTopLeft ():new NR.Vector (-|top|, -|left|).
A vector that represents the top left corner of the outer edge from the top left corner
of the inner edge.

* NR.Element

** [16] NR.Element.getPixelWH (element, width, height)

Converts two CSS <length>s into pixel-unit in the context of [VAR@en[element]].
Return {width: [VAR[pixel-width]], height: [VAR[pixel-height]]}.
:NR.Element.getCumulativeOffsetRect:

** [18] NR.Element.getBoxAreas (element, window)

*** margin

Margin area of the element.

Supported browsers: All.

*** border

Border area of the element.

Supported browsers: All.

*** padding

Padding area of the element.

Supported browsers: All.

** [19] NR.Element.getAttrRects (element)

*** offset

Box represented by offset* attributes of the element.

Supported browsers: All.

Origin: Browser-dependent.

*** client

Box represented by client* attributes of the element.

Supported browsers: All.

Origin: Browser-dependent.

*** scrollableArea

Box represented by [CODE(DOMa)@en[[[scrollWidth]]]] and [CODE(DOMa)@en[[[scrollHeight]]]]
attributes of the element.

Supported browsers: All.

Origin: Browser-dependent.

*** scrollState

The point represented by [CODE(DOMa)@en[[[scrollTop]]]] and [CODE(DOMa)@en[[[scrollLeft]]]]
attributes of the element.

Supported browsers: All.

Origin: Browser-dependent.

** [17] NR.Element.getCumulativeOffsetRect (element, window)

Offset box of the element.
If margin collapsing occurs for the [CODE(HTMLe)@en[[[html]]]] and/or
[CODE(HTMLe)@en[[[body]]]] elements, the result is wrong.

Origin: position-absolute-origin.

Supported browsers: WebKit and Opera.  In Gecko and WinIE the result might be incorrect.

** [20] NR.Element.getRects (element, window)

*** contentBox

The content box generated by the element.
It might be wrong when the [CODE@en[paddingBox]] is wrong.

Origin: The position-absolute origin.

Supported browsers: All.

*** paddingBox

The padding box generated by the element.
It might be wrong when the [CODE@en[borderBox]] is wrong.
In addition, if the element is the [CODE(HTMLe)@en[[[html]]]] element or the
[CODE(HTMLe)@en[[[body]]]] element, the result might be wrong.

Origin: The position-absolute origin.

Supported browsers: All.

*** borderBox

The border box generated by the element.
- If the element generates an inline box, the result might be wrong.
- In Gecko standard mode with both [CODE(HTMLe)@en[[[html]]]] and
[CODE(HTMLe)@en[[[body]]]] element has [CODE(CSS)@en[[[overflow]]]] property specified,
the result might be wrong.
- If the element is the [CODE(HTMLe)@en[[[html]]]] element or the
[CODE(HTMLe)@en[[[body]]]] element, the result might be wrong.
- In Safari and margin collapsing occurs for the [CODE(HTMLe)@en[[[html]]]] and/or
[CODE(HTMLe)@en[[[body]]]] elements.
- In Safari and its [CODE(DOMa)@en[[[offset[VAR[*]]]]]] attributes do not return reasonable
values (e.g. [CODE(CSS)@en[td:first-child]]).

Origin: position-absolute-origin.

Supported browsers: All.  

*** marginBox

The margin box generated by the element.
It might be wrong when the [CODE@en[borderBox]] is wrong.

Origin: position-absolute-origin.

Supported browsers: All.

*** boundingClient

The box returned by [CODE(DOMm)@en[[[getBoundingClientRect]]]] method of the element.

Origin: Browser-dependent.

Supported browsers: Gecko, Opera, and WinIE.

*** margin, border, padding

Same as >>18 [CODE(JS)@en[getBoxAreas]].

** [28] NR.Element.getRectsExtra (element, window)

*** boxObject

The box returned by [CODE(DOMm)@en[[[getBoxObjectFor]]]] method.

Origin: Browser-dependent.

Supported browser: Gecko.

*** boxObjectScreen

The box returned by [CODE(DOMm)@en[[[getBoxObjectFor]]]] method.

Origin: The top left corner of the screen.

Supported browser: Gecko.

*** textRangeBounding (instanceof NR.Rect)

The box returned by [CODE(DOMa)@en[[[bounding*]]]] attributes of [CODE(DOMi)@en[[[TextRange]]]]
object for the element, if any.

Origin: The top left corner of the viewport border box.

Supported browser: WinIE.

*** textRangeBoundingClient (instanceof NR.Rect)

The box returned by [CODE(DOMm)@en[[[getBoundingClientRect]]]] method of [CODE(DOMi)@en[[[TextRange]]]]
object for the element, if any.

Origin: The top left corner of the viewport border box.

Supported browser: WinIE.

*** textRangeOffset (instanceof NR.Vector)

The point returned by [CODE(DOMa)@en[[[offset*]]]] attributes of [CODE(DOMi)@en[[[TextRange]]]]
object for the element, if any.

Origin: The top left corner of the viewport border box.

Supported browser: WinIE.

* NR.View

**[30] NR.View.getBoundingClientRectOrigin (window, document)

The origin of the [CODE(DOMm)@en[[[getBoundingClientRect]]]] method, measured by inserting an
element into the document.

Origin: The position-absolute origin.

Supported browsers: WinIE, Opera, and Gecko.

**[21]  NR.View.getViewportRects (window)

*** canvasOrigin (instanceof NR.Vector)

The origin of the canvas.

Origin: The position-absolute origin.

Supported browsers: All.

*** boundingClientOrigin (instanceof NR.Vector)

The origin of the rect returned by the [CODE(DOMm)@en[[[getBoundingClientRect]]]] method.

Origin: The position-absolute origin.

Supported browsers: All.

*** icb (instanceof NR.Rect)

The [[initial containing block]].

Origin: The position-absolute-origin.

Supported browsers: All.

*** contentBox (instanceof NR.Rect)

The content area of the viewport (not including scrollbars and border area).

Origin: The position-absolute-origin.

Supported browsers: All.

*** scrollState (instanceof NR.Vector)

The top left corner of the inner edge of the viewport.

Origin: The top left corner of the canvas.

Supported browsers: All.

*** windowPageOffset (instanceof NR.Vector)

The point returned by [CODE(JS)@en[[[window.pageXOffset]]]] and
[CODE(JS)@en[[[window.pageYOffset]]]] attributes.

Origin: The top left corner of the canvas.

Supported browsers: WebKit, Gecko, and Opera.

*** deOffset, deClient, deScrollableArea, deScrollState

The document element's boxes.

*** bodyOffset, bodyClient, bodyScrollableArea, bodyScrollState

The [CODE(HTMLe)@en[[[body]]]] element's boxes.

**[27] NR.View.getViewportRectsExtra (window)

*** windowInner (instanceof NR.Rect)

The entire viewport, including scrollbars.

Origin: The top left corner of the viewport.

Supported browsers: WebKit, Gecko, and Opera.

*** windowScrollXY (instanceof NR.Vector)

The point returned by [CODE(JS)@en[[[window.scrollX]]]] and
[CODE(JS)@en[[[window.scrollY]]]] attributes.

Origin: The top left corner of the canvas.

Supported browsers: WebKit and Gecko.

*** windowScrollMax (instanceof NR.Vector)

The point represented by ([CODE(JS)@en[[[window.scrollMaxX]]]],
[CODE(JS)@en[[[window.scrollMaxY]]]]).

Origin: N/A.

Supported browsers: Gecko.

*** document (instanceof NR.Rect)

The box represented by [CODE(JS)@en[[[document.width]]]] and
[CODE(JS)@en[[[document.height]]]] attributes.

Origin: Browser-dependent.

Supported browsers: WebKit and Gecko.

**[22]  NR.View.getWindowRects (window)

*** outer (instanceof NR.Rect)

The rect representing the browser window.

Origin: The top left corner of the browser window.

Supported browsers: WebKit, Gecko, and Opera.

*** screenXY (instanceof NR.Vector)

The top left corner of the browser window.

Origin: The top left corner of the screen.

Supported browsers: WebKit, Gecko, and Opera (broken).

*** screenTL (instanceof NR.Vector)

The top left corner of the browser window.

Origin: The top left corner of the screen.

Supported browsers: WebKit, Gecko, and WinIE.

** [23] NR.View.getScreenRects (window)

*** device (instanceof NR.Rect)

The rect representing the screen.

Origin: In Gecko, the origin of the screen coordinate space.
In WebKit, Opera, and WinIE, the top left corner of the screen.

Supported browsers: All.

*** avail (instanceof NR.Rect)

The available area in the screen.

Origin: In WebKit and Gecko, the top left corner of the screen.
In Opera and WinIE, the top left corner of the available area.

Supported browsers: All.

* NR.Event

**[31] NR.Event.getRects (event, window)

*** canvas (instanceof NR.Vector)

The mouse event location in the canvas.

Origin: The position-absolute origin.

Supported browsers: All.

*** viewport (instanceof NR.Vector)

The mouse event location in the viewport.

Origin: The position-absolute origin.

Supported browsers: All.

*** client (instanceof NR.Vector)

The clientX/clientY value.

Origin: The top left corner of the canvas visible area.

Supported browsers: All.

*** offset (instanceof NR.Vector)

The offsetX/offsetY value.

Origin: Browser-dependent.

Supported browsers: WebKit, Opera, WinIE.

** [32] NR.Event.getRectsExtra (event)

*** screen (instanceof NR.Vector)

The screenX/screenY value.

Origin: The top left corner of the screen.

Supported browsers: All.

*** wh (instanceof NR.Vector)

The width/height value.

Origin: Browser-dependent.

Supported browser: [[NC4]].

*** page (instanceof NR.Vector)

The pageX/pageY value.

Origin: Browser-dependent.

Supported browsers: Gecko, WebKit, Opera.

*** layer (instanceof NR.Vector)

The layerX/layerY value.

Origin: Browser-dependent.

Supported browsers: [[Gecko]], [[WebKit]].

*** xy (instanceof NR.Vector)

The x/y value.

Origin: Browser dependent.

Supported browsers: WebKit, Opera, WinIE.

* NROnLoad

[26] If a function [CODE(JS)@en[NROnLoad]] of the global scope is defined, it is invoked
when all of the classes defined in the [CODE(JS)@en[NodeRect.js]] are loaded.

* Definition

[25] The [DFN[position-absolute origin]] is the top left corner of the box that would be generated from
a child element with [CODE(CSS)@en[[[position]]: [[absolute]]; [[top]]: 0; [[left]]: 0]] of 
the [CODE(HTMLe)@en[[[body]]]] element.  It is same as the origin of the canvas, according to the
CSS 2.1 specification.  However, in Gecko, it is instead the top left corner of the padding edge of
the box generated by the root element.

* Example

[33] See [[NodeRectViewer.js]], an interactive user interface for the NR.js.

* Known problems

[34] rtl support

[35] non-HTML elements

[36] iframe/frame