CSSOM 视图模块

1. 背景

本规范中定义的许多功能已被浏览器长期支持。该规范的目标是以一种可互操作的方式定义这些功能，使所有浏览器都能实现它们。该规范还定义了几个新功能，希望对作者有用。（如果没有，您可以向我们反馈！）

2. 术语

本规范中使用的术语来自 DOM、CSSOM 和 HTML。 [DOM] [CSSOM] [HTML]

HTML body 元素#the-html-body-element引用于:2. 术语5. 扩展至 Document 接口 (2) (3) (4)6. 扩展至 Element 接口 (2) (3) (4) (5) (6) (7) (8) (9)7. 扩展至 HTMLElement 接口 (2) (3) (4) 是根 html 元素的第一个 body HTML 元素 子元素。

内容边缘, 内边距边缘#padding-edge引用于：2. 术语 (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16)6. 元素接口的扩展 (2) (3) (4) (5) (6) (7) (8)6.1. 元素滚动成员 (2) (3) (4)7. HTMLElement接口的扩展 (2)10. MouseEvent接口的扩展 (2), 边框边缘#border-edge引用于：6. 元素接口的扩展 (2) (3) (4)7. HTMLElement接口的扩展 (2) (3) (4) (5) (6)8. HTMLImageElement接口的扩展 (2), 外边距边缘#margin-edge引用于：2. 术语 (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16), 和 视口#viewport引用于：2. 术语 (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15)3.1. 滚动4. 窗口接口的扩展 (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17) (18) (19) (20) (21) (22) (23) (24) (25) (26) (27) (28) (29) (30)5. 文档接口的扩展 (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17) (18)6. 元素接口的扩展 (2) (3) (4) (5) (6) (7) (8) (9) (10)6.1. 元素滚动成员 (2) (3) (4)10. MouseEvent接口的扩展 (2)12.1. 调整视口大小12.2. 滚动 (2)12.3. 事件摘要 (2)13.1. 平滑滚动：scroll-behavior属性 由CSS定义。

元素和视口有一个相关的滚动框#scrolling-box引用于：2. 术语 (2) (3)3.1. 滚动 (2) (3)6. 元素接口的扩展 (2) (3)6.1. 元素滚动成员 (2) (3)13.1. 平滑滚动：scroll-behavior属性 (2) (3) (4)，如果它有滚动机制或者溢出 其内容区域，并且overflow-x或overflow-y属性的使用值为hidden。[CSS3-BOX]

如果满足以下所有条件，一个元素是可能可滚动的#potentially-scrollable引用于：2. 术语5. 文档接口的扩展6. 元素接口的扩展 (2) (3) (4) (5) (6) (7)：

• 该元素有一个相关的CSS 布局框。

• 该元素不是HTML body 元素，或者如果是的话，根元素的overflow-x或overflow-y属性的使用值不是visible。

• 该元素的overflow-x或overflow-y属性的使用值不是visible。

注意：一个可能可滚动的元素可能没有滚动框。例如，它可以将overflow设置为auto，但内容未超出其内容区域。

视口或元素的滚动框有两个溢出方向#overflow-directions引用于：2. 术语 (2) (3) (4) (5) (6) (7) (8) (9) (10)4. 窗口接口的扩展 (2) (3) (4)6.1. 元素滚动成员 (2) (3) (4)，根据视口或元素的块流方向和内联基方向，如下所示：

如果块流方向是从上到下，且内联基方向是从左到右

如果块流方向是从左到右，且内联基方向是从左到右

向右和向下。

如果块流方向是从上到下，且内联基方向是从右到左

如果块流方向是从右到左，且内联基方向是从左到右

向左和向下。

如果块流方向是从右到左，且内联基方向是从右到左

向左和向上。

如果块流方向是从左到右，且内联基方向是从右到左

向右和向上。

术语滚动区域#scrolling-area引用于：2. 术语 (2)3.1. 滚动4. 窗口接口的扩展 (2) (3) (4) (5) (6)6. 元素接口的扩展 (2) (3) (4) (5) (6) (7) (8)6.1. 元素滚动成员 (2) (3) (4) (5) (6)是指一个视口或元素的盒子，它具有以下边缘，具体取决于视口或元素的滚动框的溢出方向。

起点是滚动区域的起点，如果初始包含块是一个视口，否则，当元素处于默认滚动位置时，该起点为元素的左上内边距边缘。x坐标向右增加，y坐标向下增加。

起始边缘#beginning-edges引用于：3.1. 滚动 (2)6.1. 元素滚动成员 (2)指的是盒子或元素的一组特定边缘：

如果溢出方向是向右和向下

顶部和左侧边缘。

如果溢出方向是向左和向下

顶部和右侧边缘。

如果溢出方向是向左和向上

底部和右侧边缘。

如果溢出方向是向右和向上

底部和左侧边缘。

结束边缘#ending-edges引用于：6.1. 元素滚动成员 (2)指的是盒子或元素的一组特定边缘：

如果溢出方向是向右和向下

底部和右侧边缘。

如果溢出方向是向左和向下

底部和左侧边缘。

如果溢出方向是向左和向上

顶部和左侧边缘。

如果溢出方向是向右和向上

顶部和右侧边缘。

术语CSS 布局框#css-layout-box引用于：2. 术语 (2) (3) (4)6. 元素接口的扩展 (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15)7. HTMLElement 接口的扩展 (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14)8. HTMLImageElement 接口的扩展 (2) (3) (4)与 CSS 中相同。根据本规范中的要求，具有 display 属性计算值为 table-column 或 table-column-group 的元素必须被视为具有相关的 CSS 布局框（分别为列或列组）。

术语SVG 布局框#svg-layout-box引用于：2. 术语 (2)6. 元素接口的扩展与 SVG 中相同。

术语CSS 布局框和SVG 布局框当前没有被 CSS 或 SVG 明确定义。

术语布局框#layout-box引用于：5. 文档接口的扩展 (2)6. 元素接口的扩展 (2)指的是CSS 布局框或SVG 布局框之一。

术语变换#transforms引用于：5. 文档接口的扩展 (2) (3) (4) (5)5.1. CaretPosition 接口6. 元素接口的扩展 (2) (3) (4) (5) (6)7. HTMLElement 接口的扩展 (2) (3) (4) (5) (6)8. HTMLImageElement 接口的扩展 (2)9. Range 接口的扩展10. MouseEvent 接口的扩展 (2)2011年8月4日到2013年12月17日的变更指的是 SVG 变换和 CSS 变换。[SVG] [CSS-TRANSFORMS-1]

当某个方法或属性被描述为调用另一个方法或属性时，用户代理必须调用其内部 API，以便作者无法通过在 ECMAScript 中使用自定义属性或函数覆盖属性或方法来更改行为。

除非另有说明，字符串比较应以区分大小写的方式进行。

2.1. CSS 像素

本规范中定义的所有 API 的坐标和尺寸均使用 CSS 像素，除非另有说明。

注意：这不适用于例如matchMedia()，因为其单位已明确给出。

2.2. 缩放

有两种缩放方式，页面缩放#page-zoom引用于：4. 窗口接口的扩展2011年8月4日到2013年12月17日的变更影响初始视口的大小，和捏合缩放#pinch-zoom引用于：4. 窗口接口的扩展2011年8月4日到2013年12月17日的变更，它像放大镜一样，不影响初始视口或实际视口。[CSS-DEVICE-ADAPT]

3. 通用基础设施

3.1. 滚动

当用户代理要执行滚动#perform-a-scroll引用于：3.1. 滚动4. 窗口接口的扩展6.1. 元素滚动成员 (2)某个滚动框 box到某个给定位置position，并关联某个元素element，可选地还有滚动行为behavior（如果省略则为"auto"），则必须执行以下步骤：

1. 终止任何正在进行的平滑滚动 box。
2. 如果用户代理遵循scroll-behavior属性，并且以下任一条件成立：
   • behavior为"auto"，且element不为空，且其计算的scroll-behavior属性值为平滑
   • behavior为smooth
   ...则对box执行平滑滚动到position。否则，执行瞬时滚动到position。

当用户代理执行平滑滚动#concept-smooth-scroll引用于：3.1. 滚动 (2) (3)4. 窗口接口的扩展6.1. 元素滚动成员 (2)时，必须在用户代理定义的时间内以用户代理定义的方式更新box的滚动位置。当滚动完成时，box的滚动位置必须为position。滚动也可以被终止#smooth-scroll-aborted引用于：3.1. 滚动，无论是通过算法还是用户。

当用户代理执行瞬时滚动#concept-instant-scroll引用于：3.1. 滚动时，必须将box的滚动位置更新为position。

要滚动到文档开头，对于文档document，请执行以下步骤：

