CSSOM 视图模块

1. 背景

本规范中定义的许多特性，浏览器早已支持很长时间。本规范的目标是以所有浏览器都能实现且互操作的方式来定义这些特性。此外，规范也定义了一些新的滚动定制相关特性。

2. 术语

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

一个元素 body（即 body 元素）在以下所有条件都为真时，被认为是 可能可滚动：

• body 有一个关联的 盒子。

• body 的 父元素的 overflow-x 或 overflow-y 属性的计算值既不是 visible，也不是 clip。

• body 的 overflow-x 或 overflow-y 属性的计算值既不是 visible，也不是 clip。

注意： body 元素即使被认为是 可能可滚动，也可能没有 滚动盒。 例如，其 overflow 的使用值可能为 auto，但内容没有溢出其内容区域。

一个 滚动盒，属于 视口或元素，有两个 溢出方向，即该视口或元素的 块结束和 行内结束方向。 注意，初始滚动位置不一定与 滚动区域原点对齐，具体取决于 内容分布属性，参考 CSS Box Alignment 3 § 5.3 对齐溢出与滚动容器。

术语 滚动区域 指的是一个 视口或元素的盒子，具体边界由该 视口或元素的 滚动盒的 溢出方向决定。

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

起始边：某个盒子或元素的一组边的起始边如下：

如果 溢出方向为向右且向下

上边和左边。

如果 溢出方向为向左且向下

上边和右边。

如果 溢出方向为向左且向上

下边和右边。

如果 溢出方向为向右且向上

下边和左边。

结束边：某个盒子或元素的一组边的结束边如下：

如果 溢出方向为向右且向下

下边和右边。

如果 溢出方向为向左且向下

下边和左边。

如果 溢出方向为向左且向上

上边和左边。

如果 溢出方向为向右且向上

上边和右边。

视觉视口是一种 视口，其 滚动区域是另一个 视口，称为 布局视口。

除了滚动外，视觉视口还可能对其 布局视口应用缩放变换。 此变换应用于 布局视口的画布，但不会影响其内部坐标空间。

注意：视觉视口的缩放变换通常称为“捏合缩放（pinch-zoom）”。从概念上说，这种变换改变了 CSS 参考像素的大小，但会按比例改变布局视口的大小，从而不会导致页面内容重排。

缩放变换的幅度称为 视觉视口的 缩放因子。

VisualViewport 对象有一个 关联的文档， 这是一个 Document 对象。 它是拥有 Window 的 关联文档 ，该 VisualViewport 属于这个 Window。 布局视口 是该 Window 的 视口。

在本规范要求中，display 属性的计算值为 table-column 或 table-column-group 的元素，必须被视为有一个关联的 盒子（分别为列或列组）。

术语 SVG 布局盒 指由 SVG 元素生成的 盒子，其不对应任何 CSS 定义的 display 类型。 （例如 盒子由 rect 元素生成。）

术语 变换 指 SVG 变换与 CSS 变换。[SVG11] [CSS-TRANSFORMS-1]

当某个方法或属性被称为调用另一个方法或属性时，用户代理必须调用该属性或方法的内部 API，以保证作者不能通过在 ECMAScript 中覆写属性或方法（如自定义属性或函数）来改变其行为。

除非另有说明，所有字符串比较均使用 is。

2.1. CSS 像素

除非另有说明，本规范中定义的 API 的所有坐标和尺寸均以 CSS 像素为单位。[CSS-VALUES]

注意： 这不适用于如 matchMedia() 等，因为这些地方的单位已明确定义。

2.2. 缩放

有两种缩放方式：页面缩放，影响初始视口的大小；以及视觉视口的 缩放因子，类似放大镜，并不影响初始视口或实际视口。[CSS-DEVICE-ADAPT]

注意： “缩放因子”通常称为“捏合缩放（pinch-zoom）”；但也可能通过其他方式改变。例如，用户代理可能会对聚焦的输入框进行缩放以提高可读性。

2.3. Web 暴露的屏幕信息

用户代理可以选择隐藏输出设备屏幕的信息，以保护用户隐私。为确保各 API 一致处理，本规范定义了以下术语，每个术语都包含宽度和高度，原点为左上角，x、y 坐标分别向右和向下递增。

Web 暴露的屏幕区域包括以下之一：

• 输出设备的区域，单位为 CSS 像素。

• 视口的区域，单位为 CSS 像素。

Web 暴露的可用屏幕区域包括以下之一：

• 输出设备渲染表面的可用区域，单位为 CSS 像素。

• 输出设备的区域，单位为 CSS 像素。

• 视口的区域，单位为 CSS 像素。

3. 通用基础设施

本规范依赖 WHATWG Infra 标准。[INFRA]

3.1. 滚动

当滚动位置没有待更新或平移，且用户已完成手势时，滚动即完成。滚动位置更新包括鼠标滚轮平滑或瞬时滚动、键盘滚动、滚动捕捉事件、或其它导致滚动位置变化并可能插值的 API 和手势。触摸拖动或触控板滚动等用户手势，直到指针或按键释放才算完成。

当用户代理需要对 滚动盒 box进行 平滑滚动到 position，应以用户代理定义的方式和时长更新 box 的滚动位置。滚动完成时，box 的滚动位置必须为 position。滚动也可能被算法或用户中止。

当用户代理需要对 滚动盒 box进行瞬时滚动到 position，应将 box 的滚动位置立即更新为 position。

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

1. 令 viewport 为 与 document 关联的视口。
2. 令 position 为将 滚动区域的起始边与 viewport 的起始边对齐时 viewport 的滚动位置。
3. 如果 position 与 viewport 当前滚动位置相同，且 viewport 没有正在进行的 平滑滚动，则中止后续步骤。
4. 对 viewport 执行滚动到 position， 关联元素为 document 的 根元素（如有），否则为 null。

注意： 当跳转到 #top 片段标识符时会用到此算法，HTML 已定义。[HTML]

3.2. WebIDL 值

当被要求为值 x 规范化非有限值 时，若 x 是三种特殊浮点文字值之一 (Infinity, -Infinity 或 NaN), 则必须将 x 更改为值 0。[WEBIDL]

4. 对 Window 接口的扩展

enum ScrollBehavior { "auto", "instant", "smooth" };

dictionary ScrollOptions {
    ScrollBehavior behavior = "auto";
};
dictionary ScrollToOptions : ScrollOptions {
    unrestricted double left;
    unrestricted double top;
};

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

    // browsing context
    undefined moveTo(long x, long y);
    undefined moveBy(long x, long y);
    undefined resizeTo(long width, long height);
    undefined 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;
    undefined scroll(optional ScrollToOptions options = {});
    undefined scroll(unrestricted double x, unrestricted double y);
    undefined scrollTo(optional ScrollToOptions options = {});
    undefined scrollTo(unrestricted double x, unrestricted double y);
    undefined scrollBy(optional ScrollToOptions options = {});
    undefined scrollBy(unrestricted double x, unrestricted double y);

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

当调用 matchMedia(query) 方法时，必须运行下列步骤：

