third_party/WebKit/LayoutTests/fast/block/float/float-on-line-obeys-container-padding.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5   #wrapper {
   6     border: 1px solid red;
   7     margin: 20px 0;
   8     width: 200px;
   9   }
  10
  11   #p {
  12     background: #EEE;
  13     border-right: 1px solid green;
  14     margin: 0;
  15     margin-right: 32px;
  16     padding-left: 30px;
  17   }
  18
  19   #float  {
  20     float: left;
  21     display: inline-block;
  22     width: 25px;
  23     height: 25px;
  24     background-color: green;
  25     margin-left: -30px;
  26   }
  27
  28   #prtl {
  29     background: #EEE;
  30     border-left: 1px solid green;
  31     margin: 0;
  32     margin-left: 32px;
  33     padding-right: 30px;
  34   }
  35
  36   #floatrtl  {
  37     float: right;
  38     display: inline-block;
  39     width: 25px;
  40     height: 25px;
  41     background-color: green;
  42     margin-right: -30px;
  43   }
  44 </style>
  45 </head>
  46 <body>
  47   <h2>The text should not overflow the green border.</h2>
  48    <div id="wrapper">
  49     <p id="p">
  50       <span id="float"></span>
  51       no sea takimata sanctus estestest Lorem ipsum dolor sit amet.
  52     </p>
  53   </div>
  54
  55   <h2>The text should not overflow the green border.</h2>
  56    <div id="wrapper" style="direction:rtl">
  57     <p id="prtl">
  58       <span id="floatrtl"></span>
  59       no sea takimata sanctus estestest Lorem ipsum dolor sit amet.
  60     </p>
  61   </div>
  62 </body>
  63 </html>