1. 令viewport为与document关联的视口。
2. 令position为通过将起始边缘与滚动区域对齐视口的起始边缘后viewport应有的滚动位置。
3. 如果position与viewport当前的滚动位置相同，且viewport没有正在进行的平滑滚动，则终止这些步骤。
4. 对viewport执行滚动到position，并以document的根元素作为关联元素，如果有的话，否则为null。

注意：此算法用于导航到#top片段标识符时，如 HTML 中定义的那样。[HTML]

3.2. WebIDL 值

当请求规范化非有限值#normalize-non-finite-values引用于：4. 窗口接口的扩展 (2)6. 元素接口的扩展 (2) (3) (4) (5) (6)时，对于值x，如果x是三种特殊浮点字面值之一（Infinity、-Infinity或NaN），则x必须被更改为0。[WEBIDL]

4. 对 Window 接口的扩展

enum ScrollBehavior#enumdef-scrollbehaviorReferenced in:4. Extensions to the Window Interface { "auto", "instant", "smooth" };

dictionary ScrollOptions#dictdef-scrolloptionsReferenced in:4. Extensions to the Window Interface6. Extensions to the Element Interface {
    ScrollBehavior behavior#dom-scrolloptions-behaviorReferenced in:4. Extensions to the Window Interface6. Extensions to the Element Interface6.1. Element Scrolling Members = "auto";
};
dictionary ScrollToOptions#dictdef-scrolltooptionsReferenced in:4. Extensions to the Window Interface (2) (3) (4) (5)6. Extensions to the Element Interface (2) (3) (4) (5) : ScrollOptions {
    unrestricted double left#dom-scrolltooptions-leftReferenced in:4. Extensions to the Window Interface (2) (3) (4)6. Extensions to the Element Interface (2) (3) (4) (5) (6);
    unrestricted double top#dom-scrolltooptions-topReferenced in:4. Extensions to the Window Interface (2) (3) (4)6. Extensions to the Element Interface (2) (3) (4) (5) (6);
};

partial interface Window {
    [NewObject] MediaQueryList matchMedia(DOMString query);
    [SameObject, Replaceable] readonly attribute Screen screen;

    // browsing context
    void moveTo(long x, long y);
    void moveBy(long x, long y);
    void resizeTo(long x, long y);
    void resizeBy(long x, long y);

    // viewport
    [Replaceable] readonly attribute long innerWidth;
    [Replaceable] readonly attribute long innerHeight;

    // viewport scrolling
    [Replaceable] readonly attribute double scrollX;
    [Replaceable] readonly attribute double pageXOffset;
    [Replaceable] readonly attribute double scrollY;
    [Replaceable] readonly attribute double pageYOffset;
    void scroll(optional ScrollToOptions options);
    void scroll(unrestricted double x, unrestricted double y);
    void scrollTo(optional ScrollToOptions options);
    void scrollTo(unrestricted double x, unrestricted double y);
    void scrollBy(optional ScrollToOptions options);
    void scrollBy(unrestricted double x, unrestricted double y);

    // client
    [Replaceable] readonly attribute long screenX;
    [Replaceable] readonly attribute long screenY;
    [Replaceable] readonly attribute long outerWidth;
    [Replaceable] readonly attribute long outerHeight;
    [Replaceable] readonly attribute double devicePixelRatio;
};

当调用matchMedia(query)#dom-window-matchmedia引用于：2.1. CSS 像素4. 窗口接口的扩展方法时，必须执行以下步骤：

1. 将parsed media query list设为解析query的结果。
2. 返回一个新的MediaQueryList对象，使用上下文对象的关联Document作为文档，并将parsed media query list设为其关联的媒体查询列表。

screen#dom-window-screen引用于：4. 窗口接口的扩展 (2)属性必须返回与Window对象关联的Screen对象。

注意：通过screen访问WindowProxy对象时，可能会在Document导航时产生不同的结果。

moveTo(x, y)#dom-window-moveto引用于：4. 窗口接口的扩展2011年8月4日到2013年12月17日的变更方法必须遵循以下步骤：

1. 可选地，终止这些步骤。
2. 将target设为上下文对象的浏览上下文。
3. 将source设为责任浏览上下文的现有设置对象。
4. 如果source不被允许调整大小和移动 target，终止这些步骤。
5. 可选地，按用户代理定义的方式限制x和y，以防窗口移出可用空间。
6. 移动target的窗口，使窗口的左上角位于相对于输出设备左上角的坐标(x, y)，使用target的 CSS 像素。正轴方向为向右和向下。

moveBy(x, y)#dom-window-moveby引用于：4. 窗口接口的扩展2011年8月4日到2013年12月17日的变更方法必须遵循以下步骤：

1. 可选地，终止这些步骤。
2. 将target设为上下文对象的浏览上下文。
3. 将source设为责任浏览上下文的现有设置对象。
4. 如果source不被允许调整大小和移动 target，终止这些步骤。
5. 可选地，按用户代理定义的方式限制x和y，以防窗口移出可用空间。
6. 移动target的窗口x个 CSS 像素向右，y个 CSS 像素向下。

resizeTo(x, y)#dom-window-resizeto引用于：4. 窗口接口的扩展2011年8月4日到2013年12月17日的变更方法必须遵循以下步骤：

1. 可选地，终止这些步骤。
2. 将target设为上下文对象的浏览上下文。
3. 将source设为责任浏览上下文的现有设置对象。
4. 如果source不被允许调整大小和移动 target，终止这些步骤。
5. 可选地，按用户代理定义的方式限制x和y，以防窗口过小或超出可用空间。
6. 通过移动右边和底边来调整target的窗口大小，使视口的左右边缘之间的距离为x个 CSS 像素，视口的上下边缘之间的距离为y个 CSS 像素。
7. 可选地，按用户代理定义的方式移动target的窗口，使其不超出可用空间。

resizeBy(x, y)#dom-window-resizeby引用于：4. 窗口接口的扩展2011年8月4日到2013年12月17日的变更方法必须遵循以下步骤：

1. 可选地，终止这些步骤。
2. 将target设为上下文对象的浏览上下文。
3. 将source设为责任浏览上下文的现有设置对象。
4. 如果source不被允许调整大小和移动 target，终止这些步骤。
5. 可选地，按用户代理定义的方式限制x和y，以防窗口过小或超出可用空间。
6. 通过将target的右边缘向右移动x个 CSS 像素，底边缘向下移动y个 CSS 像素来调整target的窗口大小。
7. 可选地，按用户代理定义的方式移动target的窗口，使其不超出可用空间。

当一个浏览上下文 A 被允许调整大小和移动#allowed-to-resize-and-move引用于：4. 窗口接口的扩展 (2) (3) (4)另一个浏览上下文 B时，必须满足以下条件：

• B是通过脚本创建的辅助浏览上下文（与用户操作不同）。
• A与B是熟悉的。

innerWidth#dom-window-innerwidth引用于：4. 窗口接口的扩展2011年8月4日到2013年12月17日的变更属性必须返回包含滚动条大小（如果有）的视口宽度，如果没有视口，则返回 0。

var viewportWidth = innerWidth

innerHeight#dom-window-innerheight引用于：4. 窗口接口的扩展属性必须返回包含滚动条大小（如果有）的视口高度，如果没有视口，则返回 0。

scrollX#dom-window-scrollx引用于：4. 窗口接口的扩展 (2) (3)6. 元素接口的扩展 (2) (3) (4) (5)10. MouseEvent 接口的扩展属性必须返回视口左侧相对于初始包含块原点的x坐标，如果没有视口，则返回 0。

pageXOffset#dom-window-pagexoffset引用于：4. 窗口接口的扩展属性必须返回scrollX属性返回的值。

scrollY#dom-window-scrolly引用于：4. 窗口接口的扩展 (2) (3)6. 元素接口的扩展 (2) (3) (4)10. MouseEvent 接口的扩展属性必须返回视口顶部相对于初始包含块原点的y坐标，如果没有视口，则返回 0。

pageYOffset#dom-window-pageyoffset引用于：4. 窗口接口的扩展属性必须返回scrollY属性返回的值。

当调用scroll()#dom-window-scroll引用于：4. 窗口接口的扩展 (2) (3) (4)6. 元素接口的扩展 (2) (3) (4) (5) (6)2013年12月17日后的变更方法时，必须执行以下步骤：

1. 如果使用一个参数调用，请执行以下子步骤：

   1. 将options设为该参数。

   2. 将x设为options中的left字典成员的值（如果存在）， 否则为视口当前在x轴上的滚动位置。

   3. 将y设为options中的top字典成员的值（如果存在）， 否则为视口当前在y轴上的滚动位置。

2. 如果使用两个参数调用，请执行以下子步骤：

   1. 将options设为 null 转换为ScrollToOptions字典。[WEBIDL]

   2. 将x和y分别设为这两个参数。

3. 规范化非有限值以处理x和y。

4. 如果没有视口，中止这些步骤。

