LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-004-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: hidden;
  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. -->
  36   <div class="basic"><div class="innerContents">inner</div></div>
  37   <br>
  38
  39   outside before
  40   <div class="basic"><div class="innerContents">inner</div></div>
  41   outside after
  42   <br>
  43
  44   <div class="basic height-ref"><div class="innerContents">inner</div></div>
  45   <br>
  46
  47   <div class="basic height-ref"><div class="innerContents">inner</div></div>
  48   <br>
  49
  50   <div class="basic width-ref"><div class="innerContents">inner</div></div>
  51   <br>
  52
  53   <div class="basic width-ref"><div class="innerContents">inner</div></div>
  54 </body>
  55 </html>