element.innerText within an <foreignObject> is incorrect
Categories
(Core :: SVG, defect, P3)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox79 | --- | fixed |
People
(Reporter: itszn, Assigned: longsonr)
References
Details
Attachments
(3 files)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36
Steps to reproduce:
Load an html file with the following content:
<html>
<body>
<svg><foreignObject><span id="x">hello</span></foreignObject></svg>
<script>
alert(x.innerText)
</script>
</body>
</html>
Actual results:
x.innerText returned an empty string
Expected results:
x.innerText should return "hello"
|
||
Comment 1•5 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
|
||
Comment 2•5 years ago
|
||
I can reproduce this on Firefox 71 nightly today by https://jsfiddle.net/utrny7xj/. The definition of innerText says it should include its descendants. However, foreignObject is kind of a different XML namespace. I'm not sure if it is the expected result on Firefox. Chrome seems correct, anyway.
I didn't look closely at if the standards say it should do this, but innerText within <foreignObject> works on Chrome, Edge, and Safari (I noticed this when an app wasn't working on firefox but worked everywhere else). Also innerHTML and textContent work as expected with <foreignObject> in Firefox.
|
Assignee | |
Comment 4•4 years ago
|
||
|
|
Assignee | |
Comment 5•4 years ago
|
||
|
||
Updated•4 years ago
|
|
|
Assignee | |
Comment 6•4 years ago
|
||
|
||
Comment 7•4 years ago
•
|
||
We've got a report that seems to be related to this issue, except the child element is a contenteditable div. I've attached a reduced test case.
The site is using the following code:
{
key: "onInput",
value: function() {
var e = this.foreignObject.firstElementChild;
this.text = e.innerText,
this.setSize(u.svgTextSize(this.text, this.props)),
this.textNode.innerHTML = u.svgText(this.text, this.props).innerHTML,
this.changed(l.TEXT_LAYER_INPUT_CHANGE, {
id: this.contentId,
text: this.text
})
}
}
e.innerText is an empty string in this case, similarly to the initial testcase, which causes an issue with calculations later on in this.setSize.
|
|
||
Updated•4 years ago
|
Pushed by longsonr@gmail.com: https://hg.mozilla.org/integration/autoland/rev/f97fcfd4a045 element.innerText should work with SVG text and foreignObject text r=dholbert
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/24300 for changes under testing/web-platform/tests
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
|
||
Comment 11•4 years ago
|
||
| bugherder | ||
Upstream PR merged by moz-wptsync-bot
Description
•