rune@ I think this is a bug with what sheets to consider?

You need to be more specific about which rules are added to which stylesheet and where you add elements to the MediaDocument structure that you expect to match the added rules.

you can apply this cl locally: https://codereview.chromium.org/1780043002/, and move all the css from MediaDocument.cpp to mediaControlsNew.css:

body:-webkit-full-page-media > div > a {
   display: block;
   width: 120px;
   height: 36px;
   background: #4285F4;
   font-family: Roboto;
   font-size: 14px;
   border-radius: 5px;
   color: white;
   font-weight: bold;
   text-decoration: none;
   text-transform: uppercase;
   text-align: center;
   line-height: 36px;
   margin: 32px auto 0 auto;
}


body:-webkit-full-page-media > div {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); 
}

Now build the code with os=android (not sure whether the bug reproduces on desktop though) and install it on a android phone, you can easily see that the button is misplaced when document loads, but works fine when you refreshes the page.

Ah. It's because the specific UA style sheets for svg, media controls, etc are lazily loaded as we see elements which need them. So, for media controls in particular, we don't create the default style until we see a video or audio element. That means the elements we calculate style for before we encounter a media element (like body in this case) will not get the right style the first time.

The assumption for mediaControls.css is that it is for styling media controls only. They are always in video/audio's UA shadow?

Having these rules in html.css instead should work though?

Yes, moving the rules to html.css works. Thanks for the info

Sounds like this was an implementation detail resolved in #4/5