Sandbox::https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/column-reverse-gap.html

Visitar URL original

wpt/css/css-flexbox/column-reverse-gap.html at master · web-platform-tests/wpt · GitHub

Repository navigation

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE html>

<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse">

<link rel="help" href="https://drafts.csswg.org/css-align/#gap-shorthand">

<style>

.flexbox {

display: flex;

flex-direction: column-reverse;

gap: 5px;

position: relative;

background-color: blue;

}

.flexbox > * {

height: 10px;

background-color: green;

}

</style>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/check-layout-th.js"></script>

<body onload="checkLayout('.flexbox')">

<div id=log></div>

<div class="flexbox" data-expected-height="40">

<div data-offset-y="30"></div>

<div data-offset-y="15"></div>

<div data-offset-y="0"></div>

</div>

</body>