1. 令 parsed media query list 为对 query 执行 解析 的结果。
2. 返回一个新的 MediaQueryList 对象，其 this 的 关联 Document 作为该对象的 document，并以 parsed media query list 作为其关联的 media query list。

screen 属性必须返回与该 Screen 对象关联的 Window 对象的 Screen 对象。

注意： 通过 WindowProxy 对象访问 screen 时，在文档导航时可能会得到不同结果。

如果 关联文档 是 fully active（完全活动） 的，则 visualViewport 属性必须返回与该 VisualViewport 对象关联的 VisualViewport 对象。否则，必须返回 null。

注意： VisualViewport 对象只对当前正在呈现其 Document 的窗口返回并有用。如果保留对某个关联文档未被呈现的 VisualViewport 的引用，则该 VisualViewport 中的值不得泄露关于浏览上下文的任何信息。

moveTo(x, y) 方法必须遵循下列步骤：

1. 可选地，返回。

2. 令 target 为 this 的 相关全局对象 的 browsing context。

3. 如果 target 不是由脚本创建的（即不是由用户动作创建的）辅助浏览上下文（auxiliary browsing context），则返回。

4. 可选地，以用户代理定义的方式将 x 和 y 限定，以使窗口不会移出可用空间。

5. 移动 target 的窗口，使窗口左上角位于相对于输出设备左上角的坐标 (x, y)，测量单位为 CSS pixels（正方向为右和下）。

moveBy(x, y) 方法必须遵循下列步骤：

1. 可选地，返回。

2. 令 target 为 this 的 相关全局对象 的 browsing context。

3. 如果 target 不是由脚本创建的辅助浏览上下文，则返回。

4. 可选地，以用户代理定义的方式将 x 和 y 限定，以使窗口不会移出可用空间。

5. 将 target 的窗口向右移动 x 个 CSS pixels，并向下移动 y 个 CSS pixels。

resizeTo(width, height) 方法必须 遵循下列步骤：

1. 可选地，返回。

2. 令 target 为 this 的 相关全局对象 的 browsing context。

3. 如果 target 不是由脚本创建的辅助浏览上下文，则返回。

4. 可选地，以用户代理定义的方式将 width 和 height 限定，以使窗口不会过小或超出可用空间。

5. 通过移动其右和下边缘来调整 target 窗口的大小，使视口的左右边距离为 width 个 CSS pixels，上下边距离为 height 个 CSS pixels。

6. 可选地，以用户代理定义的方式移动 target 的窗口，使其不超出可用空间。

resizeBy(x, y) 方法必须遵循下列步骤：

1. 可选地，返回。

2. 令 target 为 this 的 相关全局对象 的 browsing context。

3. 如果 target 不是由脚本创建的辅助浏览上下文，则返回。

4. 可选地，以用户代理定义的方式将 x 和 y 限定，以使窗口不会过小或超出可用空间。

5. 通过将其右边缘向右移动 x 个 CSS pixels，并将其下边缘向下移动 y 个 CSS pixels，来调整 target 的窗口大小。

6. 可选地，以用户代理定义的方式移动 target 的窗口，使其不超出可用空间。

innerWidth 属性必须返回包括已渲染滚动条（如有）大小在内的 视口 宽度，若不存在视口则返回零。

var viewportWidth = innerWidth

innerHeight 属性必须返回包括已渲染滚动条（如有）大小在内的 视口 高度，若不存在视口则返回零。

scrollX 属性必须返回相对于 initial containing block 原点的 x 坐标， 即视口左侧的位置，若不存在视口则返回零。

pageXOffset 属性必须返回 scrollX 属性的值。

scrollY 属性必须返回相对于 initial containing block 原点的 y 坐标， 即视口顶部的位置，若不存在视口则返回零。

pageYOffset 属性必须返回 scrollY 属性的值。

当调用 scroll() 方法时，必须运行下列步骤：

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 为该 视口 关联的 Document。

12. 对该视口执行滚动 到 position，并以 document 的 根元素（如有）作为关联元素，若无则为 null，滚动行为为 options 的 behavior 字段的值。

    用户代理对该步骤应使用协调的 viewport 的 perform a scroll 还是对布局视口的滚动盒执行 perform a scroll 存在分歧。

当调用 scrollTo() 方法时，用户代理必须如同使用相同参数调用 scroll() 方法一样进行处理。

当调用 scrollBy() 方法时，用户代理必须运行下列步骤：

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

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

   2. 令 x 和 y 分别为传入的两个参数。

   3. 令 left 字典成员的值为 x。

   4. 令 top 字典成员的值为 y。

2. 对 left 和 top 字典成员对 options 执行 规范化非有限值。

3. 将 scrollX 的值加到 left 字典成员上。

4. 将 scrollY 的值加到 top 字典成员上。

5. 如同以 options 作为唯一参数调用 scroll() 方法一样进行处理。

screenX 与 screenLeft 属性必须返回相对于 Web-exposed screen area 原点的客户端窗口左侧的 x 坐标，单位为 CSS pixels，若不存在则返回零。

screenY 与 screenTop 属性必须返回相对于 Web-exposed screen area 原点的客户端窗口顶部的 y 坐标，单位为 CSS pixels，若不存在则返回零。

outerWidth 属性必须返回客户端窗口的宽度；如果不存在客户端窗口则返回零。

outerHeight 属性必须返回客户端窗口的高度；如果不存在客户端窗口则返回零。

devicePixelRatio 属性必须返回下述 确定设备像素比率 算法的结果：

1. 如果不存在输出设备，返回 1 并中止这些步骤。

2. 令 CSS pixel size 为在当前 page zoom 且使用 scale factor 为 1.0 时的 CSS pixel 的大小。

3. 令 device pixel size 为输出设备的设备像素的垂直尺寸。

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

4.1. features 参数用于 open() 方法

HTML 定义了 open() 方法。本节定义了在 features 参数中给出的 位置 和 大小 的行为。[HTML]

要为给定的浏览上下文 target 使用一个 map tokenizedFeatures 来 设置浏览上下文特性：

1. 令 x 为 null。

2. 令 y 为 null。

3. 令 width 为 null。

4. 令 height 为 null。

5. 如果 tokenizedFeatures["left"] 存在：

   1. 对 tokenizedFeatures["left"] 调用 解析整数规则，并将结果赋予 x。

   2. 如果 x 是一个错误，则将 x 设为 0。

   3. 可选地，以用户代理定义的方式将 x 限定，使窗口不会移出 Web 暴露的可用屏幕区域。

   4. 可选地，移动 target 的窗口，使窗口的左边位于相对于 Web 暴露的屏幕区域 左边缘 的水平坐标 x，以 CSS 像素（相对于 target）为度量单位。正方向为向右。

6. 如果 tokenizedFeatures["top"] 存在：

   1. 对 tokenizedFeatures["top"] 调用 解析整数规则，并将结果赋予 y。

   2. 如果 y 是一个错误，则将 y 设为 0。

   3. 可选地，以用户代理定义的方式将 y 限定，使窗口不会移出 Web 暴露的可用屏幕区域。

   4. 可选地，移动 target 的窗口，使窗口的上边位于相对于 Web 暴露的屏幕区域 顶边 的垂直坐标 y，以 CSS 像素（相对于 target）为度量单位。正方向为向下。