5. 将viewport width设为排除滚动条宽度后的视口宽度。

6. 将viewport height设为排除滚动条高度后的视口高度。

7. 如果视口具有向右的溢出方向

   将x设为max(0, min(x, 视口滚动区域的宽度 - viewport width))。

   如果视口具有向左的溢出方向

   将x设为min(0, max(x, viewport width - 视口滚动区域的宽度))。

8. 如果视口具有向下的溢出方向

   将y设为max(0, min(y, 视口滚动区域的高度 - viewport height))。

   如果视口具有向上的溢出方向

   将y设为min(0, max(y, viewport height - 视口滚动区域的高度))。

9. 将position设为通过对齐视口滚动区域的x坐标x到视口的左侧以及对齐y坐标y到视口顶部所获得的滚动位置。

10. 如果position与视口当前的滚动位置相同，并且视口没有正在进行的平滑滚动，中止这些步骤。

11. 将document设为视口的关联文档。

12. 执行滚动操作，将视口滚动到position，如果存在，则将文档的根元素作为关联元素，否则为null，并使用options中的behavior字典成员的值作为滚动行为。

当调用scrollTo()#dom-window-scrollto引用于：4. 窗口接口的扩展 (2)2013年12月17日的变更方法时，用户代理应执行与调用scroll()方法相同的操作，并使用相同的参数。

当调用scrollBy()#dom-window-scrollby引用于：4. 窗口接口的扩展 (2)2013年12月17日的变更方法时，用户代理必须运行以下步骤：

outerWidth#dom-window-outerwidth引用于：4. 窗口接口的扩展属性必须返回客户端窗口的宽度。如果没有客户端窗口，则此属性必须返回0。

outerHeight#dom-window-outerheight引用于：4. 窗口接口的扩展属性必须返回客户端窗口的高度。如果没有客户端窗口，则此属性必须返回0。

devicePixelRatio#dom-window-devicepixelratio引用于：4. 窗口接口的扩展2011年8月4日至2013年12月17日的变更属性必须返回以下算法的结果：

1. 如果没有输出设备，返回1并中止这些步骤。

2. 将CSS pixel size设为当前页面缩放比例因子下的CSS像素大小，并且捏合缩放比例因子为1.0。

3. 将device pixel size设为输出设备的设备像素的垂直大小。

4. 返回CSS pixel size除以device pixel size的结果。

4.1. features 参数到 open() 方法

HTML 定义了 open() 方法，但没有定义第三个参数 features 的效果。[HTML]

本规范定义了 features 参数的效果，适用于未选择忽略它的用户代理，如下所示：

1. 如果该方法不会创建新的辅助浏览上下文，则终止这些步骤。

2. 令 target 为新的 辅助浏览上下文。

3. 令 tokens 为将 features 用逗号分割字符串的结果。

4. 令 parsed features 为一个新的空字典。

5. Token 循环：对于 tokens 中的每个 token，执行以下子步骤：

   1. 令 input 为 token。

   2. 令 position 指向 input 的第一个字符。

   3. 跳过空白。

   4. 收集字符序列，这些字符不是 空格字符或"=" (U+003D)。令 name 为收集到的字符，转换为ASCII小写。

   5. 如果 name 已在 parsed features 中，或 name 不是受支持的 open() 特性名称，则继续 token 循环。

   6. 跳过空白。

   7. 如果 position 处的字符不是 "=" (U+003D)，则继续 token 循环。

   8. 将 position 前进一位。

   9. 如果 position 已超出 input 的末尾，继续 token 循环。

   10. 收集字符序列，这些字符可以是任何字符。令 raw value 为收集到的字符。

   11. 令 value 为调用解析整数规则对 raw value 的结果。

   12. 如果 value 是错误，继续 token 循环。

   13. 将 name 设置为 parsed features 中的 value。

6. 如果 left 在 parsed features 中，则执行这些子步骤：

   1. 令 x 为 left 的值。

   2. （可选）以用户代理定义的方式将 x 限制在窗口不会超出可用空间之外。

   3. （可选）将 target 的窗口移动，使窗口的左边缘位于相对于输出设备左边缘的水平坐标 x，以 target 的CSS像素测量。正轴为右向。

7. 如果 top 在 parsed features 中，则执行这些子步骤：

   1. 令 y 为 top 的值。

   2. （可选）以用户代理定义的方式将 y 限制在窗口不会超出可用空间之外。

   3. （可选）将 target 的窗口移动，使窗口的上边缘位于相对于输出设备上边缘的垂直坐标 y，以 target 的CSS像素测量。正轴为下向。

8. 如果 width 在 parsed features 中，则执行这些子步骤：

   1. 令 x 为 width 的值。

   2. （可选）以用户代理定义的方式将 x 限制在窗口不会太小或超出可用空间。

   3. （可选）调整 target 的窗口大小，使视口的左、右边缘之间的距离为 x target 的CSS像素。

   4. （可选）以用户代理定义的方式移动 target 的窗口，以确保其不会超出可用空间。

9. 如果 height 在 parsed features 中，则执行这些子步骤：

   1. 令 y 为 height 的值。

   2. （可选）以用户代理定义的方式将 y 限制在窗口不会太小或超出可用空间。

   3. （可选）调整 target 的窗口大小，使视口的上、下边缘之间的距离为 y target 的CSS像素。

   4. （可选）以用户代理定义的方式移动 target 的窗口，以确保其不会超出可用空间。

一个受支持的 open() 特性名称#supported-open-feature-name引用于：4.1. open() 方法的 features 参数 是下列之一：

width#supported-open-feature-name-width引用于：4.1. open() 方法的 features 参数

视口的宽度。

height#supported-open-feature-name-height引用于：4.1. open() 方法的 features 参数

视口的高度。

left#supported-open-feature-name-left引用于：4.1. open() 方法的 features 参数

窗口的左边位置。

top#supported-open-feature-name-top引用于：4.1. open() 方法的 features 参数

窗口的顶部位置。

4.2. MediaQueryList 接口

本节与 HTML 中定义的 事件循环 集成。[HTML]

MediaQueryList 对象有一个关联的 媒体查询列表#media-query-list引用于：4. Extensions to the Window Interface4.2. MediaQueryList 接口 (2) 和一个在创建时设置的关联 文档#mediaquerylist-document引用于：4. Extensions to the Window Interface4.2. MediaQueryList 接口 (2)。

MediaQueryList 对象的 媒体#mediaquerylist-media引用于：4.2. MediaQueryList 接口 (2) 是关联的 序列化 形式的 媒体查询列表。

MediaQueryList 对象的 匹配状态#mediaquerylist-matches-state引用于：4.2. MediaQueryList 接口 (2) (3)4.2.1. 事件摘要 是 true，如果关联的 媒体查询列表 与 文档 的状态匹配，否则为 false。

当请求 评估媒体查询并报告更改 对于 Document doc 时，执行以下步骤：

1. 对于每个 MediaQueryList 对象 target，其 doc 为 文档，按创建顺序，最早的优先，执行以下子步骤：

   1. 如果 target 的 匹配状态 与上次运行这些步骤时相比发生了变化，派发 一个新的 事件 到 target，使用 MediaQueryList 接口，类型 初始化为 change，isTrusted 属性初始化为 true，media 属性初始化为 target 的 媒体，matches 属性初始化为 target 的 匹配状态。

function handleOrientationChange(event) {
    if(event.matches) // 横向
        …
    else
        …
}
var mql = matchMedia("(orientation:landscape)");
mql.onchange = handleOrientationChange;

interface MediaQueryList#mediaquerylist引用于：4. Extensions to the Window Interface (2)4.2. MediaQueryList 接口 (2) (3) (4) (5) (6) (7) (8)4.2.1. 事件摘要 (2)2013年12月17日的变更 (2) : EventTarget {
  readonly attribute DOMString media;
  readonly attribute boolean matches;
  void addListener(EventListener? listener);
  void removeListener(EventListener? listener);
           attribute EventHandler onchange;
};

media#dom-mediaquerylist-media引用于：4.2. MediaQueryList 接口 (2) 属性必须返回关联的 媒体。

matches#dom-mediaquerylist-matches引用于：4.2. MediaQueryList 接口 属性必须返回关联的 匹配状态。

addListener(listener)#dom-mediaquerylist-addlistener引用于：4.2. MediaQueryList 接口 (2) (3)2013年12月17日的变更 方法必须执行以下步骤：

1. 如果 listener 为 null，终止这些步骤。
2. 将 事件监听器 添加到关联的 事件监听器 列表中，类型设置为 change，回调设置为 listener，捕获设置为 false，除非该列表中已有一个具有相同类型、回调和捕获的 事件监听器。

removeListener(listener)#dom-mediaquerylist-removelistener引用于：4.2. MediaQueryList 接口 (2) (3) 方法必须执行以下步骤：

