Bug 227978 - Failed to get-node by using getElementById in webkitGTK while insert node by using inner HTML(Document-fragment Element).
Summary: Failed to get-node by using getElementById in webkitGTK while insert node by ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: WebKit Local Build
Hardware: PC Linux
: P2 Critical
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2021-07-14 20:55 PDT by sssdev
Modified: 2021-07-22 21:17 PDT (History)
0 users

See Also:

Attachments
Sample HTML test-code (543 bytes, text/html)
2021-07-15 21:02 PDT, sssdev 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description sssdev 2021-07-14 20:55:45 PDT 
Issue : DOM Node Insertion failure in webkitGTK while insert node by using innerHTML.

Google Chrome behaviour:

In Chrome successfully element displayed while get the by id('clip').
Output : Check Id[object SVGRectElement]*****.
But in webkit null instance returned.
Output : Check Idnull*****.

WebkitGTK Revision : 2.30 and we validated the safari 14 version we have faced the same output. Please advice for node insertion failure.

JS TestCode;

<html>
<head>
<script type = "text/javascript">
function Html2Element(element)
{
   var _div = document['createElement']("div");
   _div.innerHTML = element;

   return _div['firstChild'];
}
function CheckId()
{
   var _div = Html2Element("<svg width='10' height='10'>"+"<clippath><rect id='clip' /></clippath>"+"</svg>");
   document.writeln("Check Id"+_div['getElementById']('clip')+"*****");
}
</script>
</head>
<body onload="CheckId()">
</body>
</html>
Comment 1 sssdev 2021-07-15 21:02:56 PDT 
Created attachment 433652 [details]
Sample HTML test-code

Sample HTML test-code
Comment 2 sssdev 2021-07-15 21:16:21 PDT 
We have checked In DOM tree node properly maintained by using below HTML TestCode.

<html>
<head>
<script type = "text/javascript">
function Html2Element(element)
{
   var _div = document['createElement']("div");
   _div.innerHTML = element;

   //console.log("innerHTML"+_div.innerHTML+"********"+_div.innerHTML['firstChild']);
   return _div['firstChild'];
}
function checkChildNodes(_div)
{
   var svgElementChildes = _div.childNodes;
   for ( var childnodeindex = 0; childnodeindex < svgElementChildes.length; childnodeindex++ )
   {
	   document.writeln("Node ***"+svgElementChildes[childnodeindex]+"<br>");
	   checkChildNodes(svgElementChildes[childnodeindex]);
   }
}
function CheckId()
{	
   var _div = Html2Element("<svg width='10' height='10'>"+"<clippath><rect id='clip' /></clippath>"+"</svg>");
   document.writeln("Check Id"+_div['getElementById']('clip')+"*****<br>");
   checkChildNodes(_div);
}
</script>
</head>
<body onload="CheckId()">
</body>
</html>


Output of HTML TestPage while run in webkit 2.30:

Check Idnull*****
Node ***[object SVGClipPathElement]
Node ***[object SVGRectElement]