Update web-platform-tests to revision b'b7c1d80f991820c17aaae0477052c30d7f699eba'

This commit is contained in:
WPT Sync Bot 2022-11-30 01:45:48 +00:00
parent 189236862a
commit 274846e69e
217 changed files with 7520 additions and 2797 deletions

View file

@ -0,0 +1,116 @@
<!DOCTYPE html>
<title>The `anchor()` function with percentages</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos">
<link rel="author" href="mailto:kojii@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style>
.relpos {
position: relative;
width: 200px;
outline: 1px solid;
}
.vrl-rtl {
writing-mode: vertical-rl;
direction: rtl;
}
.spacer {
background: yellow;
width: 10px;
height: 10px;
}
#anchor {
anchor-name: --a1;
margin: 20px;
width: 100px;
height: 200px;
background: orange;
}
.target {
position: absolute;
}
</style>
<body onload="checkLayout('.target')">
<div class="relpos">
<div class="spacer"></div>
<div id="anchor"></div>
<div class="target" style="left: anchor(--a1 0%)"
data-offset-x="20"></div>
<div class="target" style="left: anchor(--a1 20%)"
data-offset-x="40"></div>
<div class="target" style="left: anchor(--a1 50%)"
data-offset-x="70"></div>
<div class="target" style="left: anchor(--a1 center)"
data-offset-x="70"></div>
<div class="target" style="left: anchor(--a1 80%)"
data-offset-x="100"></div>
<div class="target" style="left: anchor(--a1 100%)"
data-offset-x="120"></div>
<div class="target" style="right: anchor(--a1 0%)"
data-offset-x="20"></div>
<div class="target" style="right: anchor(--a1 20%)"
data-offset-x="40"></div>
<div class="target" style="right: anchor(--a1 50%)"
data-offset-x="70"></div>
<div class="target" style="right: anchor(--a1 center)"
data-offset-x="70"></div>
<div class="target" style="right: anchor(--a1 80%)"
data-offset-x="100"></div>
<div class="target" style="right: anchor(--a1 100%)"
data-offset-x="120"></div>
<div class="target" style="top: anchor(--a1 0%)"
data-offset-y="30"></div>
<div class="target" style="top: anchor(--a1 20%)"
data-offset-y="70"></div>
<div class="target" style="top: anchor(--a1 50%)"
data-offset-y="130"></div>
<div class="target" style="top: anchor(--a1 center)"
data-offset-y="130"></div>
<div class="target" style="top: anchor(--a1 80%)"
data-offset-y="190"></div>
<div class="target" style="top: anchor(--a1 100%)"
data-offset-y="230"></div>
<div class="target" style="bottom: anchor(--a1 0%)"
data-offset-y="30"></div>
<div class="target" style="bottom: anchor(--a1 20%)"
data-offset-y="70"></div>
<div class="target" style="bottom: anchor(--a1 50%)"
data-offset-y="130"></div>
<div class="target" style="bottom: anchor(--a1 center)"
data-offset-y="130"></div>
<div class="target" style="bottom: anchor(--a1 80%)"
data-offset-y="190"></div>
<div class="target" style="bottom: anchor(--a1 100%)"
data-offset-y="230"></div>
</div>
<div class="vrl-rtl relpos">
<div class="spacer"></div>
<div id="anchor"></div>
<div class="target" style="left: anchor(--a1 0%)"
data-offset-x="170"></div>
<div class="target" style="left: anchor(--a1 100%)"
data-offset-x="70"></div>
<div class="target" style="right: anchor(--a1 0%)"
data-offset-x="170"></div>
<div class="target" style="right: anchor(--a1 100%)"
data-offset-x="70"></div>
<div class="target" style="top: anchor(--a1 0%)"
data-offset-y="220"></div>
<div class="target" style="top: anchor(--a1 100%)"
data-offset-y="20"></div>
<div class="target" style="bottom: anchor(--a1 0%)"
data-offset-y="220"></div>
<div class="target" style="bottom: anchor(--a1 100%)"
data-offset-y="20"></div>
</div>
</body>

View file