7. 如果 tokenizedFeatures["width"] 存在：

   1. 对 tokenizedFeatures["width"] 调用 解析整数规则，并将结果赋予 width。

   2. 如果 width 是一个错误，则将 width 设为 0。

   3. 如果 width 不为 0：

      1. 可选地，以用户代理定义的方式将 width 限定，使窗口不会过小或超出 Web 暴露的可用屏幕区域。

      2. 可选地，通过移动 target 的右边，使视口的左右边之间的距离为 width 个相对于 target 的 CSS 像素，以此来调整窗口的大小。

      3. 可选地，以用户代理定义的方式移动 target 的窗口，使其不会超出 Web 暴露的可用屏幕区域。

8. 如果 tokenizedFeatures["height"] 存在：

   1. 对 tokenizedFeatures["height"] 调用 解析整数规则，并将结果赋予 height。

   2. 如果 height 是一个错误，则将 height 设为 0。

   3. 如果 height 不为 0：

      1. 可选地，以用户代理定义的方式将 height 限定，使窗口不会过小或超出 Web 暴露的可用屏幕区域。

      2. 可选地，通过移动 target 的下边，使视口的上下边之间的距离为 height 个相对于 target 的 CSS 像素，以此来调整窗口的大小。

      3. 可选地，以用户代理定义的方式移动 target 的窗口，使其不会超出 Web 暴露的可用屏幕区域。

一个 受支持的 open() 特性名 是下列之一：

width

视口的宽度。

height

视口的高度。

left

窗口的左侧位置。

top

窗口的顶部位置。

4.2. MediaQueryList 接口

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

一个 MediaQueryList 对象在创建时具有一个关联的 media query list 和一个关联的 document。

MediaQueryList 对象有一个关联的 media ，它是关联的 序列化 形式的 媒体查询列表 。

一个 MediaQueryList 对象具有一个关联的 matches state，当关联的 media query list 与该 document 的状态匹配时该值为 true，否则为 false。

在被要求为一个 Document doc 评估媒体查询并报告变更 时，运行下列步骤：

1. 对于每个以创建顺序（最早创建者先）遍历的、其 document 为 doc 的 MediaQueryList 对象 target，运行下列子步骤：

   1. 如果自上次运行这些步骤以来 target 的 matches state 已改变，则在 target 上 触发事件，事件名为 change，使用 MediaQueryListEvent，其 isTrusted 属性初始化为 true， 其 media 属性初始化为 target 的 media， 并且其 matches 属性初始化为 target 的 matches state。

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

[Exposed=Window]
interface MediaQueryList : EventTarget {
  readonly attribute CSSOMString media;
  readonly attribute boolean matches;
  undefined addListener(EventListener? callback);
  undefined removeListener(EventListener? callback);
           attribute EventHandler onchange;
};

属性 media 必须返回关联的 media。

属性 matches 必须返回关联的 matches state。

当调用方法 addListener(callback) 时，必须运行下列步骤：

1. 使用 添加事件监听器 的步骤，在 this 上添加一个事件监听器，该监听器的 类型 为 change，且其 回调 为 callback。

当调用方法 removeListener(callback) 时，必须运行下列步骤：

1. 如果 this 的 事件监听器列表 中 包含 一个 事件监听器，其 类型 为 change，其 回调 为 callback，且 capture 为 false，则使用 移除事件监听器 的步骤，从 this 中移除该事件监听器。

注意： 本规范最初有一个自定义的回调机制，使用 addListener() 和 removeListener()， 回调会以关联的 media query list 作为参数被调用。现在改为使用普通的事件机制。为向后兼容，addListener() 和 removeListener() 方法基本上分别是 addEventListener() 和 removeEventListener() 的别名，并且 change 事件会伪装成 MediaQueryList。

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

[Exposed=Window]
interface MediaQueryListEvent : Event {
  constructor(CSSOMString type, optional MediaQueryListEventInit eventInitDict = {});
  readonly attribute CSSOMString media;
  readonly attribute boolean matches;
};

dictionary MediaQueryListEventInit : EventInit {
  CSSOMString media = "";
  boolean matches = false;
};

属性 media 必须返回它被初始化为的值。

属性 matches 必须返回它被初始化为的值。

4.2.1. 事件摘要

本节为非规范性内容。

4.3. Screen 接口

正如其名称所示，Screen 接口表示有关输出设备屏幕的信息。

[Exposed=Window]
interface Screen {
  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 必须返回 Web 暴露的可用屏幕区域 的宽度。

属性 availHeight 必须返回 Web 暴露的可用屏幕区域 的高度。

属性 width 必须返回 Web 暴露的屏幕区域 的宽度。

属性 height 必须返回 Web 暴露的屏幕区域 的高度。

属性 colorDepth 和 pixelDepth 应返回输出设备上每像素用于颜色的位数（不包括 alpha 通道）。如果用户代理无法返回输出设备所使用的确切位数，则应返回最接近的估计值，例如发送到显示器的帧缓冲使用的位数或任何内部表示的位数，这些值最接近输出设备将使用的值。用户代理必须返回一个至少等于 color 媒体特性乘以三的值。如果不同的颜色分量使用的位数不相等，则返回值可能大于 color 媒体特性值的三倍。如果用户代理不知道颜色深度或出于隐私原因不想返回它，应返回 24。

注意： 为了兼容性，属性 colorDepth 和 pixelDepth 返回相同的值。

注意： 已知一些不符合规范的实现会返回 32 而不是 24。

5. 对 Document 接口的扩展

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

dictionary CaretPositionFromPointOptions {
  sequence<ShadowRoot> shadowRoots = [];
};

elementFromPoint(x, y) 方法必须遵循以下步骤：

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

2. 如果在盒子在视口中能成为坐标 x,y 的命中测试目标， 应用适用于视口后代的变换后，返回关联的元素并终止这些步骤。

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

4. 返回 null。

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

elementsFromPoint(x, y) 方法必须遵循以下步骤：

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

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

3. 对于盒子在视口中，以绘制顺序（从最顶部的盒子开始），能够成为坐标 x,y 的命中测试目标，即使没有重叠，应用适用于视口后代的变换后，将关联的元素添加到sequence中。

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

5. 返回sequence。

caretPositionFromPoint(x, y, options) 方法必须返回运行以下步骤的结果：

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

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

3. 如果在视口中的坐标 x,y 处，应用适用于视口后代的变换后，不会插入文本插入点指示器，则返回 null。

4. 如果在视口中的坐标 x,y 处，应用适用于视口后代的变换后，文本插入点指示器会插入到也是替换元素的文本输入控件中，则返回一个插入点位置，其属性如下：

   插入点节点

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

   插入点偏移量

   文本插入点指示器将插入的左侧的 16 位单元数量。

5. 否则：

   1. 令caretPosition为一个元组，包含caretPositionNode（一个节点）和caretPositionOffset（一个非负整数），表示应用适用于变换后的视口后代，在插入文本指示器时的位置。

