LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-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     display: inline-block;
  11     overflow: scroll;
  12     position: relative;
  13     border: 2px solid green;
  14   }
  15   .height-ref {
  16     height: 60px;
  17   }
  18   .width-ref {
  19     width: 60px;
  20   }
  21   .innerContents {
  22     color: transparent;
  23     height: 100px;
  24     width: 100px;
  25     position: absolute;
  26   }
  27   </style>
  28 </head>
  29 <body>
  30   <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in
  31        the testcase, and we simply use 'position: absolute' on the descendants
  32        wherever the testcase has 'contain: size' on the container.  This
  33        produces an accurate reference rendering, because out-of-flow content
  34        doesn't contribute to the container's sizing, but does create scrollable
  35        overflow (i.e. it produces scrollbars of the appropriate size for the
  36        amount of overflow). -->
  37   <div class="basic"><div class="innerContents">inner</div></div>
  38   <br>
  39
  40   outside before
  41   <div class="basic"><div class="innerContents">inner</div></div>
  42   outside after
  43   <br>
  44
  45   <div class="basic height-ref"><div class="innerContents">inner</div></div>
  46   <br>
  47
  48   <div class="basic height-ref"><div class="innerContents">inner</div></div>
  49   <br>
  50
  51   <div class="basic width-ref"><div class="innerContents">inner</div></div>
  52   <br>
  53
  54   <div class="basic width-ref"><div class="innerContents">inner</div></div>
  55 </body>
  56 </html>