1. 从关联的 事件监听器 列表中移除 类型 为 change，回调 为 listener，且 捕获 为 false 的 事件监听器。

注：本规范最初包含自定义的回调机制，使用 addListener() 和 removeListener()，回调会将关联的媒体查询列表作为参数调用。现在使用了正常的事件机制。为了向后兼容，addListener() 和 removeListener() 方法基本上是 addEventListener() 和 removeEventListener() 的别名，change 事件作为 MediaQueryList 伪装。

以下是必须支持的 事件处理程序（及其对应的 事件处理程序事件类型），作为 事件处理程序 IDL 属性，由实现 MediaQueryList 接口的所有对象支持：

[Constructor(DOMString type, optional MediaQueryListEventInit eventInitDict)]
interface MediaQueryListEvent : Event {
  readonly attribute DOMString media;
  readonly attribute boolean matches;
};

dictionary MediaQueryListEventInit#dictdef-mediaquerylisteventinit引用于：4.2. MediaQueryList 接口 : EventInit {
  DOMString media = "";
  boolean matches = false;
};

media#dom-mediaquerylistevent-media引用于：4.2. MediaQueryList 接口 属性必须返回其被初始化时的值。

matches#dom-mediaquerylistevent-matches引用于：4.2. MediaQueryList 接口 (2) 属性必须返回其被初始化时的值。

4.2.1. 事件摘要

本节为非规范性内容。

4.3. Screen 接口

顾名思义，Screen 接口表示输出设备屏幕的信息。

interface Screen#screen引用于：4. 窗口接口的扩展 (2)4.3. Screen 接口 (2)2011年8月4日至2013年12月17日的更改 {
  readonly attribute long availWidth;
  readonly attribute long availHeight;
  readonly attribute long width;
  readonly attribute long height;
  readonly attribute unsigned long colorDepth;
  readonly attribute unsigned long pixelDepth;
};

availWidth#dom-screen-availwidth引用于：4.3. Screen 接口 属性必须返回输出设备渲染表面的可用宽度，以 CSS 像素为单位。

availHeight#dom-screen-availheight引用于：4.3. Screen 接口 属性必须返回输出设备渲染表面的可用高度，以 CSS 像素为单位。

width#dom-screen-width引用于：4.3. Screen 接口 属性必须返回输出设备的宽度，以 CSS 像素为单位。

height#dom-screen-height引用于：4.3. Screen 接口 属性必须返回输出设备的高度，以 CSS 像素为单位。

colorDepth#dom-screen-colordepth引用于：4.3. Screen 接口 (2)2011年8月4日至2013年12月17日的更改 属性必须返回 24。

pixelDepth#dom-screen-pixeldepth引用于：4.3. Screen 接口 (2)2011年8月4日至2013年12月17日的更改 属性必须返回 24。

注：colorDepth 和 pixelDepth 属性虽然没有实用价值，但为了兼容性仍然保留。

5. Document 接口的扩展

partial interface Document {
  Element? elementFromPoint(double x, double y);
  sequence<Element> elementsFromPoint(double x, double y);
  CaretPosition? caretPositionFromPoint(double x, double y);
  readonly attribute Element? scrollingElement;
};

elementFromPoint(x, y)#dom-document-elementfrompoint引用于：5. Document 接口的扩展 (2) (3) 方法必须按以下步骤执行：

1. 如果任一参数为负数，x 大于 视口 的宽度（不包括渲染滚动条的大小，如果有），或者 y 大于 视口 的高度（不包括渲染滚动条的大小），或者文档没有关联的 视口，则返回 null 并终止这些步骤。

2. 如果 布局框 在 视口 中会成为坐标 x,y 的目标进行命中测试，并且应用了适用于 视口 后代的 转换，则返回关联的元素并终止这些步骤。

3. 如果文档有根元素，则返回根元素并终止这些步骤。

4. 返回 null。

注意：elementFromPoint() 方法不一定返回最上层绘制的元素。例如，元素可以通过使用 pointer-events CSS 属性被排除在命中测试的目标之外。

elementsFromPoint(x, y)#dom-document-elementsfrompoint引用于：5. Document 接口的扩展2011年8月4日至2013年12月17日的更改 方法必须按以下步骤执行：

1. 令 sequence 为一个新的空序列。

2. 如果任一参数为负数，x 大于 视口 的宽度（不包括渲染滚动条的大小，如果有），或者 y 大于 视口 的高度（不包括渲染滚动条的大小），或者文档没有关联的 视口，则返回 sequence 并终止这些步骤。

3. 对于 视口 中按绘制顺序的每个 布局框，从最顶层的框开始，若该框会成为坐标 x,y 的目标进行命中测试，即使没有重叠，且应用了适用于 转换 的 视口 的后代，将关联的元素添加到 sequence。

4. 如果文档有根元素，并且 sequence 中的最后一项不是根元素，则将根元素添加到 sequence。

5. 返回 sequence。

caretPositionFromPoint(x, y)#dom-document-caretpositionfrompoint引用于：5. Document 接口的扩展 (2) 方法必须返回以下步骤的结果：

1. 如果文档没有关联的 视口，则返回 null。

2. 如果任一参数为负数，x 大于 视口 的宽度（不包括渲染滚动条的大小），y 大于 视口 的高度（不包括渲染滚动条的大小），则返回 null。

3. 如果在 视口 的坐标 x,y 处，未应用适用于 转换 的后代，且没有插入文本输入点指示器，返回 null。

4. 如果在 视口 的坐标 x,y 处，文本输入点指示器会插入到一个也是替换元素的文本输入控件中，返回一个具有以下属性设置的 插入符位置：

   插入符节点

   对应于文本输入控件的节点。

   插入符偏移量

   文本输入点指示器左侧的16位单位数。

   插入符范围

   null

5. 否则，返回一个 插入符位置，其中 插入符范围 是文本输入点指示器会插入位置的 Range 对象，并且其他属性设置如下：

   插入符节点

   startContainer 的 插入符范围。

   插入符偏移量

   startOffset 的 插入符范围。

注意：命中测试的细节超出了本规范的范围，因此 elementFromPoint() 和 caretPositionFromPoint() 的确切细节也是如此。命中测试有望在未来的 CSS 或 HTML 修订中定义。

scrollingElement#dom-document-scrollingelement引用于：5. Document 接口的扩展 (2)2013年12月17日的更改 属性，在获取时，必须按以下步骤运行：

1. 如果 Document 处于怪异模式，请按以下子步骤执行：

   1. 如果 HTML body 元素 存在，并且它不是 潜在可滚动的，则返回 HTML body 元素 并终止这些步骤。

   2. 返回 null 并终止这些步骤。

2. 如果有根元素，则返回根元素并终止这些步骤。

3. 返回 null。

注意：对于始终使用 怪异模式 行为的非符合规范的用户代理，在 scrollTop 和 scrollLeft 的情况下，scrollingElement 属性也预期始终返回 HTML body 元素（如果不存在则返回 null）。此 API 的存在是为了使 Web 开发人员能够使用它来获取用于滚动 API 的正确元素，而不必对特定用户代理的行为做出假设或调用滚动来查看哪个元素滚动视口。

注意：HTML body 元素 与 HTML 的 document.body 不同，后者可以返回 frameset 元素。

5.1.CaretPosition 接口

caret position#caret-position引用于：5. Document 接口的扩展 (2) 表示文本插入点的位置。它始终与 caret node#caret-node引用于：5. Document 接口的扩展 (2)5.1. CaretPosition 接口 (2)、caret offset#caret-offset引用于：5. Document 接口的扩展 (2)5.1. CaretPosition 接口 (2) 和 caret range#caret-range引用于：5. Document 接口的扩展 (2) (3) (4)5.1. CaretPosition 接口 关联。它由 CaretPosition 对象表示。

interface CaretPosition#caretposition引用于：5. Document 接口的扩展5.1. CaretPosition 接口 (2) {
  readonly attribute Node offsetNode;
  readonly attribute unsigned long offset;
  [NewObject] DOMRect? getClientRect();
};

offsetNode#dom-caretposition-offsetnode引用于：5.1. CaretPosition 接口 属性必须返回 caret node。

offset#dom-caretposition-offset引用于：5.1. CaretPosition 接口 属性必须返回 caret offset。

getClientRect()#dom-caretposition-getclientrect引用于：5.1. CaretPosition 接口 方法必须按以下步骤执行，在返回值的第一个步骤终止：

1. 如果 caret range 不为 null：

   1. 让 list 为在 range 上调用 getClientRects() 方法的结果。

   2. 如果 list 为空，则返回 null。

   3. 返回 list 中索引为 0 的 DOMRect 对象。

2. 如果 caret node 是一个文本输入小部件并且是替换元素，并且在文档中，则返回小部件中的插入点对应的静态 DOMRect 对象，表示由 caret offset 值表示的插入点。元素及其祖先上应用的 变换 也会应用。