   2. 令startNode为caretPosition的caretPositionNode，令startOffset为caretPosition的caretPositionOffset。

   3. 当startNode是节点，startNode的根是shadow root，并且startNode的根不是options["shadowRoots"]中任何一个的包含 shadow 的祖先，重复以下步骤：

      1. 将startOffset设置为startNode的索引，在startNode的根的宿主中。

      2. 将startNode设置为startNode的根的宿主的父。

   4. 返回一个插入点位置，其属性如下：

      1. 插入点节点设置为startNode。

      2. 插入点偏移量设置为startOffset。

注意：此插入点位置不是实时的。

注意：命中测试的具体细节不在本规范范围内，因此elementFromPoint() 和 caretPositionFromPoint() 的具体细节也不在范围内。命中测试有望在未来的 CSS 或 HTML 修订中被定义。

scrollingElement 属性，在获取时，必须运行以下步骤：

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

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

      在此目的下， overflow:clip值在body 元素的父元素上必须视为overflow:hidden。

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

2. 如果存在根元素，则返回根元素并中止这些步骤。

3. 返回 null。

注意：对于总是采用 怪异模式行为的非兼容用户代理， 在 scrollTop 和 scrollLeft 上， scrollingElement 属性也应始终返回 body 元素（或如果不存在则为 null）。 此 API 的存在是为了让 Web 开发者能正确获取用于滚动 API 的元素， 无需假设某个特定用户代理的行为，也无需通过实际滚动来判断哪个元素会滚动视口。

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

5.1. CaretPosition 接口

插入符号位置 指的是文本插入点指示器所在的位置。它总是关联一个插入符号节点和插入符号偏移量。它由一个 CaretPosition 对象表示。

[Exposed=Window]
interface CaretPosition {
  readonly attribute Node offsetNode;
  readonly attribute unsigned long offset;
  [NewObject] DOMRect? getClientRect();
};

offsetNode 属性必须返回 插入符号节点。

offset 属性必须返回 插入符号偏移量。

getClientRect() 方法必须按照以下步骤执行，遇到返回值时即终止：

1. 如果 插入符号节点是作为替换元素的文本输入控件， 且在文档中，则返回该控件中插入符号的 缩放 DOMRect 对象，插入位置由 插入符号偏移量值表示。 会应用该元素及其祖先的 变换。

2. 否则：

   1. 令 caretRange 为一个折叠的 Range 对象，其 起始节点 和 结束节点 都设置为 插入符号节点，其 起始偏移 和 结束偏移 都设置为 插入符号偏移量。

   2. 返回调用 caretRange 的 DOMRect 对象，即 getBoundingClientRect() 方法的结果。

注意：此 DOMRect 对象不是 实时 的。

6. 对 Element 接口的扩展

enum ScrollLogicalPosition { "start", "center", "end", "nearest" };
dictionary ScrollIntoViewOptions : ScrollOptions {
  ScrollLogicalPosition block = "start";
  ScrollLogicalPosition inline = "nearest";
  ScrollIntoViewContainer container = "all";
};

enum ScrollIntoViewContainer { "all", "nearest" };

dictionary CheckVisibilityOptions {
    boolean checkOpacity = false;
    boolean checkVisibilityCSS = false;
    boolean contentVisibilityAuto = false;
    boolean opacityProperty = false;
    boolean visibilityProperty = false;
};

partial interface Element {
  DOMRectList getClientRects();
  [NewObject] DOMRect getBoundingClientRect();

  boolean checkVisibility(optional CheckVisibilityOptions options = {});

  undefined scrollIntoView(optional (boolean or ScrollIntoViewOptions) arg = {});
  undefined scroll(optional ScrollToOptions options = {});
  undefined scroll(unrestricted double x, unrestricted double y);
  undefined scrollTo(optional ScrollToOptions options = {});
  undefined scrollTo(unrestricted double x, unrestricted double y);
  undefined scrollBy(optional ScrollToOptions options = {});
  undefined 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;
  readonly attribute double currentCSSZoom;
};

注意：checkOpacity 和 checkVisibilityCSS 属性是历史名称。 这些属性有与新命名方案一致的别名， 即 opacityProperty 和 visibilityProperty。

getClientRects() 方法被调用时，必须返回以下算法的执行结果：

1. 如果所调用元素没有关联的 盒，返回空的 DOMRectList 对象并停止算法。

2. 如果元素有 SVG 布局盒，则返回包含一个 缩放 DOMRectList 对象的列表，包含一个描述该元素边界框的 DOMRect 对象，并应用元素及其祖先的 变换。

3. 返回包含按内容顺序排列的 DOMRect 对象的 DOMRectList ，每个对象对应一个 盒片段， 描述其边框区域（包括高或宽为零的片段），并且有如下约束：

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

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

   • 将每个 匿名 块盒 替换为其子盒，直到最终列表中没有匿名块盒为止。

注意：DOMRect 对象由 getClientRects() 返回时不是 实时 的。

getBoundingClientRect() 方法，在 某个元素 element 上调用时，必须返回 获取边界框 的结果。

注意：DOMRect 对象由 getBoundingClientRect() 返回后不是 实时的。

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

scrollIntoView(arg) 方法必须按以下步骤运行：

1. 令 behavior 为 "auto"。

2. 令 block 为 "start"。

3. 令 inline 为 "nearest"。

4. 令 container 为 null。

5. 如果 arg 是一个 ScrollIntoViewOptions 字典，则：

   1. 将 behavior 设置为 options 的 behavior 字典成员。

   2. 将 block 设置为 options 的 block 字典成员。

   3. 将 inline 设置为 options 的 inline 字典成员。

   4. 如果 options 的 container 字典成员为 "nearest"， 则将 container 设置为该元素。

6. 否则，如果 arg 为 false，则将 block 设置为 "end"。

7. 如果该元素没有任何关联的 盒， 或不可被用户代理功能访问， 则返回。

8. 使用 behavior、block、inline 和 container 将元素滚动到可视区域。

9. 可选地执行其他能让用户注意到该元素的操作。

<style>
    .scroller { overflow: auto; scroll-padding: 8px; }
    .slide { scroll-margin: 16px; scroll-snap-align: center; }
</style>
<div class="carousel">
    <div class="slides scroller">
        <div id="s1" class="slide">
        <div id="s2" class="slide">
        <div id="s3" class="slide">
    </div>
    <div class="markers">
        <button data-target="s1">1</button>
        <button data-target="s2">2</button>
        <button data-target="s3">3</button>
    </div>
</div>
<script>
    document.querySelector('.markers').addEventListener('click', (evt) => {
        const target = document.getElementById(evt.target.dataset.target);
        if (!target) return;
        // scrollIntoView 会正确对齐目标项，遵循 scroll-snap-align、
        // scroll-margin 以及滚动容器的 scroll-padding。
        target.scrollIntoView({
            // 只滚动最近的滚动容器。
            container: 'nearest',
            behavior: 'smooth'
        });
    });
</script>

scroll() 方法必须运行以下步骤：

1. 如果以一个参数调用，按以下子步骤进行：

   1. 令 options 为该参数。

