corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1940429 [wpt PR 49966] - WebKit export of https://bugs.webkit.org/show_bug.cgi?id=285558, a=testonly

Browse Source 
Automatic update from web-platform-tests
WebKit export: Fix flex item positioning in sideways-lr writing mode (#49966)

https://bugs.webkit.org/show_bug.cgi?id=285558
--

wpt-commits: db37ae6a1dc13fc2b6f9388dfb352beb57b59d7a
wpt-pr: 49966
This commit is contained in:
Tim Nguyen
2025-01-08 16:30:43 +00:00
committed by moz-wptsync-bot
parent 3563c1732c
commit adc3a91079
2 changed files with 118 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
testing/web-platform/tests/css/css-writing-modes/reference/sideways-lr-main-axis-ref.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<title>Reference: sideways-lr flexbox main axis progresses in correct direction</title>
<style>
.container {
font-size: 0
}
.item {
width: 20px;
height: 20px;
}
.item:nth-child(1) { background-color: lime; }
.item:nth-child(2) { background-color: limegreen; }
.item:nth-child(3) { background-color: green; }
.container.reverse .item:nth-child(1) { background-color: green; }
.container.reverse .item:nth-child(2) { background-color: limegreen; }
.container.reverse .item:nth-child(3) { background-color: lime; }
.container.row .item { display: inline-block; }
</style>
<div class="container reverse">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container reverse">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container row reverse">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container row reverse">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

57
testing/web-platform/tests/css/css-writing-modes/sideways-lr-main-axis.html Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<title>sideways-lr flexbox main axis progresses in correct direction</title>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#box-model">
<link rel="match" href="reference/sideways-lr-main-axis-ref.html">
<style>
.container {
display: flex;
}
.item {
width: 20px;
height: 20px;
}
.item:nth-child(1) { background-color: lime; }
.item:nth-child(2) { background-color: limegreen; }
.item:nth-child(3) { background-color: green; }
</style>
<div class="container" style="writing-mode: sideways-lr; flex-direction: row;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" style="writing-mode: sideways-lr; direction: rtl; flex-direction: row;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" style="writing-mode: sideways-lr; flex-direction: row-reverse;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" style="writing-mode: sideways-lr; direction: rtl; flex-direction: row-reverse;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" style="writing-mode: sideways-lr; flex-direction: column;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" style="writing-mode: sideways-lr; direction: rtl; flex-direction: column;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" style="writing-mode: sideways-lr; flex-direction: column-reverse;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" style="writing-mode: sideways-lr; direction: rtl; flex-direction: column-reverse;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>