зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1673110
[wpt PR 26269] - [GridNG] Implement alignment within grid-areas., a=testonly
Automatic update from web-platform-tests [GridNG] Implement alignment within grid-areas. This patch implements alignment within a grid-item's grid-area. When creating the GridItemData we read of the containers, and grid-item's style, or determine its alignment axis-edge, and if it should be stretched, saving this information on the GridItemData. When placing the grid-item it will use this to adjust the offset. This doesn't implement baseline alignment which requires a secondary pass to correctly determine the baseline for the column/row. The other TODO relates to the constraint-space API, and how grid will need a slightly new concept in order to do block-axis stretching easily. By default non-replaced grid-items will stretch to the available space. A new bit on the space can indicate that we should stretch to the available space (if possible), this is similar to the shrink-to-fit bit we have today. This adds a self-start/self-end test as after implementing this now new tests passed immediately, and I don't believe we had good test coverage for inflow content with these keywords. Bug: 1045599 Change-Id: I8c9cc51381c3d75519e52b32472b58ec96a6a85a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2492176 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Cr-Commit-Position: refs/heads/master@{#821043} -- wpt-commits: 75aeef19a407d18832cf0c3946781f97266f74a2 wpt-pr: 26269
This commit is contained in:
Родитель
eeb2989064
Коммит
3cf4fe058d
|
@ -0,0 +1,249 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<meta name="assert" content="This test checks that the self-start/self-end alignment values are applied correctly in all writing-modes for inflow content.">
|
||||
<style>
|
||||
body {
|
||||
line-height: 30px;
|
||||
}
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 20px;
|
||||
grid-template-rows: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: solid;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.child {
|
||||
background: green;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.child')">
|
||||
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
|
||||
<div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
|
||||
</div>
|
||||
<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
|
||||
<div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
|
||||
</div>
|
Загрузка…
Ссылка в новой задаче