   2. 对 options 的 left 和 top 字典成员（如有）进行非有限值归一化。

   3. 令 x 为 options 的 left 字典成员的值（如有），否则为该元素当前 x 轴滚动位置。

   4. 令 y 为 options 的 top 字典成员的值（如有），否则为该元素当前 y 轴滚动位置。

2. 如果以两个参数调用，按以下子步骤进行：

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

   2. 令 x 和 y 分别为参数。

   3. 对 x 和 y 进行非有限值归一化。

   4. 令 options 的 left 字典成员的值为 x。

   5. 令 options 的 top 字典成员的值为 y。

3. 令 document 为该元素的节点文档。

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

5. 令 window 为 document 的 defaultView 属性值。

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

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

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

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

10. 如果该元素没有任何关联的盒、没有关联的滚动盒或没有溢出，终止这些步骤。

11. 以 x、y 为目标，按 options 的 behavior 字典成员为滚动行为，滚动该元素。

当调用 scrollTo() 方法时，用户代理必须如同调用 scroll() 方法且参数相同一样处理。

当调用 scrollBy() 方法时，用户代理必须运行以下步骤：

1. 如果以一个参数调用，按以下子步骤进行：

   1. 令 options 为该参数。

   2. 对 options 的 left 和 top 字典成员（如有）进行非有限值归一化。

2. 如果以两个参数调用，按以下子步骤进行：

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

   2. 令 x 和 y 分别为参数。

   3. 对 x 和 y 进行非有限值归一化。

   4. 令 options 的 left 字典成员的值为 x。

   5. 令 options 的 top 字典成员的值为 y。

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

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

5. 如同以 options 作为唯一参数调用 scroll() 方法一样处理。

scrollTop 属性，获取时，必须运行以下步骤：

1. 令 document 为该元素的节点文档。

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

3. 令 window 为 document 的 defaultView 属性值。

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

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

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

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

8. 如果该元素没有任何关联的盒，返回 0 并终止这些步骤。

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

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

1. 令 y 为给定值。

2. 对 y 进行非有限值归一化。

3. 令 document 为该元素的节点文档。

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

5. 令 window 为 document 的 defaultView 属性值。

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

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

8. 如果该元素是根元素，则在 window 上以 scroll() ，第一个参数为 window 的 scrollX，第二个参数为 y，终止这些步骤。

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

10. 如果该元素没有任何关联的盒，没有关联的滚动盒或没有溢出，终止这些步骤。

11. 以 scrollLeft、y 为目标，滚动行为为 "auto"，滚动该元素。

scrollLeft 属性，在获取时，必须按以下步骤返回结果：

1. 令 document 为该元素的 节点文档。

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

3. 令 window 为 document 的 defaultView 属性值。

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

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

6. 如果该元素是 根元素，返回 window 的 scrollX。

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

8. 如果该元素没有任何关联的 盒，则返回 0 并终止这些步骤。

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

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

1. 令 x 为给定值。

2. 对 x 进行非有限值归一化。

3. 令 document 为该元素的 节点文档。

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

5. 令 window 为 document 的 defaultView 属性值。

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

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

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

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

10. 如果该元素没有任何关联的 盒，没有关联的 滚动盒 或没有溢出，终止这些步骤。

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

scrollWidth 属性必须按以下步骤返回结果：

1. 令 document 为该元素的 节点文档。

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

3. 令 viewport width 为 视口的宽度（不包括滚动条宽度，如有），如果没有 视口则为 0。

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

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

6. 如果该元素没有任何关联的 盒，则返回 0 并终止这些步骤。

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

scrollHeight 属性必须按以下步骤返回结果：

1. 令 document 为该元素的 节点文档。

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

3. 令 viewport height 为 视口的高度（不包括滚动条高度，如有），如果没有 视口则为 0。

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

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

6. 如果该元素没有任何关联的 盒，则返回 0 并终止这些步骤。

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

clientTop 属性必须按以下步骤运行：

1. 如果该元素没有关联的 盒，或 盒为内联，返回 0。

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

clientLeft 属性必须按以下步骤运行：

1. 如果该元素没有关联的 盒，或 盒为内联，返回 0。

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

clientWidth 属性必须按以下步骤运行：

1. 如果该元素没有关联的 盒，或 盒为内联，返回 0。

2. 如果该元素是 根元素且其 节点文档不处于 怪异模式，或该元素是 body 元素且其 节点文档处于 怪异模式，则返回 视口宽度（不包括渲染的滚动条宽度，如有）。

3. 返回 未缩放的 内边距边宽度（不包括在 内边距边和 边框边之间渲染的任何滚动条宽度），忽略应用于该元素及其祖先的任何 变换。

clientHeight 属性必须按以下步骤运行：

1. 如果该元素没有关联的 盒，或 盒为内联，返回 0。

2. 如果该元素是 根元素且其 节点文档不处于 怪异模式，或该元素是 body 元素且其 节点文档处于 怪异模式，则返回 视口高度（不包括渲染的滚动条高度，如有）。

3. 返回 未缩放的 内边距边高度（不包括在 内边距边和 边框边之间渲染的任何滚动条高度），忽略应用于该元素及其祖先的任何 变换。

currentCSSZoom 属性必须返回该元素的 有效缩放，如果该元素未被 渲染则返回 1.0。

6.1. Element 滚动成员

7. 对 HTMLElement 接口的扩展

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

scrollParent 属性必须按以下步骤返回结果：

1. 如符合下列任一条件，则返回 null 并终止本算法：

   • 该元素没有关联的 盒。

   • 该元素是 根元素。

   • 该元素是 body 元素。

   • 该元素的 position 属性的计算值为 fixed， 且没有祖先建立了固定定位的 包含块。

2. 令 ancestor 为该元素在扁平树中的包含块，并重复以下子步骤：

   1. 如果 ancestor 是 初始包含块，则返回该元素所属文档的 scrollingElement， 如果未被 closed-shadow-hidden 隐藏，否则返回 null。

   2. 如果 ancestor 未被 closed-shadow-hidden 隐藏， 且是 滚动容器，则终止算法并返回 ancestor。

   3. 如果 ancestor 的 position 属性的计算值为 fixed， 且没有祖先建立了固定定位的 包含块，则终止算法并返回 null。

   4. 令 ancestor 为 ancestor 在扁平树中的包含块。

offsetParent 属性必须按以下步骤返回结果：

1. 如符合下列任一条件，则返回 null 并终止本算法：

   • 该元素没有关联的 盒。

   • 该元素是 根元素。

   • 该元素是 body 元素。

   • 该元素的 position 属性的计算值为 fixed， 且没有祖先建立了固定定位的 包含块。

2. 令 ancestor 为该元素在扁平树中的父节点，并重复以下子步骤：

   1. 如果 ancestor 被 closed-shadow-hidden 隐藏， 且其 position 属性的计算值为 fixed， 且没有祖先建立了固定定位的 包含块，则终止算法并返回 null。

   2. 如果 ancestor 未被 closed-shadow-hidden 隐藏， 且满足下列至少一项，则终止算法并返回 ancestor。

