SVG Text NG: Improve performance on ancestor scaling changes

Don't re-layout <text> by scaling changes, and re-layout <text>
on other later changes.

When an ancestor changes scaling, we set needs_text_metrics_update_ flag
of descendant <text>s, instead of setting NeedsLayout flag.
After that, if style of a descendant element of a <text> is updated, we
set NeedsLayout regardless of updated property type.

Bug: 1296089
Change-Id: If79a8227394e74b2453cce008ef4513d91a04fb6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3692652
Auto-Submit: Kent Tamura <tkent@chromium.org>
Reviewed-by: Yoshifumi Inoue <yosin@chromium.org>
Commit-Queue: Yoshifumi Inoue <yosin@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1011855}

svg/text/reftests/transform-dynamic-change-ref.html

@@ -6,6 +6,10 @@
     <circle cx="475" cy="975" r="40" stroke="black" stroke-width="2" fill="none" />
     <text fill="red" style="font-size: 40px;" transform="matrix(1, 0, 0, 1, 468, 988)">A</text>
   </svg>
+  <svg width="2384" height="1684" style="position:absolute; left:0; top:200px;">
+    <circle cx="475" cy="975" r="40" stroke="black" stroke-width="2" fill="none" />
+    <text style="font-size: 40px;" transform="matrix(1, 0, 0, 1, 468, 988)"><tspan fill="blue">B</tspan></text>
+  </svg>
 </div>
 
 <svg width="500" height="400" style="transform-origin: 0px 0px; transform: scale(2) translate(-300px, -300px);">

svg/text/reftests/transform-dynamic-change.html

@@ -10,6 +10,10 @@
     <circle cx="475" cy="975" r="40" stroke="black" stroke-width="2" fill="none" />
     <text id="txt" style="font-size: 40px;" transform="matrix(1, 0, 0, 1, 468, 988)">A</text>
   </svg>
+  <svg width="2384" height="1684" style="position:absolute; left:0; top:200px;">
+    <circle cx="475" cy="975" r="40" stroke="black" stroke-width="2" fill="none" />
+    <text style="font-size: 40px;" transform="matrix(1, 0, 0, 1, 468, 988)"><tspan id="inline">B</tspan></text>
+  </svg>
 </div>
 
 <svg id="svg2" width="500" height="400" style="transform-origin: 0px 0px; transform: translate(-300px, -300px);">
@@ -21,6 +25,7 @@
   requestAnimationFrame(() => {
     document.getElementById('moveme').style.transform = 'matrix(0.9, 0, 0, 0.9, -210, -777)';
     document.getElementById('txt').style.fill = 'red';
+    document.getElementById('inline').style.fill = 'blue';
 
     document.getElementById('svg2').style.transform = 'scale(2) translate(-300px, -300px)';
     document.getElementById('text2').style.fill = 'green';