forked from mirrors/gecko-dev
f2a6370853
Automatic update from web-platform-tests Remove redundant anchor reference from css-anchor-position WPT tests Remove anchor references in anchor() if the reference is the same as position-anchor. For tests with anchor references from anchor() and anchor-size() without position-anchor, modify a few of them by adding position-anchor and remove anchor references, to increase test coverage of anchor-size() implicitly use the default anchor, while most of such tests are kept unchanged. This will give web developers good examples of best usages. Previously some web developers asked whether the redundant anchor references were required. Change-Id: I9bbdaa375afd845765266c272ca27cb565833257 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5588972 Reviewed-by: Mason Freed <masonf@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/main@{#1308918} -- wpt-commits: c3df32c19c095bd753060039fce2072c296ad751 wpt-pr: 46573
67 lines
1.4 KiB
HTML
67 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<title>Basic of anchor positioned scrolling: anchored elements should be "pinned" to the anchor when anchor is scrolled in overflow:hidden</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
|
|
<link rel="match" href="anchor-scroll-overflow-hidden-ref.html">
|
|
<link rel="stylesheet" href="/fonts/ahem.css">
|
|
<style>
|
|
body {
|
|
font: 20px/1 Ahem;
|
|
margin: 0;
|
|
}
|
|
|
|
#scroll-container {
|
|
width: 400px;
|
|
height: 400px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#scroll-contents {
|
|
width: 1000px;
|
|
height: 1000px;
|
|
}
|
|
|
|
#placefiller-above-anchor {
|
|
height: 500px;
|
|
}
|
|
|
|
#placefiller-before-anchor {
|
|
display: inline-block;
|
|
width: 500px;
|
|
}
|
|
|
|
#anchor {
|
|
anchor-name: --anchor;
|
|
}
|
|
|
|
#inner-anchored {
|
|
color: green;
|
|
position: absolute;
|
|
left: anchor(left);
|
|
bottom: anchor(top);
|
|
position-anchor: --anchor;
|
|
}
|
|
|
|
#outer-anchored {
|
|
color: yellow;
|
|
position: absolute;
|
|
left: anchor(left);
|
|
top: anchor(bottom);
|
|
position-anchor: --anchor;
|
|
}
|
|
</style>
|
|
|
|
<div id="scroll-container">
|
|
<div id="scroll-contents">
|
|
<div id="placefiller-above-anchor"></div>
|
|
<div id="placefiller-before-anchor"></div>
|
|
<span id="anchor">anchor</span>
|
|
<div id="inner-anchored">inner-anchored</div>
|
|
</div>
|
|
</div>
|
|
<div id="outer-anchored">outer-anchored</div>
|
|
|
|
<script>
|
|
const scroller = document.getElementById('scroll-container');
|
|
scroller.scrollTop = 300;
|
|
scroller.scrollLeft = 450;
|
|
</script>
|