      • 该元素在固定定位的 包含块中，且 ancestor 是固定定位后代的包含块。

      • 该元素不在固定定位的 包含块中，且：

        • ancestor 是绝对定位后代的包含块（无论是否有绝对定位后代）。

        • 它是 body 元素。

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

      • 该元素与 ancestor 的 有效缩放不同。

   3. 如果 ancestor 在扁平树中已无父节点，则终止算法并返回 null。

   4. 令 ancestor 为其在扁平树中的父节点。

offsetTop 属性必须按以下步骤返回结果：

1. 如果该元素是 body 元素，或没有任何关联的 盒，则返回 0 并终止算法。

2. 如果该元素的 offsetParent 为 null，则返回该元素第一个关联 边框边顶部的 未缩放 y 坐标， 相对于 初始包含块原点，忽略应用于该元素及其祖先的任何 变换，并终止算法。

3. 返回以下结果：用该元素第一个关联 边框边顶部的 未缩放 y 坐标 减去 offsetParent 的第一个关联 内边距边顶部的 y 坐标， 相对于 初始包含块原点， 忽略应用于该元素及其祖先的任何 变换。

   注意：由多个行盒组成的内联元素，只考虑其第一个关联 盒。

offsetLeft 属性必须按以下步骤返回结果：

1. 如果该元素是 body 元素，或没有任何关联的 盒，则返回 0 并终止算法。

2. 如果该元素的 offsetParent 为 null，则返回该元素第一个关联 边框边左侧的 未缩放 x 坐标， 相对于 初始包含块原点，忽略应用于该元素及其祖先的任何 变换，并终止算法。

3. 返回以下结果：用该元素第一个关联 边框边左侧的 未缩放 x 坐标 减去 offsetParent 的第一个关联 内边距边左侧的 x 坐标， 相对于 初始包含块原点， 忽略应用于该元素及其祖先的任何 变换。

offsetWidth 属性必须按以下步骤返回结果：

1. 如果该元素没有任何关联的 盒，则返回 0 并终止算法。

2. 返回该元素 主盒生成的所有片段的 边框盒的轴对齐包围盒的 未缩放宽度， 忽略应用于该元素及其祖先的任何 变换。

   如果该元素的 主盒是被 块级后代“分割”的 行内级盒， 还要包含这些 块级后代生成的片段， 除非它们宽度或高度为零。

offsetHeight 属性必须按以下步骤返回结果：

1. 如果该元素没有任何关联的 盒，则返回 0 并终止算法。

2. 返回该元素 主盒生成的所有片段的 边框盒的轴对齐包围盒的 未缩放高度， 忽略应用于该元素及其祖先的任何 变换。

   如果该元素的 主盒是被 块级后代“分割”的 行内级盒， 还要包含这些 块级后代生成的片段， 除非它们宽度或高度为零。

8. 对 HTMLImageElement 接口的扩展

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

x 属性，在获取时，必须返回该元素第一个关联 缩放后的左边 边框边的 x 坐标， 该坐标相对于 初始包含块的原点，忽略应用于该元素及其祖先的 变换，若没有 盒则返回 0。

y 属性，在获取时，必须返回该元素第一个关联 缩放后的顶部 边框边的 y 坐标， 该坐标相对于 初始包含块的原点，忽略应用于该元素及其祖先的 变换，若没有 盒则返回 0。

9. 对 Range 接口的扩展

partial interface Range {
  DOMRectList getClientRects();
  [NewObject] DOMRect getBoundingClientRect();
};

getClientRects() 方法在调用时，如果该 range 不在文档中，必须返回一个空的 DOMRectList 对象，否则返回一个 DOMRectList 对象， 其中包含一组按内容顺序排列的 DOMRect 对象，并满足如下约束：

• 对于 range 选中的每个元素（其父元素未被 range 选中），包含对该元素调用 getClientRects() 返回的边框区域。

• 对于 range 选中或部分选中的每个 Text 节点（包括边界点相同的情况），包含一个 缩放后的 DOMRect 对象（仅针对选中的部分，而不是整个行盒）。这些 DOMRect 的边界通过字体度量计算； 因此，对于横向书写，每个盒子的垂直尺寸由字体的上升和下降决定，水平尺寸由文本的进宽决定。如果 range 覆盖了部分 排版字符单元（如半个代理项对或部分词素簇），则计算相关 DOMRect 时必须包括完整的 排版字符单元。 [CSS-TEXT-3] 会应用祖先的 变换。

注意：DOMRect 对象由 getClientRects() 返回后不是 实时的。

getBoundingClientRect() 方法在调用时，必须返回如下算法结果：

1. 令 list 为对同一个 range 调用 getClientRects() 的结果。

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

3. 如果 list 中所有矩形的宽或高都为零，则返回 list 中的第一个矩形。

4. 否则，返回一个 DOMRect 对象，描述包含 list 中所有宽或高不为零的矩形的最小矩形。

注意：DOMRect 对象由 getBoundingClientRect() 返回后不是 实时的。

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 属性，获取时必须返回事件发生位置相对于 Web公开屏幕区域原点的 x 坐标。

screenY 属性，获取时必须返回事件发生位置相对于 Web公开屏幕区域原点的 y 坐标。

pageX 属性必须按以下步骤：

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

2. 令 offset 为事件关联的 scrollX 属性值（如果有关联的 Window 对象则取其值，否则为0）。

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

pageY 属性必须按以下步骤：

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

2. 令 offset 为事件关联的 scrollY 属性值（如果有关联的 Window 对象则取其值，否则为0）。

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

clientX 属性，获取时必须返回事件发生位置相对于 视口原点的 x 坐标。

clientY 属性，获取时必须返回事件发生位置相对于 视口原点的 y 坐标。

x 属性，获取时必须返回 clientX 的值。

y 属性，获取时必须返回 clientY 的值。

offsetX 属性必须按以下步骤：

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

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

offsetY 属性必须按以下步骤：

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

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

11. 几何

11.1. GeometryUtils 接口

enum CSSBoxType { "margin", "border", "padding", "content" };
dictionary BoxQuadOptions {
  CSSBoxType box = "border";
  GeometryNode relativeTo; // XXX default document (i.e. viewport)
};

dictionary ConvertCoordinateOptions {
  CSSBoxType fromBox = "border";
  CSSBoxType toBox = "border";
};

interface mixin GeometryUtils {
  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 turns into 0
};

Text includes GeometryUtils; // like Range
Element includes GeometryUtils;
CSSPseudoElement includes GeometryUtils;
Document includes GeometryUtils;

typedef (Text or Element or CSSPseudoElement or Document) GeometryNode;

getBoxQuads(options) 方法必须运行以下步骤：

1. DOM 顺序

   p1 = 即使在 RTL 下也是左上

   缩放为 0 时除以零，返回 0x0

   不允许跨 frame，抛出 WrongDocumentError？

   点是被平面化的（3D变换），z=0。类似 getClientRect

   测试块在内联

   伪元素 before/after 是元素的子节点