@ -0,0 +1,103 @@
<!DOCTYPE html>
<title>Tests logical `anchor` function for `writing-mode`/`direction`s</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos">
<link rel="author" href="mailto:kojii@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script><style>
<style>
.htb-ltr { writing-mode: horizontal-tb; direction: ltr; }
.htb-rtl { writing-mode: horizontal-tb; direction: rtl; }
.vlr-ltr { writing-mode: vertical-lr; direction: ltr; }
.vlr-rtl { writing-mode: vertical-lr; direction: rtl; }
.vrl-ltr { writing-mode: vertical-rl; direction: ltr; }
.vrl-rtl { writing-mode: vertical-rl; direction: rtl; }
.relpos {
position: relative;
outline: blue 1px solid;
}
.spacer {
width: 10px;
height: 10px;
background: yellow;
}
.anchor {
anchor-name: --a1;
margin: 5px;
width: 30px;
height: 30px;
background: orange;
}
.target {
position: absolute;
outline: 5px solid lime;
}
</style>
<body>
<template id="template">
<div class="relpos">
<div class="spacer"></div>
<div class="anchor"></div>
</div>
</template>
<script>
// Generate tests for all combinations.
// The first two entries are the side `start` and `end` should match in x-axis.
// The next two entries are the side `start` and `end` should match in y-axis.
const writingDirs = {
'htb-ltr':['l', 'r', 't', 'b'],
'htb-rtl':['r', 'l', 't', 'b'],
'vrl-ltr':['r', 'l', 't', 'b'],
'vrl-rtl':['r', 'l', 'b', 't'],
'vlr-ltr':['l', 'r', 't', 'b'],
'vlr-rtl':['l', 'r', 'b', 't'],
};
const container = document.body;
const cb_template = template.content.firstElementChild;
for (const [writingDir, matches] of Object.entries(writingDirs)) {
const cb = cb_template.cloneNode(true);
cb.classList.add(writingDir);
createTarget(null, 'left: anchor(--a1 start)', matches[0], cb);
createTarget(null, 'left: anchor(--a1 end)', matches[1], cb);
createTarget(null, 'top: anchor(--a1 start)', matches[2], cb);
createTarget(null, 'top: anchor(--a1 end)', matches[3], cb);
createTarget(writingDir, 'left: anchor(--a1 self-start)', matches[0], cb);
createTarget(writingDir, 'left: anchor(--a1 self-end)', matches[1], cb);
createTarget(writingDir, 'top: anchor(--a1 self-start)', matches[2], cb);
createTarget(writingDir, 'top: anchor(--a1 self-end)', matches[3], cb);
container.appendChild(cb);
}
function createTarget(className, style, match, cb) {
const target = document.createElement('div');
target.classList.add('target');
if (className)
target.classList.add(className);
target.style = style;
target.dataset.name = style;
target.dataset.match = match;
cb.appendChild(target);
}
// Test all `.target`s.
for (const target of document.querySelectorAll('.target')) {
const cb = target.parentElement;
const anchor = cb.querySelector('.anchor');
test(() => {
switch (target.dataset.match) {
case 'l':
assert_equals(anchor.offsetLeft, target.offsetLeft);
break;
case 'r':
assert_equals(anchor.offsetLeft + anchor.offsetWidth, target.offsetLeft);
break;
case 't':
assert_equals(anchor.offsetTop, target.offsetTop);
break;
case 'b':
assert_equals(anchor.offsetTop + anchor.offsetHeight, target.offsetTop);
break;
}
}, `${cb.classList}/${target.classList}/${target.dataset.name}`);
}
</script>
</body>

View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<title>CSS Anchor Positioning Test: Dynamically change @position-fallback rules in Shadow DOM</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
<style>
body { margin: 0; }
</style>
<div id="host">
<template shadowroot="open">
<style>
::slotted(#slotted), :host {
position-fallback: --pf;
position: absolute;
}
</style>
<slot></slot>
</template>
<div id="slotted"></div>
</div>
<script>
setup(() => {
polyfill_declarative_shadow_dom(host);
});
test(() => {
assert_equals(host.offsetLeft, 0);
}, "#host is initially left:auto");
test(() => {
assert_equals(slotted.offsetLeft, 0);
}, "#slotted is initially left:auto");
host.shadowRoot.styleSheets[0].insertRule(`
@position-fallback --pf {
@try { left: 100px; }
}
`);
test(() => {
assert_equals(host.offsetLeft, 100);
}, "#host with inserted @position-fallback applied");
test(() => {
assert_equals(slotted.offsetLeft, 100);
}, "#slotted with inserted @position-fallback applied");
</script>