layout/reftests/box-properties/overflow-clip-box-1-ref.html

   1 <!DOCTYPE HTML>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html><head>
   7   <meta charset="utf-8">
   8   <title>Reference: Testcase for bug 1422839</title>
   9   <style type="text/css">
  10 html,body {
  11   color:black; background-color:white; font:16px/1 monospace; line-height:1; padding:0; margin:0;
  12 }
  13
  14 div {
  15   width: 0;
  16   height: 0;
  17   white-space: pre;
  18   overflow: hidden;
  19   border: 1px solid;
  20   width: 100px;
  21   height: 100px;
  22 }
  23 .h > div { height: 120px; }
  24 .w > div { width: 120px; }
  25
  26 c {
  27   display: block;
  28   width: 100px;
  29   height: 40px;
  30   border: 1px solid black;
  31 }
  32
  33 .float { float: left; }
  34
  35 x {
  36   display: block;
  37   overflow: hidden;
  38   padding-left: 50px;
  39   padding-top: 50px;
  40   width: 50px;
  41   height: 50px;
  42 }
  43
  44 .w x { width: 20px; }
  45 .h x { height: 20px; }
  46 .w.h x {
  47   background-color: lime;
  48   background-clip: content-box;
  49   overflow: visible;
  50 }
  51 y {
  52   display: block;
  53   overflow: hidden;
  54   width: 20px;
  55   height: 20px;
  56 }
  57
  58   </style>
  59 </head>
  60 <body>
  61
  62 <span class="float">
  63 <div><x><c></c></x></div>
  64 <div></div>
  65 <div></div>
  66 <div></div>
  67 <div><x><c></c></x></div>
  68 <div></div>
  69 </span>
  70
  71 <span class="float h">
  72 <div><x style="height:70px"><c></c></x></div>
  73 <div></div>
  74 <div></div>
  75 <div><x><c></c></x></div>
  76 <div><x style="height:70px"><c></c></x></div>
  77 <div></div>
  78 </span>
  79
  80 <span class="float w">
  81 <div><x style="width:70px"><c></c></x></div>
  82 <div></div>
  83 <div><x><c></c></x></div>
  84 <div></div>
  85 <div><x style="width:70px"><c></c></x></div>
  86 <div></div>
  87 </span>
  88
  89 <span class="float w h">
  90 <div><x><y style="height:70px; width:70px"><c></c></y></x></div>
  91 <div><x><y><c></c></y></x></div>
  92 <div><x><y style="height:70px"><c></c></y></x></div>
  93 <div><x><y style="width:70px"><c></c></y></x></div>
  94 <div><x><y style="height:70px; width:70px"><c></c></y></x></div>
  95 <div><x><y><c></c></y></x></div>
  96 </span>
  97
  98 </body>
  99 </html>