   viewport box 都一样

convertQuadFromNode(quad, from, options) 方法必须运行以下步骤：

1. ...

convertRectFromNode(rect, from, options) 方法必须运行以下步骤：

1. ...

convertPointFromNode(point, from, options) 方法必须运行以下步骤：

1. ...

12. VisualViewport

12.1. VisualViewport 接口

[Exposed=Window]
interface VisualViewport : EventTarget {
  readonly attribute double offsetLeft;
  readonly attribute double offsetTop;

  readonly attribute double pageLeft;
  readonly attribute double pageTop;

  readonly attribute double width;
  readonly attribute double height;

  readonly attribute double scale;

  attribute EventHandler onresize;
  attribute EventHandler onscroll;
  attribute EventHandler onscrollend;
};

offsetLeft 属性必须运行以下步骤：

1. 如果视觉视口的关联文档不是完全激活，返回 0。

2. 否则，返回视觉视口左边缘到布局视口左边缘的偏移。

offsetTop 属性必须运行以下步骤：

1. 如果视觉视口的关联文档不是完全激活，返回 0。

2. 否则，返回视觉视口上边缘到布局视口上边缘的偏移。

pageLeft 属性必须运行以下步骤：

1. 如果视觉视口的关联文档不是完全激活，返回 0。

2. 否则，返回视觉视口左边缘到初始包含块的布局视口的文档的左边缘的偏移。

pageTop 属性必须运行以下步骤：

1. 如果视觉视口的关联文档不是完全激活，返回 0。

2. 否则，返回视觉视口上边缘到初始包含块的布局视口的文档的上边缘的偏移。

width 属性必须运行以下步骤：

1. 如果视觉视口的关联文档不是完全激活，返回 0。

2. 否则，返回视觉视口的宽度，排除任何渲染的固定在视觉视口上的垂直经典滚动条的宽度。

注意：由于该值以 CSS 像素返回，如果 页面缩放或 缩放因子增加，则该值会减小。

注意：固定在视觉视口上的滚动条不会随着视觉视口缩放和移动而改变尺寸或位置。由于该值是 CSS 像素，排除滚动条宽度时，用户代理必须按 CSS 像素测量滚动条大小。也就是说，排除量在放大时减少，缩小时增加。

height 属性必须运行以下步骤：

1. 如果视觉视口的关联文档不是完全激活，返回 0。

2. 否则，返回视觉视口的高度，排除任何渲染的固定在视觉视口上的水平经典滚动条的高度。

scale 属性必须运行以下步骤：

1. 如果视觉视口的关联文档不是完全激活，返回 0 并终止步骤。

2. 如果没有输出设备，返回 1 并终止步骤。

3. 否则，返回视觉视口的缩放因子。

onresize 是 事件处理器 IDL 属性，用于 resize 事件。

onscroll 是 事件处理器 IDL 属性，用于 scroll 事件。

onscrollend 是 事件处理器 IDL 属性，用于 scrollend 事件。

13. 事件

13.1. 视口缩放

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

当要求对 Document doc 运行缩放步骤时，执行以下步骤：

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

2. 如果与 doc 关联的 VisualViewport 的 scale、width 或 height 属性自上次运行这些步骤以来发生了变化， 触发一个名为 resize 的事件， 目标是 VisualViewport。

13.2. 滚动

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

每个 Document 关联一个 待触发滚动事件目标列表，初始为空。

每个 Document 关联一个 待触发滚动结束事件目标列表，初始为空。

每当 视口被滚动（无论是因用户交互还是 API），用户代理必须运行以下步骤：

1. 令 doc 为 视口关联的 Document。

2. 如果 doc 是 捕捉容器， 则为 doc 以 doc的最终捕捉目标（块轴为 newBlockTarget，行内轴为 newInlineTarget）运行更新 scrollsnapchanging 目标的步骤。

3. 如果 doc 已在其 待触发滚动事件目标列表中，则中止这些步骤。

4. 将 doc 添加到其 待触发滚动事件目标列表。

每当一个元素被滚动（无论是因用户交互还是 API），用户代理必须运行以下步骤：

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

2. 如果该元素是 捕捉容器， 则为该元素以其最终捕捉目标（块轴为 newBlockTarget，行内轴为 newInlineTarget）运行更新 scrollsnapchanging 目标的步骤。

3. 如果该元素已在 doc 的 待触发滚动事件目标列表中，则中止这些步骤。

4. 将该元素添加到 doc 的 待触发滚动事件目标列表。

每当 视觉视口被滚动（无论是因用户交互还是 API），用户代理必须运行以下步骤：

1. 令 vv 为被滚动的 VisualViewport 对象。

2. 令 doc 为 vv 的 关联文档。

3. 如果 vv 已在 doc 的 待触发滚动事件目标列表中，则中止这些步骤。

4. 将 vv 添加到 doc 的 待触发滚动事件目标列表。

当要求对 Document doc 运行滚动事件步骤时，执行以下步骤：

1. 为 doc 运行分发待触发 scrollsnapchanging 事件的步骤。

2. 对于 doc 的 待触发滚动事件目标列表中的每个 target，按添加顺序运行以下子步骤：

   1. 如果 target 是 Document， 触发名为 scroll 的冒泡事件于 target。

   2. 否则，触发名为 scroll 的事件于 target。

3. 清空 doc 的 待触发滚动事件目标列表。

4. 为 doc 运行分发待触发 scrollsnapchange 事件的步骤。

每当滚动完成时，用户代理必须运行以下步骤：

scrollend 事件的分发顺序是什么？是根据滚动开始顺序还是滚动完成顺序？

1. 对于每个被滚动的滚动盒 box：

   1. 如果 box 属于 视口，令 doc 为 视口关联的 Document，target 为 视口。 如果 box 属于 VisualViewport，令 doc 为 VisualViewport 的 关联文档，target 为 VisualViewport。 否则，box 属于一个元素，令 doc 为元素的 节点文档，target 为该元素。

   2. 如果 box 属于 捕捉容器 snapcontainer， 为 snapcontainer 运行更新 scrollsnapchange 目标的步骤。

   3. 如果 target 已在 doc 的 待触发滚动结束事件目标列表中，则中止这些步骤。

   4. 将 target 添加到 doc 的 待触发滚动结束事件目标列表。

2. 为 doc 运行分发待触发 scrollsnapchange 目标的步骤。

3. 对于 doc 的 待触发滚动结束事件目标列表中的每个 target，按添加顺序运行以下子步骤：

   1. 如果 target 是 Document， 触发名为 scrollend 的冒泡事件于 target。

