SIA-R66 and SIA-R69 fail to account for background images not used as background images

[kasperisager]

Confused? So was I 🙈 This bit of HTML and CSS currently fails both rules due to seemingly poor contrast:

<style>
  h1 {
    color: #333;
    background-image: linear-gradient(
      to right,
      rgb(0, 0, 0) 0%,
      rgb(0, 0, 0) 100%
    );
    background-repeat: repeat-x;
    background-position: 0px 100%;
    background-size: 100% 2px;
  }
</style>

<h1>Hello world</h1>

This is what it renders:

Yep, that's a background image being used to create a border. Because, why not? 🤷 We need to deal with that.

• Follow up on DEV-11379.

[kasperisager]

We'll return None from getBackground() if we encounter a background-size.

[Jym77]

Depends on #784.

[offsetChris]

Hello, Just saw this linked in an issue and thought I would also throw in the situation of using pseudo elements as the graphical indicator. I've seen this in the past and wondering how it would behave for this check. I can make this a separate issue too if needed since it doesn't relate exactly to the issue subject.

h1:after{
 content:"";
 height:2px;
 width:100%;
 background-color:#000;
 display:inline-block;
}