tawasuyu/taffy

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <script src="../../scripts/gentest/test_helper.js"></script>
5  <link rel="stylesheet" type="text/css" href="../../scripts/gentest/test_base_style.css">
6  <meta name="wpt-test-port" value="css/css-flexbox/multiline-min-max.html" />
7  <meta name="wpt-subtest" value=".flexbox 8" />
8  <style type="text/css">
9    #test-root { background-color: grey; }
10    #test-root :nth-child(1) { background-color: blue; }
11    #test-root :nth-child(2) { background-color: yellow; }
12    #test-root :nth-child(3) { background-color: salmon; }
13    #test-root :nth-child(4) { background-color: lime; }
14    #test-root :nth-child(5) { background-color: red; }
15    #test-root :nth-child(6) { background-color: orange; }
16    #test-root :nth-child(7) { background-color: purple; }
17  </style>
18  <title>
19    Test description
20  </title>
21</head>
22<body>
23
24<div id="test-root" style="box-sizing: content-box; display: flex; flex-wrap: wrap; width: 600px; background-color: grey; border: 5px solid black; height: 20px; position: relative;">
25  <div style="box-sizing: border-box; height: 10px; max-width: 300px; flex: 1 1 600px; padding-left: 10px;" data-w="300" data-x="0" data-y="0"></div>
26  <div style="box-sizing: border-box; height: 10px; width: 100px; flex: 1 1 auto;" data-w="100" data-x="300" data-y="0"></div>
27  <div style="box-sizing: border-box; height: 10px; width: 100px; flex: 1 1 auto;" data-w="100" data-x="400" data-y="0"></div>
28  <div style="box-sizing: border-box; height: 10px; width: 100px; flex: 1 1 auto;" data-w="100" data-x="500" data-y="0"></div>
29</div>
30
31</body>
32</html>