Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-12 17:05:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'4435c35d9085ed2be61e64d0093b8e1b0e7a877b'

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-25 01:21:31 +00:00
parent 901b76297d
commit 4031d79cea
383 changed files with 8858 additions and 2734 deletions
Download patch file Download diff file Expand all files Collapse all files

92
tests/wpt/web-platform-tests/css/css-anchor-position/position-fallback-grid-001.html Normal file
View file

@ -0,0 +1,92 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback">
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
<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>
.cb {
position: relative;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: 50px 100px 50px 50px;
}
.item {
background: lightgray;
}
.spacer {
background: yellow;
}
.anchor1 {
anchor-name: --a1;
background: orange;
margin-left: 15px;
width: 20px;
height: 30px;
}
.target {
grid-column: 2 / 4;
grid-row: 2 / 4;
position: absolute;
position-fallback: --fallback1;
width: 100px;
height: 100px;
background: lime;
opacity: .2;
}
@position-fallback --fallback1 {
@try { /* Position to the left of the anchor. */
right: anchor(--a1 left);
top: anchor(--a1 top);
}
@try { /* Position to the right of the anchor with the wider width than CB. */
left: anchor(--a1 right);
top: anchor(--a1 top);
width: 250px;
}
@try { /* Position to the right of the anchor. This entry should succeed. */
left: anchor(--a1 right);
top: anchor(--a1 top);
}
@try { /* Zero-sized, the last entry wins if none succeeded. */
left: 0;
top: 0;
width: 0;
height: 0;
}
}
</style>
<body onload="checkLayout('.target')">
<div>
<div class="spacer" style="height: 10px"></div>
<div class="grid cb">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">
<div class="spacer" style="height: 20px"></div>
<div class="anchor1"></div>
</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="target"
data-offset-x=135 data-offset-y=70
data-expected-height=100></div>
</div>
</div>
</body>

112
tests/wpt/web-platform-tests/css/css-anchor-position/position-fallback-tree-scoped.html Normal file
View file

@ -0,0 +1,112 @@
<!DOCTYPE html>
<title>CSS Anchor Positioning Test: @position-fallback - tree scoped names</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; }
@position-fallback --doc {
@try {
left: 100px;
}
}
.abs { position: absolute; }
#doc_pf_doc { position-fallback: --doc; }
#doc_pf_outer { position-fallback: --outer; }
#doc_pf_inner { position-fallback: --inner; }
</style>
<div id="doc_pf_doc" class="abs"></div>
<div id="doc_pf_outer" class="abs"></div>
<div id="doc_pf_inner" class="abs"></div>
<div id="outer_host">
<template shadowroot="open">
<style>
@position-fallback --outer {
@try {
left: 200px;
}
}
.abs { position: absolute; }
#outer_pf_doc { position-fallback: --doc; }
#outer_pf_outer { position-fallback: --outer; }
#outer_pf_inner { position-fallback: --inner; }
</style>
<div id="outer_pf_doc" class="abs"></div>
<div id="outer_pf_outer" class="abs"></div>
<div id="outer_pf_inner" class="abs"></div>
<div id="inner_host">
<template shadowroot="open">
<style>
@position-fallback --inner {
@try {
left: 300px;
}
}
.abs { position: absolute; }
#inner_pf_doc { position-fallback: --doc; }
#inner_pf_outer { position-fallback: --outer; }
#inner_pf_inner { position-fallback: --inner; }
</style>
<div id="inner_pf_doc" class="abs"></div>
<div id="inner_pf_outer" class="abs"></div>
<div id="inner_pf_inner" class="abs"></div>
</template>
</div>
</template>
</div>
<script>
setup(() => {
polyfill_declarative_shadow_dom(outer_host);
});
test(() => {
assert_equals(doc_pf_doc.offsetLeft, 100);
}, "Document position-fallback matches @position-fallback in document scope");
test(() => {
assert_equals(doc_pf_outer.offsetLeft, 0);
}, "Document position-fallback does not match @position-fallback in #outer_host scope");
test(() => {
assert_equals(doc_pf_inner.offsetLeft, 0);
}, "Document position-fallback does not match @position-fallback in #inner_host scope");
const outer_root = outer_host.shadowRoot;
const inner_root = outer_root.querySelector("#inner_host").shadowRoot;
test(() => {
assert_equals(outer_root.querySelector("#outer_pf_doc").offsetLeft, 100);
}, "Outer position-fallback matches @position-fallback in document scope");
test(() => {
assert_equals(outer_root.querySelector("#outer_pf_outer").offsetLeft, 200);
}, "Outer position-fallback matches @position-fallback in #outer_host scope");
test(() => {
assert_equals(outer_root.querySelector("#outer_pf_inner").offsetLeft, 0);
}, "Outer position-fallback does not match @position-fallback in #inner_host scope");
test(() => {
assert_equals(inner_root.querySelector("#inner_pf_doc").offsetLeft, 100)
}, "Inner position-fallback matches @position-fallback in document scope");
test(() => {
assert_equals(inner_root.querySelector("#inner_pf_outer").offsetLeft, 200);
}, "Inner position-fallback matches @position-fallback in #outer_host scope");
test(() => {
assert_equals(inner_root.querySelector("#inner_pf_inner").offsetLeft, 300);
}, "Inner position-fallback matches @position-fallback in #inner_host scope");
</script>