third_party/WebKit/LayoutTests/fast/block/block-with-inline-replaced-child-following-text.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 <script>
   6 function getComputedStyleForElement(element, cssPropertyName)
   7 {
   8     if (window.getComputedStyle) {
   9         return window.getComputedStyle(element, '').getPropertyValue(cssPropertyName);
  10     }
  11     return null;
  12 }
  13 function getWidth(id)
  14 {
  15     return getComputedStyleForElement(document.getElementById(id), 'width');
  16 }
  17 function test()
  18 {
  19     description("For the following, the width of the containing inline-block box should be 94px [goverened by the min-width of the text (64px) plus the padding (30px)].");
  20
  21     shouldBe("getWidth('div1')", "'94px'");
  22     shouldBe("getWidth('div2')", "'94px'");
  23     shouldBe("getWidth('div3')", "'94px'");
  24
  25     document.body.removeChild(document.getElementById('wrapper'));
  26
  27     isSuccessfullyParsed();
  28 }
  29 </script>
  30 <style>
  31 .test {
  32     display: inline-block;
  33     border: 1px solid black;
  34     font-family: Ahem;
  35 }
  36 div > span {
  37         padding-left: 30px;
  38 }
  39 img {
  40     width: 50px;
  41     height: 50px;
  42 }
  43 </style>
  44 </head>
  45 <body onload="test()">
  46 <div>Test for Bugzilla bug:<a href="https://bugs.webkit.org/show_bug.cgi?id=99442"> 99442</a> Regression r130057: Improper preferred width calculation when an inline replaced object, wrapped in an inline flow, follows some text.</div>
  47 <br>
  48 <div id="wrapper" style="width: 50px;">
  49 <div class="test" id="div1">
  50 <span>This is some text</span><span><img src="resources/50x50.gif"/></span>
  51 </div>
  52 <div class="test" id="div2">
  53 <span>This is some text</span><span><img src="resources/50x50.gif"/></span><span>This is some text</span>
  54 </div>
  55 <div class="test" id="div3">
  56 <span>This is some text</span><span><img src="resources/50x50.gif"/></span><span><img src="resources/50x50.gif"/></span><span><img src="resources/50x50.gif"/></span>
  57 </div>
  58 </div>
  59 <p id="description"></p>
  60 <div id="console"></div>
  61 </body>
  62 </html>
  63