3. 返回 null。

6.Element 接口的扩展

enum ScrollLogicalPosition#enumdef-scrolllogicalpositionReferenced in:6. Extensions to the Element Interface (2) { "start", "center", "end", "nearest" };
dictionary ScrollIntoViewOptions#dictdef-scrollintoviewoptionsReferenced in:6. Extensions to the Element Interface6.1. Element Scrolling Members : ScrollOptions {
  ScrollLogicalPosition block#dom-scrollintoviewoptions-blockReferenced in:6. Extensions to the Element Interface (2)6.1. Element Scrolling Members (2) (3) = "center";
  ScrollLogicalPosition inline#dom-scrollintoviewoptions-inlineReferenced in:6. Extensions to the Element Interface (2)6.1. Element Scrolling Members (2) (3) = "center";
};

partial interface Element {
  sequence<DOMRect> getClientRects();
  [NewObject] DOMRect getBoundingClientRect();
  void scrollIntoView();
  void scrollIntoView((boolean or object) arg);
  void scroll(optional ScrollToOptions options);
  void scroll(unrestricted double x, unrestricted double y);
  void scrollTo(optional ScrollToOptions options);
  void scrollTo(unrestricted double x, unrestricted double y);
  void scrollBy(optional ScrollToOptions options);
  void scrollBy(unrestricted double x, unrestricted double y);
  attribute unrestricted double scrollTop;
  attribute unrestricted double scrollLeft;
  readonly attribute long scrollWidth;
  readonly attribute long scrollHeight;
  readonly attribute long clientTop;
  readonly attribute long clientLeft;
  readonly attribute long clientWidth;
  readonly attribute long clientHeight;
};

The getClientRects()#dom-element-getclientrects参考于:6. Element 接口的扩展 (2)9. Range 接口的扩展 方法被调用时，必须返回以下算法的结果：

1. 如果调用该方法的元素没有关联的 布局框，则返回一个空序列并停止此算法。

2. 如果该元素具有 SVG 布局框，返回一个包含单个 DOMRect 对象的序列，该对象描述了 SVG 规范定义的元素的边界框，应用到该元素及其祖先的 变换。

3. 返回一个包含静态 DOMRect 对象的序列，按照内容顺序排列，每个对象对应一个 框碎片，描述其边界区域（包括高度或宽度为零的碎片），并满足以下条件：

   • 应用到该元素及其祖先的 变换。

   • 如果调用该方法的元素的 display 属性的计算值为 table 或 inline-table，则包括表框和标题框（如有），但不包括匿名容器框。

   • 用子框替换每个 匿名块框，并重复此过程，直到最终列表中不再有匿名块框。

The getBoundingClientRect()#dom-element-getboundingclientrect参考于:6. Element 接口的扩展6.1. Element 滚动成员 方法被调用时，必须返回以下算法的结果：

1. 让 list 为调用该方法的同一元素上的 getClientRects() 方法的结果。

2. 如果 list 为空，则返回一个静态 DOMRect 对象，其 x、y、width 和 height 成员都为零。

3. 否则，返回一个静态 DOMRect 对象，描述包含 list 中第一个矩形和所有高度或宽度不为零的其余矩形的最小矩形。

var example = document.getElementsByTagName("div")[0].getBoundingClientRect();
        var exampleWidth = example.width;
        var exampleHeight = example.height;

scrollIntoView(arg)#dom-element-scrollintoview参考于:6. Element 接口的扩展 (2)2013年12月17日变更 (2) 方法必须执行以下步骤：

1. 将 options 设为 null。

2. 如果 arg 是对象，将 options 设为 arg。

3. 将 options 转换为 ScrollIntoViewOptions 字典。 [WEBIDL]

4. 如果没有指定 arg 或其值为 true，将 block 字典成员的值设为 "start"，并将 inline 字典成员的值设为 "nearest"。

5. 如果 arg 为 false，将 block 字典成员的值设为 "end"，并将 inline 字典成员的值设为 "nearest"。

6. 如果该元素没有任何关联的 布局框，则终止这些步骤。

7. 使用 options 参数 将元素滚动到视图中。

8. 可选择执行其他操作以引起用户的注意。

这个scroll()#dom-element-scroll引用于:6. 扩展Element接口 (2) (3) (4)2013年12月17日的更改 方法必须执行以下步骤:

1. 如果使用一个参数调用，请执行以下子步骤:

   1. 让options成为参数。

   2. 归一化非有限值，用于left 和top 字典成员的options，如果存在。

   3. 让x成为left 字典成员的options的值，如果存在，否则为元素在x轴上的当前滚动位置。

   4. 让y成为top 字典成员的options的值，如果存在，否则为元素在y轴上的当前滚动位置。

2. 如果使用两个参数调用，请执行以下子步骤:

   1. 让options为ScrollToOptions 字典，[WEBIDL]

   2. 让x和y成为参数。

   3. 归一化非有限值，用于x和y。

   4. 让left 字典成员的options具有值x。

   5. 让top 字典成员的options具有值y。

3. 让document成为元素的节点文档。

4. 如果document不是活动文档，终止这些步骤。

5. 让window成为document的defaultView 属性的值。

6. 如果window为null，终止这些步骤。

7. 如果元素是根元素并且document处于怪异模式，终止这些步骤。

8. 如果元素是根元素，调用scroll() 在window上，使用scrollX 作为第一个参数，y作为第二个参数，并终止这些步骤。

9. 如果元素是HTML body 元素，document 处于怪异模式， 并且元素不是潜在可滚动， 调用scroll() 在window上，使用options作为唯一参数，并终止这些步骤。

10. 如果元素没有任何相关的CSS布局框， 元素没有相关的滚动框， 或者元素没有溢出，终止这些步骤。

11. 滚动元素至x,y， 滚动行为为behavior 字典成员的options的值。

当scrollTo()#dom-element-scrollto引用于:6. 扩展Element接口 (2)2013年12月17日的更改 方法被调用时，用户代理必须表现得像scroll() 方法使用相同的参数被调用。

当scrollBy()#dom-element-scrollby引用于:6. 扩展Element接口 (2)2013年12月17日的更改 方法被调用时，用户代理必须执行以下步骤:

1. 如果使用一个参数调用，请执行以下子步骤:

   1. 让options成为参数。

   2. 归一化非有限值，用于left 和top 字典成员的options，如果存在。

2. 如果使用两个参数调用，请执行以下子步骤:

   1. 让options为ScrollToOptions 字典，[WEBIDL]

   2. 让x和y成为参数。

   3. 归一化非有限值，用于x和y。

   4. 让left 字典成员的options具有值x。

   5. 让top 字典成员的options具有值y。

3. 将scrollLeft 的值加到left 字典成员中。

4. 将scrollTop 的值加到top 字典成员中。

5. 表现得像scroll() 方法使用options作为唯一参数被调用。

scrollTop#dom-element-scrolltop引用于:5. 扩展Document接口6. 扩展Element接口 (2) (3) (4)2013年12月17日的更改属性在获取时，必须返回执行以下步骤的结果:

1. 让document成为元素的节点文档。

2. 如果document不是活动文档，返回零并终止这些步骤。

3. 让window成为document的defaultView 属性的值。

4. 如果window为null，返回零并终止这些步骤。

5. 如果元素是根元素并且document处于怪异模式，返回零并终止这些步骤。

6. 如果元素是根元素，返回scrollY 在window上的值。

7. 如果元素是HTML body 元素，document处于怪异模式，并且元素不是潜在可滚动，返回scrollY 在window上的值。

8. 如果元素没有任何相关的CSS布局框，返回零并终止这些步骤。

9. 返回滚动区域在与元素的内边距边缘对齐的y坐标。

设置scrollTop属性时，必须运行以下步骤:

1. 让y成为给定值。

2. 归一化非有限值，用于y。

3. 让document成为元素的节点文档。

4. 如果document不是活动文档，终止这些步骤。

5. 让window成为document的defaultView 属性的值。

6. 如果window为null，终止这些步骤。

7. 如果元素是根元素并且document处于怪异模式，终止这些步骤。

8. 如果元素是根元素，调用scroll() 在window上，使用scrollX 作为第一个参数，y作为第二个参数，并终止这些步骤。

9. 如果元素是HTML body 元素，document处于怪异模式，并且元素不是潜在可滚动，调用scroll() 在window上，使用scrollX 作为第一个参数，y作为第二个参数，并终止这些步骤。

10. 如果元素没有任何相关的CSS布局框，元素没有相关的滚动框，或者元素没有溢出，终止这些步骤。

11. 滚动元素到scrollLeft,y，滚动行为为"auto"。

scrollLeft#dom-element-scrollleft引用于:5. 扩展Document接口6. 扩展Element接口 (2) (3) (4)2013年12月17日的更改 (2)属性在获取时，必须返回执行以下步骤的结果:

