Bug 181478 – tspan elements not positioned properly when updating text font-size attribute

• Component: Layout and Rendering
• Status: NEW

https://jsfiddle.net/qperf9pw/3/

I've also added the code at the end in case there are problems with jsfiddle

Issue:
Updating the font size attribute on the parent text element causes tspan elements not to be positioned correctly

//HTML
<div>In Chrome - Updating the font size shows the desired result</div>
<div>In Safari - You have to reset the dy attribute in addition to achieve desired results</div>

<button type="button" id="fontsizebtn">
  Update the font size
</button>

<button type="button" id="resetbtn">
  Reset the attributes
</button>

<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g>
    <text x="0" y="0">
      <tspan x="0.1em" dy="1em">test</tspan>
      <tspan x="0.1em" dy="1em">test</tspan>
    </text>
  </g>
</svg>

// JS

document
    .querySelector('#fontsizebtn')
    .addEventListener('click', function() {

      document.querySelector('text').style.fontSize = '30pt';
    });
  
document
    .querySelector('#resetbtn')
    .addEventListener('click', function() {
		
      document.querySelectorAll('tspan').forEach(function(tspan) {
    	tspan.setAttribute('dy', '1em');
      });
    });

[Ahmad Saleem]

I am able to reproduce this bug in Safari 16 and Safari Technology Preview 155 using JSFiddle from Comment 01 and Safari had to "Reset" after "update" unlike other browsers (Chrome Canary 109 and Firefox Nightly 107), which show desired result without any "reset". Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/122586775>