[anchor-position] Make 'anchor-scroll' internal
See https://github.com/w3c/csswg-drafts/issues/8675 for context.
This patch:
1. Changes the implementation to longer expose `anchor-scroll` as a
CSS property, but use the target of `anchor-default` for scrolling
purposes
2. Coverts tests and UA style to stop using `anchor-scroll`. The usage
is either simply removed if there's already a default anchor, or
changed to use `anchor-default` otherwise. The cases that assume
different `anchor-scroll` and `anchor-default` targets are removed
since they will no longer be a possible.
To minimize diff, this patch focuses on the implementation change.
A follow up patch will convert all in-code documentations and rename
existing classes/functions to stop referring to the functionality as
"anchor-scroll", and hence, stop the naming confusion.
Bug: 1463085
Change-Id: I3cb2000de67b2b81b4edf8b9a1303de682946232
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4662290
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1168282}
diff --git a/css/css-anchor-position/anchor-position-top-layer-001.html b/css/css-anchor-position/anchor-position-top-layer-001.html
index ffa1c1c..0554595 100644
--- a/css/css-anchor-position/anchor-position-top-layer-001.html
+++ b/css/css-anchor-position/anchor-position-top-layer-001.html
@@ -21,7 +21,7 @@
width: 100px;
height: 100px;
background: lime;
- anchor-scroll: --a;
+ anchor-default: --a;
outline: none;
}
diff --git a/css/css-anchor-position/anchor-position-top-layer-002.html b/css/css-anchor-position/anchor-position-top-layer-002.html
index 849558f..a87a9d7 100644
--- a/css/css-anchor-position/anchor-position-top-layer-002.html
+++ b/css/css-anchor-position/anchor-position-top-layer-002.html
@@ -21,7 +21,7 @@
width: 100px;
height: 100px;
background: lime;
- anchor-scroll: --a;
+ anchor-default: --a;
outline: none;
}
diff --git a/css/css-anchor-position/anchor-position-top-layer-003.html b/css/css-anchor-position/anchor-position-top-layer-003.html
index 5012b52..96d5219 100644
--- a/css/css-anchor-position/anchor-position-top-layer-003.html
+++ b/css/css-anchor-position/anchor-position-top-layer-003.html
@@ -21,7 +21,7 @@
width: 100px;
height: 100px;
background: lime;
- anchor-scroll: --a;
+ anchor-default: --a;
outline: none;
}
diff --git a/css/css-anchor-position/anchor-position-top-layer-004.html b/css/css-anchor-position/anchor-position-top-layer-004.html
index 84e9296..c986e3f 100644
--- a/css/css-anchor-position/anchor-position-top-layer-004.html
+++ b/css/css-anchor-position/anchor-position-top-layer-004.html
@@ -21,7 +21,7 @@
width: 100px;
height: 100px;
background: lime;
- anchor-scroll: --a;
+ anchor-default: --a;
outline: none;
}
diff --git a/css/css-anchor-position/anchor-position-top-layer-005.html b/css/css-anchor-position/anchor-position-top-layer-005.html
index 6adf896..cf39c77 100644
--- a/css/css-anchor-position/anchor-position-top-layer-005.html
+++ b/css/css-anchor-position/anchor-position-top-layer-005.html
@@ -22,7 +22,7 @@
width: 100px;
height: 100px;
background: lime;
- anchor-scroll: --a;
+ anchor-default: --a;
}
body {
diff --git a/css/css-anchor-position/anchor-position-top-layer-006.html b/css/css-anchor-position/anchor-position-top-layer-006.html
index d2a39ea..c13284b 100644
--- a/css/css-anchor-position/anchor-position-top-layer-006.html
+++ b/css/css-anchor-position/anchor-position-top-layer-006.html
@@ -22,7 +22,7 @@
width: 100px;
height: 100px;
background: lime;
- anchor-scroll: --a;
+ anchor-default: --a;
}
body {
diff --git a/css/css-anchor-position/anchor-scroll-001.html b/css/css-anchor-position/anchor-scroll-001.html
index fa42e33..8609795 100644
--- a/css/css-anchor-position/anchor-scroll-001.html
+++ b/css/css-anchor-position/anchor-scroll-001.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<title>Basic of anchor-scroll: anchored elements should be "pinned" to the anchor when anchor is scrolled</title>
+<title>Basic of anchor positioned scrolling: anchored elements should be "pinned" to the anchor when anchor is scrolled</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
<link rel="match" href="reference/anchor-scroll-ref.html">
@@ -40,7 +40,7 @@
position: absolute;
left: anchor(--anchor left);
bottom: anchor(--anchor top);
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
}
#outer-anchored {
@@ -48,7 +48,7 @@
position: absolute;
left: anchor(--anchor left);
top: anchor(--anchor bottom);
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
}
</style>
diff --git a/css/css-anchor-position/anchor-scroll-002.html b/css/css-anchor-position/anchor-scroll-002.html
index 88e8a75..8ef6f50 100644
--- a/css/css-anchor-position/anchor-scroll-002.html
+++ b/css/css-anchor-position/anchor-scroll-002.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<title>Tests anchor-scroll resolving name conflicts</title>
+<title>Tests anchor positioned scrolling resolving name conflicts</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#scroll">
<link rel="author" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
@@ -45,7 +45,7 @@
height: 50px;
top: anchor(--a1 top);
left: anchor(--a1 right);
- anchor-scroll: --a1;
+ anchor-default: --a1;
}
</style>
diff --git a/css/css-anchor-position/anchor-scroll-003.html b/css/css-anchor-position/anchor-scroll-003.html
index 87d8153..c1b31c0 100644
--- a/css/css-anchor-position/anchor-scroll-003.html
+++ b/css/css-anchor-position/anchor-scroll-003.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<title>Tests anchor-scroll with fragmented containing block</title>
+<title>Tests anchor positioned scrolling with fragmented containing block</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#scroll">
<link rel="author" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
@@ -47,7 +47,7 @@
position: absolute;
left: anchor(--a left);
bottom: anchor(--a top);
- anchor-scroll: --a;
+ anchor-default: --a;
width: 50px;
height: 50px;
background: lime;
@@ -72,5 +72,5 @@
let targetRect = target.getBoundingClientRect();
assert_equals(targetRect.top, 30);
-}, 'anchor-scroll should work in fragmented containing block');
+}, 'Scrolling should work in fragmented containing block');
</script>
diff --git a/css/css-anchor-position/anchor-scroll-004.html b/css/css-anchor-position/anchor-scroll-004.html
index ce66a27..d082791 100644
--- a/css/css-anchor-position/anchor-scroll-004.html
+++ b/css/css-anchor-position/anchor-scroll-004.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<meta charset="utf-8">
-<title>Tests anchor-scroll with relatively positioned inline containers</title>
+<title>Tests anchor positioned scrolling with relatively positioned inline containers</title>
<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/#scroll">
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="stylesheet" href="/fonts/ahem.css">
@@ -32,7 +32,7 @@
.target {
position: absolute;
- anchor-scroll: --a;
+ anchor-default: --a;
top: anchor(--a bottom);
left: anchor(--a left);
color: lime;
diff --git a/css/css-anchor-position/anchor-scroll-005.html b/css/css-anchor-position/anchor-scroll-005.html
index 82f3a23..a9a7d24 100644
--- a/css/css-anchor-position/anchor-scroll-005.html
+++ b/css/css-anchor-position/anchor-scroll-005.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<title>Tests 'anchor-scroll' with anchor in fixed-positioned scroller</title>
+<title>Tests scrolling with anchor in fixed-positioned scroller</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#scroll">
<link rel="author" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
@@ -33,7 +33,7 @@
width: 100px;
height: 100px;
bottom: anchor(--a top);
- anchor-scroll: --a;
+ anchor-default: --a;
background: lime;
}
</style>
diff --git a/css/css-anchor-position/anchor-scroll-basics.html b/css/css-anchor-position/anchor-scroll-basics.html
deleted file mode 100644
index 6b2d967..0000000
--- a/css/css-anchor-position/anchor-scroll-basics.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<title>Tests basics of the 'anchor-scroll' property</title>
-<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-scroll">
-<link rel="author" href="mailto:xiaochengh@chromium.org">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/css/support/parsing-testcommon.js"></script>
-<script src="/css/support/computed-testcommon.js"></script>
-<script src="/css/support/inheritance-testcommon.js"></script>
-<script src="/css/support/interpolation-testcommon.js"></script>
-
-<div id="container">
- <div id="target"></div>
-</div>
-
-<script>
-// anchor-scroll: none | default | <anchor-element>
-test_valid_value('anchor-scroll', 'none');
-test_valid_value('anchor-scroll', 'default');
-test_valid_value('anchor-scroll', 'implicit');
-test_valid_value('anchor-scroll', '--foo');
-test_invalid_value('anchor-scroll', 'foo-bar');
-test_invalid_value('anchor-scroll', '--foo --bar')
-test_invalid_value('anchor-scroll', '--foo, --bar')
-test_invalid_value('anchor-scroll', '100px');
-test_invalid_value('anchor-scroll', '100%');
-
-// Computed value: as specified
-test_computed_value('anchor-scroll', 'none');
-test_computed_value('anchor-scroll', 'default');
-test_computed_value('anchor-scroll', 'implicit');
-test_computed_value('anchor-scroll', '--foo');
-
-// Initial: default
-// Inherited: no
-assert_not_inherited('anchor-scroll', 'default', '--foo');
-
-// Animation type: discrete
-test_no_interpolation({
- property: 'anchor-scroll',
- from: '--foo',
- to: 'none',
-});
-</script>
diff --git a/css/css-anchor-position/anchor-scroll-composited-scrolling-001-crash.html b/css/css-anchor-position/anchor-scroll-composited-scrolling-001-crash.html
index d8fa382..005a273 100644
--- a/css/css-anchor-position/anchor-scroll-composited-scrolling-001-crash.html
+++ b/css/css-anchor-position/anchor-scroll-composited-scrolling-001-crash.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<title>Tests that anchor-scroll doesn't crash renderer when anchor is in a scroller whose content doesn't overflow</title>
+<title>Tests that scrolling doesn't crash renderer when anchor is in a scroller whose content doesn't overflow</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
<style>
@@ -23,7 +23,7 @@
#anchored {
position: absolute;
- anchor-scroll: --a;
+ anchor-default: --a;
left: anchor(--a left);
bottom: anchor(--a top);
width: 100px;
diff --git a/css/css-anchor-position/anchor-scroll-composited-scrolling-002-crash.html b/css/css-anchor-position/anchor-scroll-composited-scrolling-002-crash.html
index 6e0af9f..83ce146 100644
--- a/css/css-anchor-position/anchor-scroll-composited-scrolling-002-crash.html
+++ b/css/css-anchor-position/anchor-scroll-composited-scrolling-002-crash.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html class="test-wait">
-<title>Tests that anchor-scroll doesn't crash renderer when scroller's content no longer overflows</title>
+<title>Tests that scrolling doesn't crash renderer when scroller's content no longer overflows</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
@@ -23,7 +23,7 @@
position: fixed;
top: anchor(--a bottom);
left: anchor(--a left);
- anchor-scroll: --a;
+ anchor-default: --a;
}
</style>
diff --git a/css/css-anchor-position/anchor-scroll-composited-scrolling-003-crash.html b/css/css-anchor-position/anchor-scroll-composited-scrolling-003-crash.html
index 0463733..594c844 100644
--- a/css/css-anchor-position/anchor-scroll-composited-scrolling-003-crash.html
+++ b/css/css-anchor-position/anchor-scroll-composited-scrolling-003-crash.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html class="test-wait">
-<title>Tests that anchor-scroll doesn't crash renderer when scroller becomes non-scroller</title>
+<title>Tests that scrolling doesn't crash renderer when scroller becomes non-scroller</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
@@ -23,7 +23,7 @@
position: fixed;
top: anchor(--a bottom);
left: anchor(--a left);
- anchor-scroll: --a;
+ anchor-default: --a;
}
</style>
diff --git a/css/css-anchor-position/anchor-scroll-composited-scrolling-004-crash.html b/css/css-anchor-position/anchor-scroll-composited-scrolling-004-crash.html
index 12e7af0..226a1b0 100644
--- a/css/css-anchor-position/anchor-scroll-composited-scrolling-004-crash.html
+++ b/css/css-anchor-position/anchor-scroll-composited-scrolling-004-crash.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html class="test-wait">
-<title>Tests that anchor-scroll doesn't crash renderer when scroller's content no longer overflows, and target precedes scroller in DOM</title>
+<title>Tests that scrolling doesn't crash renderer when scroller's content no longer overflows, and target precedes scroller in DOM</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
@@ -23,7 +23,7 @@
position: fixed;
top: anchor(--a bottom);
left: anchor(--a left);
- anchor-scroll: --a;
+ anchor-default: --a;
}
</style>
diff --git a/css/css-anchor-position/anchor-scroll-composited-scrolling-005-crash.html b/css/css-anchor-position/anchor-scroll-composited-scrolling-005-crash.html
index 0a4427a..639e2e0 100644
--- a/css/css-anchor-position/anchor-scroll-composited-scrolling-005-crash.html
+++ b/css/css-anchor-position/anchor-scroll-composited-scrolling-005-crash.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html class="test-wait">
-<title>Tests that anchor-scroll doesn't crash renderer with `overflow: hidden` scroller</title>
+<title>Tests that scrolling doesn't crash renderer with `overflow: hidden` scroller</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
@@ -23,7 +23,7 @@
position: fixed;
top: anchor(--a bottom);
left: anchor(--a left);
- anchor-scroll: --a;
+ anchor-default: --a;
}
</style>
diff --git a/css/css-anchor-position/anchor-scroll-composited-scrolling-006.html b/css/css-anchor-position/anchor-scroll-composited-scrolling-006.html
index 6b5f268..6e57acc 100644
--- a/css/css-anchor-position/anchor-scroll-composited-scrolling-006.html
+++ b/css/css-anchor-position/anchor-scroll-composited-scrolling-006.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html class="reftest-wait">
-<title>Tests anchor-scroll element paint order in composited scrolling</title>
+<title>Tests anchor-positioned element paint order in composited scrolling</title>
<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/#scroll">
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="match" href="reference/anchor-scroll-composited-scrolling-006-ref.html">
@@ -29,7 +29,7 @@
background: red;
left: 0;
bottom: anchor(--a top);
- anchor-scroll: --a;
+ anchor-default: --a;
}
#overlap {
position: absolute;
diff --git a/css/css-anchor-position/anchor-scroll-fallback-position-001.html b/css/css-anchor-position/anchor-scroll-fallback-position-001.html
index a9a5d8c..04518e5 100644
--- a/css/css-anchor-position/anchor-scroll-fallback-position-001.html
+++ b/css/css-anchor-position/anchor-scroll-fallback-position-001.html
@@ -35,7 +35,7 @@
#anchored {
position: absolute;
background: green;
- anchor-scroll: --a;
+ anchor-default: --a;
position-fallback: --fallback;
}
diff --git a/css/css-anchor-position/anchor-scroll-fallback-position-002.html b/css/css-anchor-position/anchor-scroll-fallback-position-002.html
index e51f675..f30c35d 100644
--- a/css/css-anchor-position/anchor-scroll-fallback-position-002.html
+++ b/css/css-anchor-position/anchor-scroll-fallback-position-002.html
@@ -31,7 +31,7 @@
width: 100px;
height: 100px;
background: green;
- anchor-scroll: --a;
+ anchor-default: --a;
top: anchor(--a top);
position-fallback: --pf;
}
diff --git a/css/css-anchor-position/anchor-scroll-fallback-position-003.html b/css/css-anchor-position/anchor-scroll-fallback-position-003.html
index ae212f9..60bc9b9 100644
--- a/css/css-anchor-position/anchor-scroll-fallback-position-003.html
+++ b/css/css-anchor-position/anchor-scroll-fallback-position-003.html
@@ -38,7 +38,7 @@
width: 100px;
height: 100px;
background: green;
- anchor-scroll: --a;
+ anchor-default: --a;
position-fallback: --pf;
}
diff --git a/css/css-anchor-position/anchor-scroll-fallback-position-004.html b/css/css-anchor-position/anchor-scroll-fallback-position-004.html
index 0227fa7..99e4f9c 100644
--- a/css/css-anchor-position/anchor-scroll-fallback-position-004.html
+++ b/css/css-anchor-position/anchor-scroll-fallback-position-004.html
@@ -33,7 +33,7 @@
width: 100px;
height: 100px;
background: green;
- anchor-scroll: --a;
+ anchor-default: --a;
position-fallback: --pf;
}
diff --git a/css/css-anchor-position/anchor-scroll-fallback-position-005.html b/css/css-anchor-position/anchor-scroll-fallback-position-005.html
index 3dedd4d..0adfe08 100644
--- a/css/css-anchor-position/anchor-scroll-fallback-position-005.html
+++ b/css/css-anchor-position/anchor-scroll-fallback-position-005.html
@@ -32,7 +32,7 @@
width: 100px;
height: 100px;
background: green;
- anchor-scroll: --a;
+ anchor-default: --a;
top: anchor(--a top);
position-fallback: --pf;
}
diff --git a/css/css-anchor-position/anchor-scroll-fallback-position-006.html b/css/css-anchor-position/anchor-scroll-fallback-position-006.html
index aa5f7c0..b4a1a24 100644
--- a/css/css-anchor-position/anchor-scroll-fallback-position-006.html
+++ b/css/css-anchor-position/anchor-scroll-fallback-position-006.html
@@ -28,7 +28,7 @@
width: 100px;
height: 100px;
background: green;
- anchor-scroll: --a;
+ anchor-default: --a;
position-fallback: --pf;
}
diff --git a/css/css-anchor-position/anchor-scroll-fallback-position-007.html b/css/css-anchor-position/anchor-scroll-fallback-position-007.html
index cce0a74..baa283b 100644
--- a/css/css-anchor-position/anchor-scroll-fallback-position-007.html
+++ b/css/css-anchor-position/anchor-scroll-fallback-position-007.html
@@ -32,7 +32,7 @@
width: 100px;
height: 100px;
background: green;
- anchor-scroll: --a;
+ anchor-default: --a;
position-fallback: --pf;
}
diff --git a/css/css-anchor-position/anchor-scroll-fallback-position-008.html b/css/css-anchor-position/anchor-scroll-fallback-position-008.html
index 1df6a7a..ae625d5 100644
--- a/css/css-anchor-position/anchor-scroll-fallback-position-008.html
+++ b/css/css-anchor-position/anchor-scroll-fallback-position-008.html
@@ -33,7 +33,7 @@
width: 100px;
height: 100px;
background: green;
- anchor-scroll: --a;
+ anchor-default: --a;
position-fallback: --pf;
}
diff --git a/css/css-anchor-position/anchor-scroll-fallback-position-009.html b/css/css-anchor-position/anchor-scroll-fallback-position-009.html
index c4bf76d..b355d47 100644
--- a/css/css-anchor-position/anchor-scroll-fallback-position-009.html
+++ b/css/css-anchor-position/anchor-scroll-fallback-position-009.html
@@ -32,7 +32,7 @@
width: 100px;
height: 100px;
background: green;
- anchor-scroll: --a;
+ anchor-default: --a;
position-fallback: --pf;
}
diff --git a/css/css-anchor-position/anchor-scroll-fallback-position-010.html b/css/css-anchor-position/anchor-scroll-fallback-position-010.html
index ace94a0..a0dd599 100644
--- a/css/css-anchor-position/anchor-scroll-fallback-position-010.html
+++ b/css/css-anchor-position/anchor-scroll-fallback-position-010.html
@@ -33,7 +33,7 @@
width: 100px;
height: 100px;
background: green;
- anchor-scroll: --a;
+ anchor-default: --a;
position-fallback: --pf;
}
diff --git a/css/css-anchor-position/anchor-scroll-fallback-position-011.html b/css/css-anchor-position/anchor-scroll-fallback-position-011.html
index 722c456..98fa4b5 100644
--- a/css/css-anchor-position/anchor-scroll-fallback-position-011.html
+++ b/css/css-anchor-position/anchor-scroll-fallback-position-011.html
@@ -45,7 +45,7 @@
width: 100px;
height: 100px;
background: green;
- anchor-scroll: --a;
+ anchor-default: --a;
position-fallback: --pf;
}
diff --git a/css/css-anchor-position/anchor-scroll-fixedpos.html b/css/css-anchor-position/anchor-scroll-fixedpos.html
index ee7d226..a32ef3f 100644
--- a/css/css-anchor-position/anchor-scroll-fixedpos.html
+++ b/css/css-anchor-position/anchor-scroll-fixedpos.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<title>Tests that anchor-scroll adjusts location of fixed-positioned elements correctly</title>
+<title>Tests that scroll adjustments of fixed-positioned elements are applied correctly</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
<link rel="match" href="reference/anchor-scroll-fixedpos-ref.html">
@@ -22,7 +22,7 @@
#anchored {
position: fixed;
- anchor-scroll: --a1;
+ anchor-default: --a1;
left: anchor(--a1 right);
top: anchor(--a1 top);
background: green;
diff --git a/css/css-anchor-position/anchor-scroll-js-expose.html b/css/css-anchor-position/anchor-scroll-js-expose.html
index f19d010..1ef44d0 100644
--- a/css/css-anchor-position/anchor-scroll-js-expose.html
+++ b/css/css-anchor-position/anchor-scroll-js-expose.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
-<title>Tests that anchor element's actual rendered location is property exposed via JS APIs under anchor-scroll</title>
-<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-scroll">
+<title>Tests that anchored element's actual rendered location is property exposed via JS APIs under scrolling</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#scroll">
<link rel="author" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
@@ -35,7 +35,7 @@
bottom: anchor(--anchor top);
width: 100px;
height: 100px;
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
background-color: green;
}
</style>
@@ -50,11 +50,11 @@
<script>
promise_setup(async () => {
// Move both the anchor and the anchored elements into the visible area of the
- // scroller. This also runs layout to setup an empty anchor-scroll snapshot.
+ // scroller. This also runs layout to setup an empty scroll snapshot.
scroller.scrollTop = 300;
scroller.scrollLeft = 1300;
- // Ensure up-to-date anchor-scroll snapshot.
+ // Ensure up-to-date scroll snapshot.
await new Promise(resolve => requestAnimationFrame(resolve));
});
@@ -85,5 +85,5 @@
resolve();
});
observer.observe(anchored);
-}), 'IntersectionObserver should fire when anchor-scroll moves element into visible area');
+}), 'IntersectionObserver should fire when anchored element is moved into visible area');
</script>
diff --git a/css/css-anchor-position/anchor-scroll-nested.html b/css/css-anchor-position/anchor-scroll-nested.html
index 964b02a..557f748 100644
--- a/css/css-anchor-position/anchor-scroll-nested.html
+++ b/css/css-anchor-position/anchor-scroll-nested.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html class="reftest-wait">
-<title>Tests anchor-scroll with nested scroll containers</title>
+<title>Tests anchor positioning with nested scroll containers</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
<link rel="match" href="reference/anchor-scroll-nested-ref.html">
@@ -41,7 +41,7 @@
width: 50px;
height: 50px;
left: anchor(--anchor left);
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
}
.above {
diff --git a/css/css-anchor-position/anchor-scroll-update-001.html b/css/css-anchor-position/anchor-scroll-update-001.html
index 9400136..f11797e 100644
--- a/css/css-anchor-position/anchor-scroll-update-001.html
+++ b/css/css-anchor-position/anchor-scroll-update-001.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html class="reftest-wait">
-<title>Basic of anchor-scroll: anchored elements should keep "pinned" to the anchor during anchor scroll updates</title>
+<title>Anchored elements should keep "pinned" to the anchor during scroll updates</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
<link rel="match" href="reference/anchor-scroll-ref.html">
@@ -41,7 +41,7 @@
position: absolute;
left: anchor(--anchor left);
bottom: anchor(--anchor top);
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
}
#outer-anchored {
@@ -49,7 +49,7 @@
position: absolute;
left: anchor(--anchor left);
top: anchor(--anchor bottom);
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
}
</style>
diff --git a/css/css-anchor-position/anchor-scroll-update-002.html b/css/css-anchor-position/anchor-scroll-update-002.html
index 4e8fcbe..1944795 100644
--- a/css/css-anchor-position/anchor-scroll-update-002.html
+++ b/css/css-anchor-position/anchor-scroll-update-002.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html class="reftest-wait">
-<title>Basic of anchor-scroll: anchored elements should update location on `anchor-scroll` property changes</title>
+<title>Anchored elements should update location on `anchor-default` property changes</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
<link rel="match" href="reference/anchor-scroll-ref.html">
@@ -75,8 +75,8 @@
async function runTest() {
await raf();
await raf();
- document.getElementById('inner-anchored').style.anchorScroll = '--anchor';
- document.getElementById('outer-anchored').style.anchorScroll = '--anchor';
+ document.getElementById('inner-anchored').style.anchorDefault = '--anchor';
+ document.getElementById('outer-anchored').style.anchorDefault = '--anchor';
document.documentElement.classList.remove('reftest-wait');
}
runTest();
diff --git a/css/css-anchor-position/anchor-scroll-update-003.html b/css/css-anchor-position/anchor-scroll-update-003.html
index 0d3ec28..57a524c 100644
--- a/css/css-anchor-position/anchor-scroll-update-003.html
+++ b/css/css-anchor-position/anchor-scroll-update-003.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html class="reftest-wait">
-<title>Basic of anchor-scroll: anchored elements should update location on anchor's `anchor-name` property changes</title>
+<title>Anchored elements should update location on anchor's `anchor-name` property changes</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
<link rel="match" href="reference/anchor-scroll-ref.html">
@@ -37,7 +37,7 @@
position: absolute;
left: anchor(--anchor left);
bottom: anchor(--anchor top);
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
}
#outer-anchored {
@@ -45,7 +45,7 @@
position: absolute;
left: anchor(--anchor left);
top: anchor(--anchor bottom);
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
}
</style>
diff --git a/css/css-anchor-position/anchor-scroll-update-004.html b/css/css-anchor-position/anchor-scroll-update-004.html
index 7d1aadc..d20a7b6 100644
--- a/css/css-anchor-position/anchor-scroll-update-004.html
+++ b/css/css-anchor-position/anchor-scroll-update-004.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html class="reftest-wait">
-<title>Basic of anchor-scroll: anchored elements should update location on anchor's layout changes</title>
+<title>Anchored elements should update location on anchor's layout changes</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
<link rel="match" href="reference/anchor-scroll-ref.html">
@@ -49,7 +49,7 @@
position: absolute;
left: anchor(--anchor left);
bottom: anchor(--anchor top);
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
}
#outer-anchored {
@@ -57,7 +57,7 @@
position: absolute;
left: anchor(--anchor left);
top: anchor(--anchor bottom);
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
}
</style>
diff --git a/css/css-anchor-position/anchor-scroll-update-005.html b/css/css-anchor-position/anchor-scroll-update-005.html
index 5675507..c2e7248 100644
--- a/css/css-anchor-position/anchor-scroll-update-005.html
+++ b/css/css-anchor-position/anchor-scroll-update-005.html
@@ -24,7 +24,7 @@
background-color: green;
top: anchor(--a top);
left: 0;
- anchor-scroll: --a;
+ anchor-default: --a;
}
</style>
<div id="cb">
@@ -49,7 +49,7 @@
scroller.classList.add('changed');
document.documentElement.classList.remove('reftest-wait');
- // Should change scroll offset and anchor-scroll adjustment to 200.
+ // Should change scroll offset and scroll adjustment to 200.
}
runTest();
</script>
diff --git a/css/css-anchor-position/anchor-scroll-update-006.html b/css/css-anchor-position/anchor-scroll-update-006.html
index 7a8e675..2535c68 100644
--- a/css/css-anchor-position/anchor-scroll-update-006.html
+++ b/css/css-anchor-position/anchor-scroll-update-006.html
@@ -24,7 +24,7 @@
background-color: green;
top: anchor(--a top);
left: 0;
- anchor-scroll: --a;
+ anchor-default: --a;
}
</style>
<div id="cb">
@@ -49,7 +49,7 @@
document.getElementById('spacer').classList.add('changed');
document.documentElement.classList.remove('reftest-wait');
- // Should change scroll offset and anchor-scroll adjustment to 200.
+ // Should change scroll offset and scroll adjustment to 200.
}
runTest();
</script>
diff --git a/css/css-anchor-position/anchor-scroll-update-007.html b/css/css-anchor-position/anchor-scroll-update-007.html
index b08bcc5..4859f01 100644
--- a/css/css-anchor-position/anchor-scroll-update-007.html
+++ b/css/css-anchor-position/anchor-scroll-update-007.html
@@ -37,7 +37,7 @@
position: absolute;
left: anchor(--anchor left);
bottom: anchor(--anchor top);
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
}
#outer-anchored {
@@ -45,7 +45,7 @@
position: fixed;
left: anchor(--anchor left);
top: anchor(--anchor bottom);
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
}
</style>
diff --git a/css/css-anchor-position/anchor-scroll-vlr.html b/css/css-anchor-position/anchor-scroll-vlr.html
index 82d167f..00406c8 100644
--- a/css/css-anchor-position/anchor-scroll-vlr.html
+++ b/css/css-anchor-position/anchor-scroll-vlr.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
-<title>Tests that anchor-scroll works in vertical-lr writing mode</title>
+<title>Tests that anchor positioned scrolling works in vertical-lr writing mode</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
-<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-scroll">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#scrolling">
<link rel="match" href="reference/anchor-scroll-vlr-ref.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
@@ -50,7 +50,7 @@
position: absolute;
top: anchor(--anchor top);
left: anchor(--anchor right);
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
}
#outer-anchored {
@@ -58,7 +58,7 @@
position: absolute;
top: anchor(--anchor top);
right: anchor(--anchor left);
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
}
</style>
diff --git a/css/css-anchor-position/anchor-scroll-vrl.html b/css/css-anchor-position/anchor-scroll-vrl.html
index 55b7355..2432d72 100644
--- a/css/css-anchor-position/anchor-scroll-vrl.html
+++ b/css/css-anchor-position/anchor-scroll-vrl.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
-<title>Tests that anchor-scroll works in vertical-rl writing mode</title>
+<title>Tests that anchor positioned scrolling works in vertical-rl writing mode</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
-<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-scroll">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#scrolling">
<link rel="match" href="reference/anchor-scroll-vrl-ref.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
@@ -50,7 +50,7 @@
position: absolute;
top: anchor(--anchor top);
left: anchor(--anchor right);
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
}
#outer-anchored {
@@ -58,7 +58,7 @@
position: absolute;
top: anchor(--anchor top);
right: anchor(--anchor left);
- anchor-scroll: --anchor;
+ anchor-default: --anchor;
}
</style>
diff --git a/css/css-anchor-position/reference/anchor-scroll-nested-ref.html b/css/css-anchor-position/reference/anchor-scroll-nested-ref.html
index 6190258..a651114 100644
--- a/css/css-anchor-position/reference/anchor-scroll-nested-ref.html
+++ b/css/css-anchor-position/reference/anchor-scroll-nested-ref.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<title>Tests anchor-scroll with nested scroll containers</title>
+<title>Tests anchor positioned scrolling with nested scroll containers</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
<style>
diff --git a/css/css-anchor-position/reference/anchor-scroll-ref.html b/css/css-anchor-position/reference/anchor-scroll-ref.html
index 7935f38..06d4a60 100644
--- a/css/css-anchor-position/reference/anchor-scroll-ref.html
+++ b/css/css-anchor-position/reference/anchor-scroll-ref.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<title>Basic of anchor-scroll: anchored elements should be "pinned" to the anchor when anchor is scrolled</title>
+<title>Basic of anchor positioned scrolling: anchored elements should be "pinned" to the anchor when anchor is scrolled</title>
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
body {
diff --git a/css/css-anchor-position/reference/anchor-scroll-vlr-ref.html b/css/css-anchor-position/reference/anchor-scroll-vlr-ref.html
index cbb249e..01be082 100644
--- a/css/css-anchor-position/reference/anchor-scroll-vlr-ref.html
+++ b/css/css-anchor-position/reference/anchor-scroll-vlr-ref.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<title>Tests that anchor-scroll works in vertical-lr writing mode</title>
+<title>Tests that anchor positioned scrolling works in vertical-lr writing mode</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
<link rel="stylesheet" href="/fonts/ahem.css">
diff --git a/css/css-anchor-position/reference/anchor-scroll-vrl-ref.html b/css/css-anchor-position/reference/anchor-scroll-vrl-ref.html
index 746dfee..2366a7d 100644
--- a/css/css-anchor-position/reference/anchor-scroll-vrl-ref.html
+++ b/css/css-anchor-position/reference/anchor-scroll-vrl-ref.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<title>Tests that anchor-scroll works in vertical-rl writing mode</title>
+<title>Tests that anchor positioned scrolling works in vertical-rl writing mode</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-scroll">
<link rel="stylesheet" href="/fonts/ahem.css">
diff --git a/html/semantics/popovers/popover-anchor-scroll-display-ref.html b/html/semantics/popovers/popover-anchor-scroll-display-ref.html
index 1bac806..926a171 100644
--- a/html/semantics/popovers/popover-anchor-scroll-display-ref.html
+++ b/html/semantics/popovers/popover-anchor-scroll-display-ref.html
@@ -6,7 +6,6 @@
<p>There should be a green box attached to the right side of each orange box.</p>
<div class=ex id=ex1><div class=anchor></div><div class=popover></div></div>
<div class=ex id=ex2><div class=anchor></div><div class=popover></div></div>
-<div class=ex id=ex3><div class=anchor></div><div class=popover></div></div>
<div class=spacer style="height: 200vh"></div>
diff --git a/html/semantics/popovers/popover-anchor-scroll-display.html b/html/semantics/popovers/popover-anchor-scroll-display.html
index 9a14b44..7ed6cf1 100644
--- a/html/semantics/popovers/popover-anchor-scroll-display.html
+++ b/html/semantics/popovers/popover-anchor-scroll-display.html
@@ -22,12 +22,6 @@
<div id=popover2 popover=manual anchor=fake-anchor></div>
</div>
-<!-- Example using an implicit anchor that is not the default anchor -->
-<div class=ex>
- <div class=anchor id=anchor3></div>
- <div id=popover3 popover=manual anchor=anchor3></div>
-</div>
-
<!-- A position:fixed fake anchor. Any popover anchored to it won't move when
the document is scrolled. -->
<div id=fake-anchor></div>
@@ -65,13 +59,6 @@
anchor-default: --anchor2;
left: anchor(right);
top: anchor(top);
- anchor-scroll: default;
- }
- #popover3 {
- anchor-default: --fake-anchor;
- left: anchor(implicit right);
- top: anchor(implicit top);
- anchor-scroll: implicit;
}
</style>
