Attachment 356797 Details for Bug 192495 – Calculating the height of Range that is adjacent to a break is incorrect in WebKit.

Calculating the height of Range that is adjacent to a break is incorrect in WebKit.

rangeOverBreaks.html (text/html), 3.08 KB, created by Gabe Giosia on 2018-12-07 03:42:27 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Gabe Giosia

Created: 2018-12-07 03:42:27 PST

Size: 3.08 KB

patch

obsolete

><html>
><head>
>	<style>
>		* {font-size: 1em;line-height: 1em;}
>	</style>
></head>
><body>
><div>
>    <h3>Non broken lines are fine in Safari.</h3>
>    <pre>&lt;div&gt;ABCDEFGHI&lt;/div&gt;</pre>
>	<div id="WithoutBreak">ABCDEFGHI</div>
>	<p id = "WithoutBreakOutPut"></p>
>	<br><br><br>
>    <h3>`getBoundingClientRect()` returns the wrong height in Safari when there are breaks.</h3>
>    <pre>&lt;div&gt;ABC&lt;br&gt;DEF&lt;br&gt;GHI&lt;/div&gt;</pre>
>	<div id="WithBreak">ABC<br>DEF<br>GHI</div>
>	<p id = "WithBreakOutPut"></p>
>	<br><br><br>
>    <h3>Wrapping the Range's startContainer in a span is a workaround for the issue.</h3>
>    <pre>&lt;div&gt;&lt;span&gt;ABC&lt;/span&gt;&lt;br&gt;DEF&lt;br&gt;GHI&lt;/div&gt;</pre>
>	<div id="WithWrappedStart"><span>ABC</span><br>DEF<br>GHI</div>
>	<p id = "WithWrappedStartOutPut"></p>
></div>
><script>
>var range = document.createRange();
>
>var WithoutBreak = document.getElementById('WithoutBreak');
>range.setStart(WithoutBreak.childNodes[0], 2);
>range.setEnd(WithoutBreak.childNodes[0], 4);
>document.getElementById('WithoutBreakOutPut').appendChild(document.createTextNode('range(' + range.toString() + '), height = ' + range.getBoundingClientRect().height))
>document.getElementById('WithoutBreakOutPut').appendChild(document.createElement("br"));
>range.setStart(WithoutBreak.childNodes[0], 2);
>range.setEnd(WithoutBreak.childNodes[0], 7);
>var singleHeight = range.getBoundingClientRect().height;
>document.getElementById('WithoutBreakOutPut').appendChild(document.createTextNode('range(' + range.toString() + '), height = ' + singleHeight))
>
>var WithBreak = document.getElementById('WithBreak');
>range.setStart(WithBreak.childNodes[0], 2);
>range.setEnd(WithBreak.childNodes[2], 1);
>document.getElementById('WithBreakOutPut').appendChild(document.createTextNode('range(' + range.toString() + '), height = ' + range.getBoundingClientRect().height + ' (Should be ~' + (2 * singleHeight) + ')'))
>document.getElementById('WithBreakOutPut').appendChild(document.createElement("br"));
>range.setStart(WithBreak.childNodes[0], 2);
>range.setEnd(WithBreak.childNodes[4], 1);
>document.getElementById('WithBreakOutPut').appendChild(document.createTextNode('range(' + range.toString() + '), height = ' + range.getBoundingClientRect().height + ' (Should be ~' + (3 * singleHeight) + ')'))
>
>var WithWrappedStart = document.getElementById('WithWrappedStart');
>range.setStart(WithWrappedStart.childNodes[0].firstChild, 2);
>range.setEnd(WithWrappedStart.childNodes[2], 1);
>document.getElementById('WithWrappedStartOutPut').appendChild(document.createTextNode('range(' + range.toString() + '), height = ' + range.getBoundingClientRect().height + ' (Should be ~' + (2 * singleHeight) + ')'))
>document.getElementById('WithWrappedStartOutPut').appendChild(document.createElement("br"));
>range.setStart(WithWrappedStart.childNodes[0].firstChild, 2);
>range.setEnd(WithWrappedStart.childNodes[4], 1);
>document.getElementById('WithWrappedStartOutPut').appendChild(document.createTextNode('range(' + range.toString() + '), height = ' + range.getBoundingClientRect().height + ' (Should be ~' + (3 * singleHeight) + ')'))
>
></script>
>
></body>
></html>