1. 让document成为元素的节点文档。

2. 如果document不是活动文档，返回零并终止这些步骤。

3. 让window成为document的defaultView属性的值。

4. 如果window为null，返回零并终止这些步骤。

5. 如果元素是根元素并且document处于怪异模式，返回零并终止这些步骤。

6. 如果元素是根元素，返回scrollX在window上的值。

7. 如果元素是HTML body 元素，document处于怪异模式，并且元素不是潜在可滚动，返回scrollX在window上的值。

8. 如果元素没有任何相关的CSS布局框，返回零并终止这些步骤。

9. 返回滚动区域在与元素的内边距边缘对齐的x坐标。

设置scrollLeft属性时，必须运行以下步骤:

1. 让x成为给定值。

2. 归一化非有限值，用于x。

3. 让document成为元素的节点文档。

4. 如果document不是活动文档，终止这些步骤。

5. 让window成为document的defaultView属性的值。

6. 如果window为null，终止这些步骤。

7. 如果元素是根元素并且document处于怪异模式，终止这些步骤。

8. 如果元素是根元素，调用scroll()在window上，使用x作为第一个参数，scrollY作为第二个参数，并终止这些步骤。

9. 如果元素是HTML body 元素，document处于怪异模式，并且元素不是潜在可滚动，调用scroll()在window上，使用x作为第一个参数，scrollY作为第二个参数，并终止这些步骤。

10. 如果元素没有任何相关的CSS布局框，元素没有相关的滚动框，或者元素没有溢出，终止这些步骤。

11. 滚动元素到x，scrollTop，滚动行为为"auto"。

scrollWidth#dom-element-scrollwidth引用于:6. 扩展Element接口2013年12月17日的更改属性必须返回执行以下步骤的结果:

1. 让document成为元素的节点文档。

2. 如果document不是活动文档，返回零并终止这些步骤。

3. 让视口宽度为视口的宽度，排除滚动条的宽度，如果有的话；如果没有视口，则为零。

4. 如果元素是根元素并且document不处于怪异模式，返回max(视口 滚动区域宽度，视口宽度)。

5. 如果元素是HTML body 元素，document处于怪异模式并且元素不是潜在可滚动，返回max(视口 滚动区域宽度，视口宽度)。

6. 如果元素没有任何相关的CSS布局框，返回零并终止这些步骤。

7. 返回元素的滚动区域的宽度。

scrollHeight#dom-element-scrollheight引用于:6. 扩展Element接口2013年12月17日的更改属性必须返回执行以下步骤的结果:

1. 让document成为元素的节点文档。

2. 如果document不是活动文档，返回零并终止这些步骤。

3. 让视口高度为视口的高度，排除滚动条的高度，如果有的话；如果没有视口，则为零。

4. 如果元素是根元素并且document不处于怪异模式，返回max(视口 滚动区域高度，视口高度)。

5. 如果元素是HTML body 元素，document处于怪异模式并且元素不是潜在可滚动，返回max(视口 滚动区域高度，视口高度)。

6. 如果元素没有任何相关的CSS布局框，返回零并终止这些步骤。

7. 返回元素的滚动区域的高度。

clientTop#dom-element-clienttop引用于:6. 扩展Element接口2013年12月17日的更改属性必须运行以下步骤:

1. 如果元素没有任何相关的CSS布局框，或者CSS布局框为内联，返回零。

2. 返回border-top-width属性的计算值，加上在顶部内边距边缘和顶部边框边缘之间渲染的任何滚动条的高度，忽略任何应用于元素及其祖先的转换。

clientLeft#dom-element-clientleft引用于:6. 扩展Element接口2013年12月17日的更改属性必须运行以下步骤:

1. 如果元素没有任何相关的CSS布局框，或者CSS布局框为内联，返回零。

2. 返回border-left-width属性的计算值，加上在左侧内边距边缘和左侧边框边缘之间渲染的任何滚动条的宽度，忽略任何应用于元素及其祖先的转换。

clientWidth#dom-element-clientwidth引用于:6. 扩展Element接口2013年12月17日的更改属性必须运行以下步骤:

1. 如果元素没有任何相关的CSS布局框，或者CSS布局框为内联，返回零。

2. 如果元素是根元素并且元素的节点文档不处于怪异模式，或者如果元素是HTML body 元素，并且元素的节点文档处于怪异模式，返回排除渲染滚动条（如果有）的视口宽度。

3. 返回内边距边缘的宽度，排除在内边距边缘和边框边缘之间渲染的任何滚动条的宽度，忽略任何应用于元素及其祖先的转换。

clientHeight#dom-element-clientheight引用于:6. 扩展Element接口2013年12月17日的更改属性必须运行以下步骤:

1. 如果元素没有任何相关的CSS布局框，或者CSS布局框为内联，返回零。

2. 如果元素是根元素并且元素的节点文档不处于怪异模式，或者如果元素是HTML body 元素，并且元素的节点文档处于怪异模式，返回排除渲染滚动条（如果有）的视口高度。

3. 返回内边距边缘的高度，排除在内边距边缘和边框边缘之间渲染的任何滚动条的高度，忽略任何应用于元素及其祖先的转换。

6.1. Element 滚动成员

将元素滚动到可视区域#scroll-an-element-into-view引用于:6. 扩展Element接口 element，使用ScrollIntoViewOptions字典options，表示按以下步骤运行，针对每个建立了滚动框的祖先元素或视口，按从最内层到最外层滚动框的顺序运行:

1. 如果与element关联的Document与与box关联的元素或视口关联的Document不具有相同源，终止这些步骤。

2. 让element bounding border box为在element上调用getBoundingClientRect()返回的值所表示的盒子。

3. 让scrolling box edge A为开始边缘，处于scrolling box的块流方向，并且让element edge A为element bounding border box在物理位置与scrolling box edge A相同的边缘。

4. 让scrolling box edge B为结束边缘，处于scrolling box的块流方向，并且让element edge B为element bounding border box在物理位置与scrolling box edge B相同的边缘。

5. 让scrolling box edge C为开始边缘，处于scrolling box的行内基准方向，并且让element edge C为element bounding border box在物理位置与scrolling box edge C相同的边缘。

6. 让scrolling box edge D为结束边缘，处于scrolling box的行内基准方向，并且让element edge D为element bounding border box在物理位置与scrolling box edge D相同的边缘。

7. 让element width为element edge C和element edge D之间的距离。

8. 让scrolling box width为scrolling box edge C和scrolling box edge D之间的距离。

9. 让position为通过以下步骤获得的scrolling box的滚动位置:

   1. 如果block字典成员的options为"start"，将element edge A与scrolling box edge A对齐。

   2. 否则，如果block字典成员的options为"end"，将element edge B与scrolling box edge B对齐。

   3. 否则，如果block字典成员的options为"center"，将element bounding border box的中心与scrolling box的中心在scrolling box的块流方向上对齐。

   4. 否则，它是"nearest"；请按照以下步骤进行:

      如果element edge A和element edge B都在scrolling box edge A和scrolling box edge B之外

      不执行任何操作。

      如果element edge A在scrolling box edge A之外，并且element width小于scrolling box width

      如果element edge B在scrolling box edge B之外，并且element width大于scrolling box width

      将element edge A与scrolling box edge A对齐。

      如果element edge A在scrolling box edge A之外，并且element width大于scrolling box width

      如果element edge B在scrolling box edge B之外，并且element width小于scrolling box width

      将element edge B与scrolling box edge B对齐。

   5. 如果inline字典成员的options为"start"，将element edge C与scrolling box edge C对齐。

   6. 否则，如果inline字典成员的options为"end"，将element edge D与scrolling box edge D对齐。

   7. 否则，如果inline字典成员的options为"center"，将element bounding border box的中心与scrolling box的中心在scrolling box的行内基准方向上对齐。

   8. 否则，它是"nearest"；请按照以下步骤进行:

      如果element edge C和element edge D都在scrolling box edge C和scrolling box edge D之外

      不执行任何操作。

      如果element edge C在scrolling box edge C之外，并且element width小于scrolling box width

      如果element edge D在scrolling box edge D之外，并且element width大于scrolling box width

      将element edge C与scrolling box edge C对齐。

      如果element edge C在scrolling box edge C之外，并且element width大于scrolling box width

      如果element edge D在scrolling box edge D之外，并且element width小于scrolling box width

      将element edge D与scrolling box edge D对齐。

10. 如果position与scrolling box的当前滚动位置相同，并且scrolling box没有正在进行的平滑滚动，则终止这些步骤。

11. 如果scrolling box与一个元素关联

    让associated element为该元素。

    如果scrolling box与一个视口关联

    让document为视口关联的Document。 如果存在，让associated element为document的根元素，否则为null。

12. 让behavior为options的behavior字典成员。

