chrome not applying css?

132 views
Skip to first unread message

R. Stricklin

unread,
Jul 15, 2022, 5:29:39 AM7/15/22
to Selenium Users
I am using selenium to drive chrome, in a ruby project. Selenium is used to query the width of a specific element in a dynamically generated page. The basic structure works.

What I just noticed is that I am getting widths that are smaller than expected. I have tracked this down to chrome not applying the font-family: from the supplied css; it is measuring the width of the element, using the default font (Times New Roman). 

Here is an real example of a call made in my program:
    @@webdriver.get('data:text/html;charset=utf-8,#{@current_block.to_html}')

This may result in, for one example:

    @@webdriver.get('data:text/html;charset=utf-8,<html><head><link rel="stylesheet" type="text/css" href="/path/to/stylesheet.css"></link></head><body><div id="man"><span id="selenium">/etc/termcap&nbsp;&nbsp;&nbsp;</span></div></body></html>')

    @@webdriver.find_element(id: 'selenium').size.width

then gives me the calculated width of that span. It's about 10% shorter than expected, due to having been rendered in Times New Roman instead of the font given in my stylesheet.

If I just load this exact same html from a local file, instead of going through selenium and the chromedriver, I get the correct font from my style sheet. I can watch it render the various pages in not-headless mode and clearly see the wrong font, so it's not a question of headless vs. not.

In an attempt to troubleshoot, I added some debugging output:

    warn "element css font #{@@webdriver.find_element(id: 'selenium').css_value('font-family')}"

That tells me that chrome hasn't even touched the css. The reported font family is "Times New Roman".

If I change the rendered html to use a remote CSS (not a local file):

    @@webdriver.get('data:text/html;charset=utf-8,<html><head><link rel="stylesheet" type="text/css" href="http://dev.online.foo/stylesheet.css"></link></head><body><div id="man"><span id="selenium">/etc/termcap&nbsp;&nbsp;&nbsp;</span></div></body></html>')

.css_value actually does report the expected font-family from my style sheet.

This would be fine, but despite the css_value being correct, chrome is clearly still rendering with Times New Roman.

execute_cdp('CSS.enable') doesn't seem to make any difference, but it's possible I don't understand how to use it.

I need the font to apply because I'm calculating span widths for some layout hacks necessary for processing non-html documentation for the web, and if it's coming back too small then I get layout collisions. Here's a fair example of what happens:


I'm pretty sure this used to work. I can't say when it stopped, or even say for sure I didn't just imagine it working once upon a time. I just updated to chromedriver101 (from 89) with no change. I've been reading web forum posts from people who want to do the opposite, prevent css from applying, who are pretty uniformly being told it isn't possible. So... where am I going wrong?!

I'm on a Mac (big sur) in case it makes any dang old difference.


Thanks;

ok
bear.
Reply all
Reply to author
Forward
0 new messages