   2. 否则，触发名为 scrollend 的事件于 target。

4. 清空 doc 的 待触发滚动结束事件目标列表。

13.3. 事件摘要

本节为非规范性内容。

14. 布局后状态快照

部分 CSS 特性会将布局后的状态（如滚动位置）用作下一轮样式和布局更新的输入。

当要求对 Document doc 运行布局后状态快照步骤时，执行以下步骤：

1. 对每个需要快照布局后状态的 CSS 特性，在 doc 中快照相关状态。

快照的状态由其他规范定义。这些步骤不得使 doc 或其他 Document 失效，以至于其他布局后快照步骤能观察到此次快照。因此，快照的顺序不应影响结果。

15. 隐私注意事项

Screen 接口会暴露用户显示配置的信息，可能被用于指纹识别算法。用户代理可选择隐藏或量化屏幕尺寸或配置信息，以保护用户隐私。

MouseEvent 包含事件的屏幕相对坐标信息。用户代理可以将这些属性设置为模糊真实屏幕位置的值，以保护用户隐私。

16. 安全注意事项

本规范暂无新的安全注意事项被报告。

17. 变更

本节记录了本规范各版本之间的一些变更。该节并不详尽。一般不会列出 bug 修复和编辑性变更。

自 2016年3月17日工作草案之后的变更

• 增加 Simon Fraser 和 Emilio Cobos Álvarez 为现编辑，Simon Pieters 移至前编辑。

• 明确 getClientRects() 如何处理 排版字符单元。

• 更改了 getBoundingClientRect() （针对 Element）和 getBoundingClientRect() （针对 Range）处理空矩形的方式。

• 更改了 Shadow DOM 下 offsetParent 的定义。

• 允许 UA 出于隐私原因对 Screen 属性撒谎。

• colorDepth 和 pixelDepth 改为返回真实值。

• 将“CSS 像素”定义为 [CSS-VALUES]。

• 更改了 ScrollIntoViewOptions 的默认值为 start 和 nearest，并稍微调整了 scrollIntoView() 行为。

• 新增 screenLeft 和 screenTop 作为 screenX 和 screenY 的别名。

• 用 block-end 和 inline-end 重新定义溢出方向。

• 将 resizeTo() 参数重命名为 width 和 height

• 将脚本触发的滚动捕捉添加到受 scroll-behavior 影响的滚动列表。

• 修正了术语章节中的逻辑错误。

• 新增“安全注意事项”和“隐私注意事项”章节

• 将 scroll-behavior 属性移至 [CSS-OVERFLOW-3]

• 调整了 offsetWidth 和 offsetHeight 的算法。

• 新增 checkVisibility() 方法至 Element。

• 将 scrollend 事件从 WICG overscroll-scrollend-events 移至 [CSSOM-VIEW-1]，并补充了处理细节。

• 为 getBoundingClientRect() 新增“获取包围盒”算法。

• 引入了 VisualViewport API 及相关概念。

• 扩展了滚动到可视区域算法，使其也支持 Ranges。

• 明确了各种 API 返回缩放或未缩放尺寸与 zoom 属性的关系。

• 在多种滚动 API 中考虑了滚动捕捉和滚动目标。

• 新增 currentCSSZoom 属性到 Element。

• 为 caretPositionFromPoint() 方法新增了 options 参数。

• 从 CaretPosition 接口中移除了 caret range 概念。

• 定义了布局后快照机制。

• 各类滚动算法现在可接受伪元素。

• 在 ScrollIntoViewOptions 中新增了 container 选项。

• 新增了 scrollParent 属性。

• Pinch zoom 被重命名为 scale factor。

自 2013年12月17日工作草案之后的变更

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

• scrollTop 和 scrollLeft 在 Element 上不再接收对象参数；新增了 scroll()、 scrollTo() 和 scrollBy() 方法。

• scrollWidth、 scrollHeight、 clientTop、 clientLeft、 clientWidth、 clientHeight 在 Element 上改回返回整数。

• 移除了 DOMRectList 接口。

• scrollingElement 属性新增到 Document。

• 部分 Window 上的只读属性添加了 [Replaceable] 扩展属性。

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

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

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

• scrollIntoView() 方法在 Element 和 scroll()、 scrollTo()、 scrollBy() 方法在 Window 上，均以相关字典为第一个参数。

• MediaQueryList 接口改为使用常规事件 API，并将 addListener() 以该方式定义。

• 新增“变更历史”章节。

• 将 Glenn Adams 移至前编辑。

自 2011年8月4日工作草案之后的变更

• 新增 Simon Pieters 和 Glenn Adams 为编辑，并将 Anne van Kesteren 移至前编辑。

• 引入了 scroll-behavior CSS 属性。

• 术语中增加了 块流方向和 行内基准方向（来自 [CSS-WRITING-MODES-3]）。

• 新增了关于缩放的章节。

• 为 moveTo()、 moveBy()、 resizeTo()、 resizeBy() 方法添加到 Window。

• 为 devicePixelRatio 属性添加到 Window。

• 引入了 ScrollOptions 字典，并为滚动方法增加了 options 参数。

• 为 devicePixelRatio 属性添加到 Window。

• 为 open() 方法新增 features 参数。

• 为 elementsFromPoint() 方法添加到 Document。

• 为 getClientRect() 方法添加到 CaretPosition。

• 引入了 GeometryUtils 接口的初稿。

• 更改了 innerWidth、 innerHeight 等，改用 double。

• 现在已支持 CSS 变换。

• 用 DOMRect 取代了 ClientRect。

• 定义了 scroll 和 resize 事件的触发行为。

• 更改了 colorDepth 和 pixelDepth 始终返回 24。

自 2009年8月4日工作草案之后的变更

• 移除了其他规范冗余的术语定义，明确单位（例如 CSS 像素）和内容/文档内容的区别。

• 引入了 MediaQueryList 接口。

• 将 Media 的 matchMedium() 方法移至 Window 接口，重命名为 matchMedia()，并更改返回类型为 MediaQueryList。

• 移除了 AbstractView 和 Media 接口。

• 移除了 DocumentView 接口，并将 elementFromPoint() 和 caretRangeFromPoint() 方法移至 Document 接口。

• 将 caretRangeFromPoint() 方法重命名为 caretPositionFromPoint()。

• 引入了 CaretPosition 接口，并将 caretPositionFromPoint() 的返回类型更改为 CaretPosition。

• 为 scrollIntoView() 方法添加到 Element 接口。

自 2008年2月22日工作草案之后的变更

• 移除了 WindowView 接口，并将其属性和方法移至 AbstractView 和继承的 ScreenView 接口。

• 为 AbstractView 添加了 document IDL 属性。

• 为 scroll()、 scrollTo()、 scrollBy() 方法添加到 ScreenView 接口。

• 移除了 ElementView 接口，并将其属性和方法移至 Element 和 HTMLElement 接口。

• 为 defaultView IDL 属性和 caretRangeFromPoint() 方法添加到 DocumentView 接口。

• 移除了 RangeView 接口，改为直接扩展 Range 接口。

• 移除了 MouseEventView 接口，改为直接扩展 MouseEvent 接口。

• 将 TextRectangleList 接口重命名为 ClientRectList，并将 item() 方法更改为索引 getter。

• 将 TextRectangle 接口重命名为 ClientRect，并添加了 width 和 height 属性。

18. 致谢

编辑们感谢 Alan Stearns、Alexey Feldgendler、Antonio Gomes、Björn Höhrmann、Boris Zbarsky、Chris Rebert、Corey Farwell、Dan Bates、David Vest、Elliott Sprehn、Garrett Smith、Henrik Andersson、Hallvord R. M. Steen、Kang-Hao Lu、Koji Ishii、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 浏览器中广泛部署并实现本规范中许多特性的微软员工。