13. 执行滚动scrolling box 到position，associated element作为关联元素，behavior作为滚动行为。

将 元素滚动#scroll-an-element引用于: 6. 扩展Element接口 (2) (3) element到x，y， 可选地使用滚动行为behavior（如果省略，默认为"auto"），表示：

1. 让box为element关联的滚动框。

2. 如果box具有向右的溢出方向

   让x为max(0, min(x, element滚动区域宽度 - element 内边距边缘宽度))。

   如果box具有向左的溢出方向

   让x为min(0, max(x, element内边距边缘宽度 - element滚动区域宽度))。

3. 如果box具有向下的溢出方向

   让y为max(0, min(y, element滚动区域高度 - element 内边距边缘高度))。

   如果box具有向上的溢出方向

   让y为min(0, max(y, element内边距边缘高度 - element滚动区域高度))。

4. 让position为通过将x与box的左侧对齐，以及将y与box的顶部对齐，计算出的box的滚动位置。

5. 如果position与box的当前滚动位置相同，并且box没有正在进行的平滑滚动，则终止这些步骤。

6. 执行滚动box到position， element作为关联元素，behavior作为滚动行为。

7. 扩展HTMLElement 接口

partial interface HTMLElement {
  readonly attribute Element? offsetParent;
  readonly attribute long offsetTop;
  readonly attribute long offsetLeft;
  readonly attribute long offsetWidth;
  readonly attribute long offsetHeight;
};

offsetParent#dom-htmlelement-offsetparent引用于:7. 扩展HTMLElement接口 (2) (3) (4) (5) 属性必须返回以下步骤的结果：

1. 如果以下任一情况成立，则返回null并终止此算法：

   • 该元素没有关联的CSS布局框。

   • 该元素是根元素。

   • 该元素是HTML body元素。

   • 该元素的position属性的计算值是fixed。

2. 返回该元素的最近的祖先元素，并满足以下至少一项条件，如果找到这样的祖先元素则终止此算法：

   • 该元素的position属性的计算值不是static。

   • 它是HTML body元素。

   • 该元素的position属性的计算值是static，并且祖先元素是以下HTML元素之一：td、th或table。

3. 返回null。

offsetTop#dom-htmlelement-offsettop引用于:7. 扩展HTMLElement接口 属性必须返回以下步骤的结果：

1. 如果该元素是HTML body元素或没有任何关联的CSS布局框，返回0并终止此算法。

2. 如果该元素的offsetParent为null，返回该元素的第一个CSS布局框的顶部边框边缘的y坐标，相对于初始包含块的原点，忽略任何适用于该元素及其祖先的变换，并终止此算法。

3. 返回将该元素的offsetParent的第一个CSS布局框的顶部内边距边缘的y坐标，减去该元素的第一个CSS布局框的顶部边框边缘的y坐标的结果，相对于初始包含块的原点，忽略任何适用于该元素及其祖先的变换。

   注意：由多个行框组成的行内元素将只考虑其第一个CSS布局框。

offsetLeft#dom-htmlelement-offsetleft引用于:7. 扩展HTMLElement接口 属性必须返回以下步骤的结果：

1. 如果该元素是HTML body元素或没有任何关联的CSS布局框，返回0并终止此算法。

2. 如果该元素的offsetParent为null，返回该元素的第一个CSS布局框的左侧边框边缘的x坐标，相对于初始包含块的原点，忽略任何适用于该元素及其祖先的变换，并终止此算法。

3. 返回将该元素的offsetParent的第一个CSS布局框的左侧内边距边缘的x坐标，减去该元素的第一个CSS布局框的左侧边框边缘的x坐标的结果，相对于初始包含块的原点，忽略任何适用于该元素及其祖先的变换。

offsetWidth#dom-htmlelement-offsetwidth引用于:7. 扩展HTMLElement接口 属性必须返回以下步骤的结果：

1. 如果该元素没有任何关联的CSS布局框，返回0并终止此算法。

2. 返回该元素的第一个CSS布局框的边框边缘宽度，忽略任何适用于该元素及其祖先的变换。

offsetHeight#dom-htmlelement-offsetheight引用于:7. 扩展HTMLElement接口 属性必须返回以下步骤的结果：

1. 如果该元素没有任何关联的CSS布局框，返回0并终止此算法。

2. 返回该元素的第一个CSS布局框的边框边缘高度，忽略任何适用于该元素及其祖先的变换。

8. 扩展HTMLImageElement 接口

partial interface HTMLImageElement {
  readonly attribute long x;
  readonly attribute long y;
};

x#dom-htmlimageelement-x引用于:8. 扩展HTMLImageElement接口 属性在获取时，必须返回该元素的第一个CSS布局框的左侧边框边缘的x坐标，相对于初始包含块的原点，忽略任何适用于该元素及其祖先的变换，如果没有CSS布局框则返回0。

y#dom-htmlimageelement-y引用于:8. 扩展HTMLImageElement接口 属性在获取时，必须返回该元素的第一个CSS布局框的顶部边框边缘的y坐标，相对于初始包含块的原点，忽略任何适用于该元素及其祖先的变换，如果没有CSS布局框则返回0。

9. 扩展Range 接口

下面描述的方法返回的对象必须是静态的。

partial interface Range {
  sequence<DOMRect> getClientRects();
  [NewObject] DOMRect getBoundingClientRect();
};

getClientRects()#dom-range-getclientrects引用于:5.1. CaretPosition接口9. 扩展Range接口 (2) 方法在被调用时，必须在范围不在文档中时返回空序列，否则返回包含以下约束的静态DOMRect对象的序列：

• 对于范围选择的每个元素，其父元素未被范围选择，包含通过调用元素上的getClientRects()返回的边框区域。

• 对于范围选择或部分选择的每个Text节点（包括边界点相同的情况），包含一个DOMRect对象（仅限选中部分，而非整行框）。这些DOMRect对象的边界是使用字体度量计算的；因此，对于水平书写，每个框的垂直尺寸由字体的上升和下降决定，水平尺寸由文本的进度宽度决定。应用于祖先的变换也会应用。

getBoundingClientRect()#dom-range-getboundingclientrect引用于:9. 扩展Range接口 方法在被调用时，必须返回以下算法的结果：

1. 让list为调用同一范围上的getClientRects()的结果。

2. 如果list为空，返回一个静态的DOMRect对象，其x，y，width和height成员为零。

3. 否则，返回一个静态的DOMRect对象，描述包含list中第一个矩形及所有高度或宽度不为零的其余矩形的最小矩形。

10. 扩展MouseEvent 接口

该对象的IDL片段重新定义了一些成员。我们能否解决这个问题？

partial interface MouseEvent {
  readonly attribute double screenX;
  readonly attribute double screenY;
  readonly attribute double pageX;
  readonly attribute double pageY;
  readonly attribute double clientX;
  readonly attribute double clientY;
  readonly attribute double x;
  readonly attribute double y;
  readonly attribute double offsetX;
  readonly attribute double offsetY;
};

partial dictionary MouseEventInit {
  double screenX = 0.0;
  double screenY = 0.0;
  double clientX = 0.0;
  double clientY = 0.0;
};

screenX#dom-mouseevent-screenx引用于:10. 扩展MouseEvent接口 属性必须返回事件发生时相对于屏幕原点的x坐标。

screenY#dom-mouseevent-screeny引用于:10. 扩展MouseEvent接口 属性必须返回事件发生时相对于屏幕原点的y坐标。

pageX#dom-mouseevent-pagex引用于:10. 扩展MouseEvent接口 (2) 属性必须遵循以下步骤：

1. 如果事件的派发标志被设置，返回事件发生时相对于初始包含块原点的水平坐标，并终止这些步骤。

2. 设offset为事件关联的scrollX属性的值（如果有），否则为零。

3. 返回offset与事件的clientX属性值的和。

pageY#dom-mouseevent-pagey引用于:10. 扩展MouseEvent接口 (2) 属性必须遵循以下步骤：

1. 如果事件的派发标志被设置，返回事件发生时相对于初始包含块原点的垂直坐标，并终止这些步骤。

2. 设offset为事件关联的scrollY属性的值（如果有），否则为零。

3. 返回offset与事件的clientY属性值的和。

clientX#dom-mouseevent-clientx引用于:10. 扩展MouseEvent接口 (2) (3) 属性必须返回事件发生时相对于视口原点的x坐标。

clientY#dom-mouseevent-clienty引用于:10. 扩展MouseEvent接口 (2) (3) 属性必须返回事件发生时相对于视口原点的y坐标。

x#dom-mouseevent-x引用于:10. 扩展MouseEvent接口 属性必须返回clientX的值。

y#dom-mouseevent-y引用于:10. 扩展MouseEvent接口 属性必须返回clientY的值。

offsetX#dom-mouseevent-offsetx引用于:10. 扩展MouseEvent接口 属性必须遵循以下步骤：

