Content - 7427004a72c01e40a08ecf274a5e70ae8662e68e - 03edae5/css/css-flexbox/flex-shrink-001.html

visit type:

Tip revision: 7b34dc7dc9f2ff8fbcf3445709fa7e517f2c6fb4 authored by Domenic Denicola on 06 April 2018, 22:15:02 UTC
WIP tests for text/css link quirk

Tip revision: 7b34dc7

flex-shrink-001.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Flexbox Test: flex-shrink - number(positive)</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.3.2. The 'flex-shrink' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" 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">
<style>
  #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>
<body>
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
  <div id="container">
    <div id="test1"></div>
    <div id="test2"></div>
  </div>
  <div id="cover"></div>
</body>

Browse the archive

https://github.com/web-platform-tests/wpt