| <!DOCTYPE html> |
| <!-- |
| | Flexbox unit test from csswg. |
| | http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/chapter-7.htm |
| --> |
| <html><head><meta charset="utf-8"> |
| <title>CSS Flexbox Test: flex-shrink - number(positive)</title> |
| <link href="http://www.intel.com" rel="author" title="Intel"> |
| <link href="mailto:shiyoux.tan@intel.com" rel="author" title="Shiyou Tan"> |
| <link href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property" rel="help" title="7.3.2. The 'flex-shrink' property"> |
| <link href="reference/ref-filled-green-100px-square.htm" rel="match"> |
| <meta content="" name="flags"> |
| <meta content="The flex-shrink property set positive number determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed" name="assert"> |
| <style> |
| body { |
| margin: 0px; |
| background-color: white; |
| font-family: Roboto; |
| font-size: 16px; |
| } |
| #container { |
| background-color: red; |
| display: flex; |
| height: 100px; |
| width: 100px; |
| } |
| #container div { |
| height: 100px; |
| width: 100px; |
| } |
| #test1 { |
| flex-shrink: 2; |
| } |
| #test2 { |
| background-color: green; |
| flex-shrink: 3; |
| } |
| #cover { |
| background-color: green; |
| height: 100px; |
| margin-top: -100px; |
| width: 60px; |
| } |
| </style> |
| </head><body> |
| <span>Test passes if there is a filled green square and no red.</span> |
| <div id="container"> |
| <div id="test1"></div> |
| <div id="test2"></div> |
| </div> |
| <div id="cover"></div> |
| |
| </body></html> |
