layout/reftests/box-properties/overflow-clip-box-1.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>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   padding: 50px;
  18   white-space: pre;
  19   overflow: hidden;
  20   background-color: lime;
  21   background-clip: content-box;
  22   border: 1px solid;
  23 }
  24
  25 .float { float: left; }
  26 .w > div { width: 20px; }
  27 .h > div { height: 20px; }
  28
  29 c {
  30   display: block;
  31   width: 100px;
  32   height: 40px;
  33   border: 1px solid black;
  34 }
  35   </style>
  36 </head>
  37 <body>
  38
  39 <span class="float">
  40 <div style="overflow-clip-box: padding-box"><c></c></div>
  41 <div style="overflow-clip-box: content-box"><c></c></div>
  42 <div style="overflow-clip-box: padding-box content-box"><c></c></div>
  43 <div style="overflow-clip-box: content-box padding-box"><c></c></div>
  44 <div style="overflow-clip-box: padding-box padding-box"><c></c></div>
  45 <div style="overflow-clip-box: content-box content-box"><c></c></div>
  46 </span>
  47
  48 <span class="float h">
  49 <div style="overflow-clip-box: padding-box"><c></c></div>
  50 <div style="overflow-clip-box: content-box"><c></c></div>
  51 <div style="overflow-clip-box: padding-box content-box"><c></c></div>
  52 <div style="overflow-clip-box: content-box padding-box"><c></c></div>
  53 <div style="overflow-clip-box: padding-box padding-box"><c></c></div>
  54 <div style="overflow-clip-box: content-box content-box"><c></c></div>
  55 </span>
  56
  57 <span class="float w">
  58 <div style="overflow-clip-box: padding-box"><c></c></div>
  59 <div style="overflow-clip-box: content-box"><c></c></div>
  60 <div style="overflow-clip-box: padding-box content-box"><c></c></div>
  61 <div style="overflow-clip-box: content-box padding-box"><c></c></div>
  62 <div style="overflow-clip-box: padding-box padding-box"><c></c></div>
  63 <div style="overflow-clip-box: content-box content-box"><c></c></div>
  64 </span>
  65
  66 <span class="float w h">
  67 <div style="overflow-clip-box: padding-box"><c></c></div>
  68 <div style="overflow-clip-box: content-box"><c></c></div>
  69 <div style="overflow-clip-box: padding-box content-box"><c></c></div>
  70 <div style="overflow-clip-box: content-box padding-box"><c></c></div>
  71 <div style="overflow-clip-box: padding-box padding-box"><c></c></div>
  72 <div style="overflow-clip-box: content-box content-box"><c></c></div>
  73 </span>
  74
  75 </body>
  76 </html>