734960 - Padding of inline elements is sometimes (ends with a <br>?) not taken into account when calculating the width of an element

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[jan dvorak]

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:9.0.1) Gecko/20100101 Firefox/9.0.1
Build ID: 20111220165912

Steps to reproduce:

Minimal test:

<p style="position:absolute"><span style="padding-right:0.3em">test test<br/></span></p>

If either position:absolute, padding-right:0.3em or <br/> is removed, text is not wrapped.

Applies to 9.0.1 on Windows as well as 10.0.2 on Linux.


Actual results:

text is wrapped onto a new line. Firebug reports the p element is approximately the width it should be. The br element takes up no space (this seems to be correct).


Expected results:

text stays in one line. Neither Chrome nor IE9 wrap in this case.

Comment 1

[[:Aleksej]]

Attachment: testcase from comment 0

Comment 2

[[:Aleksej]]

Wraps as described in 2013-11-17-03-02-03-mozilla-central-firefox-28.0a1.en-US.linux-x86_64.

Comment 3

[[:Aleksej]]

not reproduced: 2006-12-07-04-trunk.firefox-3.0a1.en-US.linux-i686
reproduced:     2006-12-08-04-trunk.firefox-3.0a1.en-US.linux-i686

Comment 4

[Dieter]

This code won't work corrctly with Percentage 
If you use 'rem', 'em' or 'px' instead of % for definition of left-padding and right-padding, it seems to work. 

Example: (The text "Kommt 2017 derr Grüne Bart endlich ab?" shout be fully backgtrounded  by the image)

<div class="ui-widget-content [ rotation ]" style="position: relative; width:auto; height:auto; transform-origin: 50% 50%; transform: rotate(deg);">
<div class="positioner-cartoon-bubble js-bubble-container " data-svg-container="1" style="position: absolute; display: block; top: 0px; bottom: 0px; left: 0px; right: 0px; filter: alpha(100); opacity:1; ;width: 100%; height: 100%;" title="Grüner Filz ist geil, oder?">
<div class="nix" style="position:absolute; top:0; left:0; transform-origin: 0% 0%; width:100%; height: 100%; z-index: 7;">
<svg id="svg3348" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="640" height="480" version="1.1" viewBox="0 0 640 480" preserveAspectRatio="none" style="width:100%; height:100%;">
<defs id="defs3350">
<metadata id="metadata3353">
<g id="layer1">
<path id="path3352" style="fill:#eeeeee;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 4,6 48.125,30 66.25,5 84.375,30 102.5,5 120.625,30 138.75,5 156.875,30 175,5 193.125,30 211.25,5 229.375,30 247.5,5 265.625,30 283.75,5 301.875,30 320,5 338.125,30 356.25,5 374.375,30 392.5,5 410.625,30 428.75,5 446.875,30 465,5 483.125,30 501.25,5 519.375,30 537.5,5 555.625,30 573.75,5 591.875,30 635,3 610,43.125 635,54.25 610,69.375 635,80.5 l -25,15.125 25,11.125 -25,15.125 25,11.125 -25,15.125 25,11.125 -25,15.125 25,11.125 -25,15.125 25,11.125 -25,15.125 25,11.125 -25,15.125 25,11.125 -25,15.125 25,....875,450 283.75,475 265.625,450 247.5,475 229.375,450 211.25,475 193.125,450 175,475 156.875,450 138.75,475 120.625,450 102.5,475 84.375,450 c 0,0 -12.083333,25 -18.125,25 -6.041667,0 -18.125,-25 -18.125,-25 L 4,476 30,436.875 4,424.75 30,410.625 4,398.5 30,384.375 4,372.25 30,358.125 4,346 30,331.875 4,319.75 30,305.625 4,293.5 30,279.375 4,267.25 30,253.125 4,241 30,226.875 4,214.75 30,200.625 4,188.5 30,174.375 4,162.25 30,148.125 4,136 30,121.875 4,109.75 30,95.625 4,83.5 30,69.375 4,57.25 30,43.125 Z">
</g>
</svg>
</div>
</div>
<div class="speechbubble-text" style="position: relative; z-index: 14; height:auto; width:auto; " data-text-over-svg="1">
<div style="">
<div style="width: 151px; color: rgb(127, 126, 236); padding: 12% 120% 12% 50%;">
<p>Kommt 2017 derr Grüne Bart endlich ab?!?</p>
</div>
</div>
</div>
<div class="js-resource"> </div>
</div>