LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-002-expected.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>CSS Reftest Reference</title>
   6   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   7   <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
   8   <style>
   9   .basic {
  10     overflow: scroll;
  11     position: relative;
  12     border: 2px solid green;
  13   }
  14   .height-ref {
  15     height: 60px;
  16     background: lightblue;
  17   }
  18   .width-ref {
  19     width: 60px;
  20   }
  21   .floatLBasic-ref {
  22     float: left;
  23   }
  24   .floatLWidth-ref {
  25     float: left;
  26     width: 60px;
  27   }
  28   .flexBaselineCheck {
  29     display: flex;
  30     align-items: baseline;
  31   }
  32   .innerContents {
  33     color: transparent;
  34     height: 100px;
  35     width: 100px;
  36     position: absolute;
  37   }
  38   .zeroHeightContents {
  39     color: transparent;
  40     height: 0px;
  41     width: 0px;
  42   }
  43   </style>
  44 </head>
  45 <body>
  46   <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in
  47        the testcase, and we simply use 'position: absolute' on the descendants
  48        wherever the testcase has 'contain: size' on the container.  This
  49        produces an accurate reference rendering, because out-of-flow content
  50        doesn't contribute to the container's sizing, but does create scrollable
  51        overflow (i.e. it produces scrollbars of the appropriate size for the
  52        amount of overflow). -->
  53   <div class="basic"><div class="innerContents">inner</div></div>
  54   <br>
  55
  56   <div class="basic height-ref"><div class="innerContents">inner</div></div>
  57   <br>
  58
  59   <div class="basic height-ref"><div class="innerContents">inner</div></div>
  60   <br>
  61
  62   <div class="basic width-ref"><div class="innerContents">inner</div></div>
  63   <br>
  64
  65   <div class="basic width-ref"><div class="innerContents">inner</div></div>
  66   <br>
  67
  68   <div class="basic floatLBasic-ref"><div class="innerContents">inner</div></div>
  69   <br>
  70
  71   <div class="basic floatLWidth-ref"><div class="innerContents">inner</div></div>
  72   <br>
  73
  74   <div class="flexBaselineCheck">
  75     outside before
  76     <div class="basic">
  77       <!-- We use the out-of-flow "innerContents" to create the correct
  78            amount of scrollable overflow to match the testcase, and we
  79            use the smaller in-flow "zeroHeightContents" to provide a
  80            baseline that we can use to verify the testcase's baseline
  81            alignment position. -->
  82       <div class="innerContents">inner</div>
  83       <div class="zeroHeightContents">i</div>
  84     </div>
  85     outside after
  86   </div>
  87 </body>
  88 </html>