84 lines
1.9 KiB
HTML
84 lines
1.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<p>This test verifies grid layout painting using RTL direction.</p>
|
||
|
|
<p>This test passes if it matches the reference. You should see green and blue boxes but not red.</p>
|
||
|
|
|
||
|
|
<iframe height="120px" width="300px" srcdoc="
|
||
|
|
<style>
|
||
|
|
.grid {
|
||
|
|
display: grid;
|
||
|
|
grid: 50px / 200px 100px 50px;
|
||
|
|
width: 500px;
|
||
|
|
direction: rtl;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class='grid'>
|
||
|
|
<div style='background: red;'></div>
|
||
|
|
<div style='background: blue;'></div>
|
||
|
|
<div style='background: green;'></div>
|
||
|
|
</div>
|
||
|
|
">
|
||
|
|
</iframe>
|
||
|
|
|
||
|
|
<iframe height="120px" width="300px" srcdoc="
|
||
|
|
<style>
|
||
|
|
.grid {
|
||
|
|
display: grid;
|
||
|
|
grid: 50px / 200px 100px 50px;
|
||
|
|
width: 500px;
|
||
|
|
border: 5px solid;
|
||
|
|
direction: rtl;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class='grid'>
|
||
|
|
<div style='background: red;'></div>
|
||
|
|
<div style='background: blue;'></div>
|
||
|
|
<div style='background: green;'></div>
|
||
|
|
</div>
|
||
|
|
">
|
||
|
|
</iframe>
|
||
|
|
|
||
|
|
<iframe height="120px" width="300px" srcdoc="
|
||
|
|
<style>
|
||
|
|
.grid {
|
||
|
|
display: grid;
|
||
|
|
grid: 50px / 200px 100px 50px;
|
||
|
|
width: 500px;
|
||
|
|
border: 5px solid;
|
||
|
|
padding: 10px;
|
||
|
|
direction: rtl;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class='grid'>
|
||
|
|
<div style='background: red;'></div>
|
||
|
|
<div style='background: blue;'></div>
|
||
|
|
<div style='background: green;'></div>
|
||
|
|
</div>
|
||
|
|
">
|
||
|
|
</iframe>
|
||
|
|
|
||
|
|
<iframe height="120px" width="300px" srcdoc="
|
||
|
|
<style>
|
||
|
|
.grid {
|
||
|
|
display: grid;
|
||
|
|
grid: 50px / 200px 100px 50px;
|
||
|
|
width: 500px;
|
||
|
|
border: 5px solid;
|
||
|
|
border-right: 100px solid;
|
||
|
|
padding: 10px;
|
||
|
|
padding-right: 200px;
|
||
|
|
direction: rtl;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class='grid'>
|
||
|
|
<div style='background: red;'></div>
|
||
|
|
<div style='background: blue;'></div>
|
||
|
|
<div style='background: green;'></div>
|
||
|
|
</div>
|
||
|
|
">
|
||
|
|
</iframe>
|