[css-anchor-position] anchor queries inherited as pixels resolved
Moving test as the CSSWG issue is resolved and closed.
Change-Id: I6f7e1b8462b164236ff4fbfcc14f76bd6d477775
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5444512
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1287352}
diff --git a/css/css-anchor-position/anchor-inherited.html b/css/css-anchor-position/anchor-inherited.html
new file mode 100644
index 0000000..0f84311
--- /dev/null
+++ b/css/css-anchor-position/anchor-inherited.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<title>Tests that anchor functions inherit as pixels</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="/css/css-anchor-position/support/test-common.js"></script>
+
+<style>
+.cb {
+ width: 400px;
+ height: 400px;
+ position: relative;
+ border: 1px solid black;
+}
+
+.anchor {
+ width: 100px;
+ height: 100px;
+ top: 10px;
+ left: 20px;
+ position: absolute;
+ background: red;
+ anchor-name: --a;
+}
+
+.anchored {
+ position-anchor: --a;
+ position: absolute;
+ /* Anchored directly on top */
+ top: anchor(top);
+ left: anchor(left);
+ width: anchor-size(width);
+ height: anchor-size(height);
+ background: coral;
+}
+
+/* The child should have the same size as the anchored element,
+ and inset by top:10px,left:20px vs. that element. */
+.child {
+ position-anchor: --unknown; /* Should have no effect. */
+ position: relative;
+ background: skyblue;
+ top: inherit;
+ left: inherit;
+ width: inherit;
+ height: inherit;
+}
+
+</style>
+
+<body onload="checkLayoutForAnchorPos('.child')">
+
+<div class=cb>
+ <div class=anchor></div>
+ <div class=anchored>
+ <div class=child
+ data-offset-x=20 data-offset-y=10
+ data-expected-width=100 data-expected-height=100></div>
+ </div>
+</div>
+
+</body>
