Fix up getPointAtLength with inline style of path

This patch fixes up that compute path with inline style of path on
|getPointAtLength|. And |EnsureComputedStyle| is called by force
before path is computed. Because the computed style of the path element
that is 'display:none' doesn't have the value of inline style.

Bug: 972979, 1108966
Change-Id: I584f175e30123c8335961c5f28179d9f8d2f288c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2968906
Commit-Queue: Hyunjune Kim <hyunjune.kim@samsung.com>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#893476}

AUTHORS

@@ -415,6 +415,7 @@ Hyungwook Lee <withlhw@gmail.com>
 HyunJi Kim <hjkim3323@gmail.com>
 Hyunjun Shin <hyunjun.shin2@navercorp.com>
 Hyunjun Shin <shjj1504@gmail.com>
+Hyunjune Kim <hyunjune.kim@navercorp.com>
 Hyunjune Kim <hyunjune.kim@samsung.com>
 Hyunki Baik <hyunki.baik@samsung.com>
 Ian Cullinan <cullinan@amazon.com>

third_party/blink/renderer/core/svg/svg_path_element.cc

@@ -81,6 +81,7 @@ SVGPointTearOff* SVGPathElement::getPointAtLength(
   GetDocument().UpdateStyleAndLayoutForNode(this,
                                             DocumentUpdateReason::kJavaScript);
 
+  EnsureComputedStyle();
   const SVGPathByteStream& byte_stream = PathByteStream();
   if (byte_stream.IsEmpty()) {
     exception_state.ThrowDOMException(DOMExceptionCode::kInvalidStateError,

third_party/blink/web_tests/external/wpt/svg/types/scripted/SVGGeometryElement.getPointAtLength-04.svg

@@ -5,6 +5,7 @@
   <h:script src="/resources/testharnessreport.js"/>
   <path id='pathElement1' d='M0,0L100,0L100,100' description='path with display: defualt'/>
   <path id='pathElement2' style='display:none' d='M0,0L100,0L100,100' description='path with display: none'/>
+  <path id='pathElement3' style='display:none; d:path("M0,0L100,0L100,100");' description='path with display: none and inline style'/>
   <rect id='rectElement1' x='0' y='0' width='50' height='50' description='rect with display: default'/>
   <rect id='rectElement2' style='display:none' x='0' y='0' width='50' height='50' description='rect with display: none'/>
   <circle id='circleElement1' cx='0' cy='0' r='50' description='circle with display: defualt'/>
@@ -16,7 +17,7 @@
   <ellipse id='ellipseElement1' cx='0' cy='0' rx='50' ry='50' description='ellipse with display: default'/>
   <ellipse id='ellipseElement2' style='display:none' cx='0' cy='0' rx='50' ry='50' description='ellipse with display: none'/>
   <script>
-['pathElement1', 'pathElement2'].forEach(elementId => {
+['pathElement1', 'pathElement2', 'pathElement3'].forEach(elementId => {
   test(function() {
     let element = document.getElementById(elementId);
     var point = element.getPointAtLength(50);