<html>
<head>
	<style>
		* {font-size: 1em;line-height: 1em;}
	</style>
</head>
<body>
<div>
    <h3>Non broken lines are fine in Safari.</h3>
    <pre>&lt;div&gt;ABCDEFGHI&lt;/div&gt;</pre>
	<div id="WithoutBreak">ABCDEFGHI</div>
	<p id = "WithoutBreakOutPut"></p>
	<br><br><br>
    <h3>`getBoundingClientRect()` returns the wrong height in Safari when there are breaks.</h3>
    <pre>&lt;div&gt;ABC&lt;br&gt;DEF&lt;br&gt;GHI&lt;/div&gt;</pre>
	<div id="WithBreak">ABC<br>DEF<br>GHI</div>
	<p id = "WithBreakOutPut"></p>
	<br><br><br>
    <h3>Wrapping the Range's startContainer in a span is a workaround for the issue.</h3>
    <pre>&lt;div&gt;&lt;span&gt;ABC&lt;/span&gt;&lt;br&gt;DEF&lt;br&gt;GHI&lt;/div&gt;</pre>
	<div id="WithWrappedStart"><span>ABC</span><br>DEF<br>GHI</div>
	<p id = "WithWrappedStartOutPut"></p>
</div>
<script>
var range = document.createRange();

var WithoutBreak = document.getElementById('WithoutBreak');
range.setStart(WithoutBreak.childNodes[0], 2);
range.setEnd(WithoutBreak.childNodes[0], 4);
document.getElementById('WithoutBreakOutPut').appendChild(document.createTextNode('range(' + range.toString() + '), height = ' + range.getBoundingClientRect().height))
document.getElementById('WithoutBreakOutPut').appendChild(document.createElement("br"));
range.setStart(WithoutBreak.childNodes[0], 2);
range.setEnd(WithoutBreak.childNodes[0], 7);
var singleHeight = range.getBoundingClientRect().height;
document.getElementById('WithoutBreakOutPut').appendChild(document.createTextNode('range(' + range.toString() + '), height = ' + singleHeight))

var WithBreak = document.getElementById('WithBreak');
range.setStart(WithBreak.childNodes[0], 2);
range.setEnd(WithBreak.childNodes[2], 1);
document.getElementById('WithBreakOutPut').appendChild(document.createTextNode('range(' + range.toString() + '), height = ' + range.getBoundingClientRect().height + ' (Should be ~' + (2 * singleHeight) + ')'))
document.getElementById('WithBreakOutPut').appendChild(document.createElement("br"));
range.setStart(WithBreak.childNodes[0], 2);
range.setEnd(WithBreak.childNodes[4], 1);
document.getElementById('WithBreakOutPut').appendChild(document.createTextNode('range(' + range.toString() + '), height = ' + range.getBoundingClientRect().height + ' (Should be ~' + (3 * singleHeight) + ')'))

var WithWrappedStart = document.getElementById('WithWrappedStart');
range.setStart(WithWrappedStart.childNodes[0].firstChild, 2);
range.setEnd(WithWrappedStart.childNodes[2], 1);
document.getElementById('WithWrappedStartOutPut').appendChild(document.createTextNode('range(' + range.toString() + '), height = ' + range.getBoundingClientRect().height + ' (Should be ~' + (2 * singleHeight) + ')'))
document.getElementById('WithWrappedStartOutPut').appendChild(document.createElement("br"));
range.setStart(WithWrappedStart.childNodes[0].firstChild, 2);
range.setEnd(WithWrappedStart.childNodes[4], 1);
document.getElementById('WithWrappedStartOutPut').appendChild(document.createTextNode('range(' + range.toString() + '), height = ' + range.getBoundingClientRect().height + ' (Should be ~' + (3 * singleHeight) + ')'))

</script>

</body>
</html>

Actions: View

Attachments on bug 192495: 356797 | 363351 | 363355 | 363508 | 363509 | 363829 | 363834