1702976 - Sound icon on webrtc website isn't correctly displayed

Status: NEW

(Firefox :: Tabbed Browser, defect, P3)

Description

[Hani Yacoub, Desktop QA]

Preconditions

In about:config set:
browser.proton.enabled = true

Affected versions

Firefox 89.0a1

Affected platforms

Windows 10 x64
Windows 7 x64
macOS 10.15
Ubuntu 20.04

Steps to reproduce

1. Open Firefox.
2. Go to https://mozilla.github.io/webrtc-landing/gum_test.html or https://appr.tc/
3. Click on "Camera & microphone" then on allow.
4. Observe the favicon
5. Click on Picture-in-picture button and enable the sound.
6. Observe the position of the sound icon.
7. Mute the video.
8. Hover the mouse over favicon.

Expected result

Step 4: Favicon should be displayed.
Step 6: Sound icon should be replacing the favicon.
Step 8: Mute tab notification shouldn't be displayed under tabs title.

Actual Result

Step 4: Favicon is not displayed.
Step 6: Sound icon is overlapping the tab favicon and title.
Step 8: Mute tab notification is displayed under tabs title.

Screen recorder: https://streamable.com/t7x1ab