mirror of
https://github.com/servo/servo.git
synced 2025-08-16 02:45:36 +01:00
Update web-platform-tests to revision b'b7c1d80f991820c17aaae0477052c30d7f699eba'
This commit is contained in:
parent
189236862a
commit
274846e69e
217 changed files with 7520 additions and 2797 deletions
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue