1683820 - The <dialog> is rendered on the wrong position when using The CSS "filter: brightness()".

Status: RESOLVED DUPLICATE of bug 489100

(Core :: Layout, defect, P3)

Description

[prada960808]

Attachment: testcase1.html

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.193 Safari/537.36

Steps to reproduce:

I leverage metamorphic testing to find the rendering bug in Firefox.
I compare two rendered pages from the original DOM tree and deleted & restored DOM tree for metamorphic testing.

1. open attached html file on Firefox 85.
2. run following javascript code to change and restore the tagname of <dialog>.
   tag_change(4,'label');
   tag_change(4, 'dialog');

Actual results:

The position of <dialog> becomes wrong after executing the js code due to CSS "filter: brightness()".

Expected results:

The position of <dialog> should be same.

Comment 1

[prada960808]

Attachment: 85.0a1_before.png

Comment 2

[prada960808]

Attachment: 85.0a1_after.png

Comment 3

[prada960808]

Comment on attachment 9194365 [details]
testcase1.html

><html><head><style>
>
>#htmlvar00005 { filter: brightness(); }
>body { overflow: hidden;
>
></style>
><script>
>function get_elements() {
>    return document.querySelectorAll('*[id]');
>}
>function tag_change(idx, tag){
>    var eles = get_elements();
>    var len = eles.length;
>
>    if (len < 1) return ;
>
>    var orl = eles[idx % len];
>    var rep = document.createElement(tag);
>    for(var i = 0, l = orl.attributes.length; i < l; ++i){
>        var nName  = orl.attributes.item(i).nodeName;
>        var nValue = orl.attributes.item(i).nodeValue;
>        rep.setAttribute(nName, nValue);
>    }
>    rep.innerHTML = orl.innerHTML;
>    orl.parentNode.replaceChild(rep, orl);
>}
></script>
>
></head><body><dl id="htmlvar00001"><dd id="htmlvar00002" solid="" wrap="hard">yUeV2ETwXjd0;_Ehw</dd></dl><button dir="RTL" id="htmlvar00004" onmousedown="eventhandler1()">"")&lt;%{@[</button><span id="htmlvar00005" width="0"><dialog id="htmlvar00006" mso-width-source:="" open="true" width="0">i7zqQ) 8</dialog></span></body></html>

Comment 4

[prada960808]

Attachment: repro.png

Comment 5

[prada960808]

Attachment: new_testcase.html

The "testcase1.html" is wrong.
Please test with "new_testcase.html".

Comment 6

[Emilio Cobos Álvarez [:emilio]]

This is a known bug with absolutely positioned kids of relatively-positioned ancestors (for this case, filter: brightness() behaves as position: relative on the span).

Comment 7

[Ting-Yu Lin [:TYLin] (PST, UTC-7)]

Bug 489100 should fix the position of absolutely positioned kids with inline element as an absolute containing block.