src/third_party/WebKit/LayoutTests/css3/flexbox/stretched-child-shrink-on-relayout.html

   1 <!DOCTYPE html>
   2 <style>
   3 .flexbox {
   4     display: flex;
   5     background: papayawhip;
   6     border: 1px solid midnightblue;
   7     margin: 1em;
   8     width: 50px;
   9 }
  10
  11 .flexbox > div {
  12     margin: 5px;
  13     min-width: 10px;
  14     min-height: 10px;
  15     background-color: lawngreen;
  16 }
  17
  18 .column {
  19     -webkit-flex-flow: column;
  20 }
  21
  22 .horizontal-tb {
  23     -webkit-writing-mode: horizontal-tb;
  24 }
  25 .vertical-lr {
  26     -webkit-writing-mode: vertical-lr;
  27 }
  28
  29 .largeitem {
  30     height: 200px;
  31     width: 200px;
  32     margin: 5px;
  33 }
  34 </style>
  35 </head>
  36 <script src="../../resources/check-layout.js"></script>
  37 <body onload="checkLayout('.flexbox')">
  38
  39 <div class="flexbox">
  40   <div data-expected-height=10 data-expected-width=10></div>
  41   <div class="largeitem"></div>
  42 </div>
  43 <div class="flexbox column">
  44   <div data-expected-height=10 data-expected-width=40></div>
  45   <div class="largeitem"></div>
  46 </div>
  47
  48 <div class="flexbox">
  49   <div class="horizontal-tb" data-expected-height=10 data-expected-width=10></div>
  50   <div class="largeitem"></div>
  51 </div>
  52 <div class="flexbox column">
  53   <div class="horizontal-tb" data-expected-height=10 data-expected-width=40></div>
  54   <div class="largeitem"></div>
  55 </div>
  56
  57 <div class="flexbox">
  58   <div class="vertical-lr" data-expected-height=10 data-expected-width=10></div>
  59   <div class="largeitem"></div>
  60 </div>
  61 <div class="flexbox column">
  62   <div class="vertical-lr" data-expected-height=10 data-expected-width=10></div>
  63   <div class="largeitem"></div>
  64 </div>
  65
  66 <script>
  67 document.body.offsetTop;
  68 var targets = document.getElementsByClassName('largeitem');
  69 for (var i = targets.length - 1; i >= 0; i--) {
  70   targets[i].remove();
  71 };
  72 </script>