mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1874110 [wpt PR 43936] - [css-anchor-position] Implement new inset-area proposal, a=testonly 

Automatic update from web-platform-tests
[css-anchor-position] Implement new inset-area proposal

The new proposal is here:

https://github.com/w3c/csswg-drafts/issues/9598#issuecomment-1836854109

inset-area now affects the containing block size and 'auto' insets
become 0 for inset-area.

Bug: 1477314

Change-Id: Ia2f0d5a1f866cd659f9e3f87ec2f639141df6a94
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5163733
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1247073}

--

wpt-commits: e359a0b5d78e0a5c221dcbd2a505e499d3cae178
wpt-pr: 43936
This commit is contained in:
Rune Lillesveen 2024-01-15 16:46:03 +00:00 коммит произвёл moz-wptsync-bot
Родитель 02cb459980
Коммит a2922409d1
3 изменённых файлов: 92 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

38
testing/web-platform/tests/css/css-anchor-position/inset-area-abs-inline-container.html Normal file
Просмотреть файл

@ -0,0 +1,38 @@
<!DOCTYPE html>
<title>CSS Anchor Positioning: inset-area positioning with absolute inline container</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area">
<link rel="match" href="inset-area-inline-container-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
#in-flow {
font-family: Ahem;
font-size: 100px;
color: orange;
}
#inline-container {
position: absolute;
}
#anchor {
position: absolute;
top: 25px;
left: 100px;
width: 200px;
height: 50px;
anchor-name: --anchor;
background-color: cyan;
}
.anchored {
position: absolute;
anchor-default: --anchor;
background-color: blue;
}
#top-left { inset-area: top / left; }
#top-right { inset-area: top / right; }
#bottom-left { inset-area: bottom / left; }
#bottom-right { inset-area: bottom / right; }
</style>
<div id="in-flow">
<br>
<br>
&nbsp;&nbsp;<span id="inline-container">XXXX<span id="anchor"></span><div id="top-left" class="anchored"></div><div id="top-right" class="anchored"></div><div id="bottom-left" class="anchored"></div><div id="bottom-right" class="anchored"></div></span>
</div>

16
testing/web-platform/tests/css/css-anchor-position/inset-area-inline-container-ref.html Normal file
Просмотреть файл

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>CSS Test Reference</title>
<div style="position:relative">
<!-- The Ahem 'XXXX' text: -->
<div style="position:absolute; background-color:orange; left:200px; top:200px; width:400px; height:100px"></div>
<!-- The #anchor -->
<div style="position:absolute; background-color:cyan; left:300px; top:225px; width:200px; height:50px"></div>
<!-- top / left -->
<div style="position:absolute; background-color:blue; left:200px; top:200px; width:100px; height:25px"></div>
<!-- top / right -->
<div style="position:absolute; background-color:blue; left:500px; top:200px; width:100px; height:25px"></div>
<!-- bottom / left -->
<div style="position:absolute; background-color:blue; left:200px; top:275px; width:100px; height:25px"></div>
<!-- bottom / right -->
<div style="position:absolute; background-color:blue; left:500px; top:275px; width:100px; height:25px"></div>
</div>

38
testing/web-platform/tests/css/css-anchor-position/inset-area-inline-container.html Normal file
Просмотреть файл

@ -0,0 +1,38 @@
<!DOCTYPE html>
<title>CSS Anchor Positioning: inset-area positioning with inline container</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area">
<link rel="match" href="inset-area-inline-container-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
#in-flow {
font-family: Ahem;
font-size: 100px;
color: orange;
}
#inline-container {
position: relative;
}
#anchor {
position: absolute;
top: 25px;
left: 100px;
width: 200px;
height: 50px;
anchor-name: --anchor;
background-color: cyan;
}
.anchored {
position: absolute;
anchor-default: --anchor;
background-color: blue;
}
#top-left { inset-area: top / left; }
#top-right { inset-area: top / right; }
#bottom-left { inset-area: bottom / left; }
#bottom-right { inset-area: bottom / right; }
</style>
<div id="in-flow">
<br>
<br>
&nbsp;&nbsp;<span id="inline-container">XXXX<span id="anchor"></span><div id="top-left" class="anchored"></div><div id="top-right" class="anchored"></div><div id="bottom-left" class="anchored"></div><div id="bottom-right" class="anchored"></div></span>
</div>