LayoutTests/fast/block/block-parent-with-zero-width-child.html

   1 <head>
   2 <title>Test case for bug https://bugs.webkit.org/show_bug.cgi?id=50135</title>
   3 <script src="../js/resources/js-test-pre.js"></script>
   4 <style>
   5
   6 .wrapper {
   7         height: 70px;
   8         width: 400px;
   9         border: 1px solid red;
  10         position: relative;
  11         padding-top: 50px;
  12         margin-bottom: 10px;
  13 }
  14
  15 .wrapper p {
  16         position: absolute;
  17         margin: 0;
  18 }
  19
  20 .wrapper p.topright {
  21         top: 0;
  22         right: 0;
  23 }
  24
  25 .wrapper p.bottomright {
  26         bottom: 0;
  27         right: 0;
  28 }
  29
  30 .wrapper p span {
  31         display: block;
  32         width: 0;
  33         height: 50px;
  34         padding-left: 50px;
  35         overflow: hidden;
  36         background: yellow;
  37 }
  38
  39 </style>
  40 <script>
  41 function startTest(){
  42
  43 shouldBe('document.getElementById("p_topRight").getClientRects()[0].width ', '50');
  44 shouldBe('document.getElementById("p_botRight").getClientRects()[0].width ', '50');
  45 isSuccessfullyParsed();
  46
  47 // Cleanup
  48 var divList = document.getElementsByClassName('wrapper');
  49 while(divList.length){
  50  var node = divList.item(divList.length - 1);
  51  document.body.removeChild(node);
  52 }
  53
  54 }
  55 </script>
  56 </head>
  57 <body onload="startTest();">
  58 <script>
  59     description("This tests if the parent block has the correct size when the child element has fixed width as zero.")
  60 </script>
  61 <div class="wrapper">
  62         The yellow cube should be positioned top-right
  63         <p id="p_topRight" class="topright">
  64                 <span>This text is hidden</span>
  65         </p>
  66 </div>
  67 <div class="wrapper">
  68         The yellow cube should be positioned bottom-right
  69         <p id="p_botRight" class="bottomright">
  70                 <span>This text is hidden</span>
  71         </p>
  72 </div>
  73 </body>