1. 如果事件的派发标志被设置，返回事件发生时相对于目标节点内边距边缘的x坐标，忽略应用于该元素及其祖先的变换，并终止这些步骤。

2. 返回事件的pageX属性的值。

offsetY#dom-mouseevent-offsety引用于:10. 扩展MouseEvent接口 属性必须遵循以下步骤：

1. 如果事件的派发标志被设置，返回事件发生时相对于目标节点内边距边缘的y坐标，忽略应用于该元素及其祖先的变换，并终止这些步骤。

2. 返回事件的pageY属性的值。

11. 几何

11.1. GeometryUtils 接口

enum CSSBoxType#enumdef-cssboxtype引用于:11.1. GeometryUtils接口 (2) (3) { "margin", "border", "padding", "content" };
dictionary BoxQuadOptions#dictdef-boxquadoptions引用于:11.1. GeometryUtils接口 {
  CSSBoxType box = "border";
  GeometryNode relativeTo; // XXX 默认文档(即视口)
};

dictionary ConvertCoordinateOptions#dictdef-convertcoordinateoptions引用于:11.1. GeometryUtils接口 (2) (3) {
  CSSBoxType fromBox = "border";
  CSSBoxType toBox = "border";
};

[NoInterfaceObject]
interface GeometryUtils#geometryutils引用于:11.1. GeometryUtils接口 (2) (3) (4) (5) {
  sequence<DOMQuad> getBoxQuads(optional BoxQuadOptions options);
  DOMQuad convertQuadFromNode(DOMQuadInit quad, GeometryNode from, optional ConvertCoordinateOptions options);
  DOMQuad convertRectFromNode(DOMRectReadOnly rect, GeometryNode from, optional ConvertCoordinateOptions options);
  DOMPoint convertPointFromNode(DOMPointInit point, GeometryNode from, optional ConvertCoordinateOptions options); // XXX z,w 转换为 0
};

Text 实现了 GeometryUtils; // 类似 Range
Element 实现了 GeometryUtils;
CSSPseudoElement 实现了 GeometryUtils;
Document 实现了 GeometryUtils;

typedef (Text 或 Element 或 CSSPseudoElement 或 Document) GeometryNode#typedefdef-geometrynode引用于:11.1. GeometryUtils接口 (2) (3) (4);

getBoxQuads(options)#dom-geometryutils-getboxquads引用于:11.1. GeometryUtils接口 方法必须执行以下步骤：

1. DOM 顺序

   p1 = 左上角，即使在RTL中

   比例为0时意味着除以零，返回0x0

   跨帧不允许，抛出WrongDocumentError？

   点被压平（3d变换），z=0。类似getClientRect

   内联中的测试块

   伪元素before/after是该元素的子元素

   视口框都相同

convertQuadFromNode(quad, from, options)#dom-geometryutils-convertquadfromnode引用于:11.1. GeometryUtils接口 方法 必须执行以下步骤：

1. ...

convertRectFromNode(rect, from, options)#dom-geometryutils-convertrectfromnode引用于:11.1. GeometryUtils接口 方法 必须执行以下步骤：

1. ...

convertPointFromNode(point, from, options)#dom-geometryutils-convertpointfromnode引用于:11.1. GeometryUtils接口 方法必须执行以下步骤：

1. ...

12. 事件

12.1. 调整视口大小

本节与HTML中定义的事件循环集成。[HTML]

当要求为运行调整大小步骤时，为Document doc，执行以下步骤：

1. 如果doc的视口 自上次运行这些步骤以来，宽度或高度发生了变化（例如，由于用户调整浏览器窗口的大小， 或更改了页面缩放比例， 或者iframe元素的尺寸发生变化），则在与doc关联的Window 对象上触发一个名为 resize 的事件。

12.2. 滚动事件

本节与HTML中定义的事件循环集成。[HTML]

每个Document都有一个与之关联的待处理的滚动事件目标#pending-scroll-event-targets引用于:12.2. 滚动事件 (2) (3) (4) (5)，初始为空。

每当视口被滚动时（无论是响应用户交互还是通过API），用户代理必须执行以下步骤：

1. 让doc成为视口的关联Document。

2. 如果doc已经在doc的待处理的滚动事件目标中，终止这些步骤。

3. 将doc添加到doc的待处理的滚动事件目标中。

每当某个元素被滚动时（无论是响应用户交互还是通过API），用户代理必须执行以下步骤：

1. 让doc成为该元素的节点文档。

2. 如果该元素已经在doc的待处理的滚动事件目标中，终止这些步骤。

3. 将该元素添加到doc的待处理的滚动事件目标中。

当要求运行滚动步骤时，为Document doc，执行这些步骤：

1. 对于doc的待处理的滚动事件目标中的每个target，按照它们被添加到列表的顺序，运行以下子步骤：

   1. 如果target是Document，在target上触发一个名为 scroll 的冒泡事件。

   2. 否则，在target上触发一个名为 scroll的事件。

2. 清空doc的待处理的滚动事件目标。

12.3. 事件摘要

本节是非规范性的。

13. CSS属性

本节中的功能应移至其他规范中。

13.1. 平滑滚动: scroll-behavior 属性

scroll-behavior属性指定当通过导航或CSSOM滚动API发生滚动时，滚动盒的滚动行为。 任何其他滚动，例如用户执行的滚动，不受此属性的影响。 当此属性指定在根元素上时，它适用于视口。

HTML body元素的scroll-behavior属性不会传播到视口。

auto#valdef-scroll-behavior-auto引用于:2013年12月17日的更改

滚动盒以即时方式滚动。

smooth#valdef-scroll-behavior-smooth引用于:3.1. 滚动

滚动盒通过用户代理定义的时间函数，在用户代理定义的时间段内以平滑的方式滚动。用户 代理应遵循平台惯例（如有）。

用户代理可以忽略此属性。

变更历史

本节记录了此规范发布之间的一些更改。本节并不详尽。一般不列出漏洞修复和编辑更改。

2013年12月17日的更改

• scrollIntoView() 方法在Element上进行了修改和扩展。

• scrollTop 和scrollLeft的IDL属性不再接受对象； 取而代之的是添加了scroll()， scrollTo()和scrollBy()方法。

• scrollWidth， scrollHeight， clientTop， clientLeft， clientWidth和clientHeight的IDL属性恢复为返回整数。

• DOMRectList接口已被移除。

• scrollingElement 的IDL属性已添加到Document中。

• Window中的一些只读属性被标注了[Replaceable]IDL扩展属性。

• MediaQueryList， scroll事件和resize事件已与HTML中的事件循环集成，因此它们与动画帧同步。

• scroll-behavior的instant值已重命名为auto。

• scrollLeft 在Element上的原点已更改（针对RTL）。

• scrollIntoView()方法在Element上和scroll()， scrollTo()， scrollBy()方法在Window上采用了相关字典作为第一个参数。

• MediaQueryList接口已更改为使用常规事件API，并将addListener()定义为基于该API。

2011年8月4日至2013年12月17日的更改

• 规范现在处理从右到左和垂直的书写模式。

• 规范现在能够感知页面缩放和捏合缩放。

• 引入了scroll-behaviorCSS属性，并扩展了滚动API以支持控制平滑滚动的机制。

• 现在定义了moveTo()， moveBy()， resizeTo()和resizeBy()方法。

• innerWidth等属性现在使用double类型代替long。

• 现在定义了devicePixelRatio。

• 现在定义了window.open()的features参数。

• colorDepth和pixelDepth属性现在总是返回24。

• 引入了elementsFromPoint()方法。

• 规范现在能够感知变换。

• 引入了一些几何实用API，但尚未指定。

• ClientRect已更名为DOMRect，并移至几何规范中。 [GEOMETRY-1]

• 规范现在定义了何时触发resize和scroll事件。

致谢

编辑们要感谢 Alan Stearns， Alexey Feldgendler， Antonio Gomes， Björn Höhrmann， Boris Zbarsky， Chris Rebert， Dan Bates， David Vest， Elliott Sprehn， Garrett Smith， Henrik Andersson， Hallvord R. M. Steen， Kang-Hao Lu， Leif Arne Storset， Luiz Agostini， Maciej Stachowiak， Michael Dyck， Mike Wilson， Morten Stenshorne， Olli Pettay， Pavel Curtis， Peter-Paul Koch， Rachel Kmetz， Rick Byers， Robert O’Callahan， Sam Weinig， Scott Johnson， Sebastian Zartner， Stewart Brodie， Sylvain Galineau， Tab Atkins， Tarquin Wilton-Jones， Thomas Moore， Thomas Shinnick， 以及 Xiaomei Ji 对本文档的贡献。

特别感谢最早在Windows Internet Explorer浏览器中广泛部署了本规范中许多特性并首创实现的Microsoft员工。