wpt / css / css-backgrounds / background-position / background-position-bottom-right-repeat-round.html

Status: PASS | Duration: 6ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/css-backgrounds/background-position/background-position-bottom-right-repeat-round.html

<!doctype html>
<title>background-position with 'bottom' and 'right' edge keywords with background-repeat 'round'</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-position">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-repeat">
<link rel="match" href="reference/background-position-bottom-right-repeat-round-ref.html">
<style>
  #target {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(45deg, lime, green);
    background-repeat: round;
    background-size: 51px 51px;
    background-position: right 25% bottom 25%;
  }
</style>
<div id="target"></div>

/css/css-backgrounds/background-position/reference/background-position-bottom-right-repeat-round-ref.html

<!doctype html>
<title>background-position with 'bottom' and 'right' edge keywords with background-repeat 'round' (reference)</title>
<style>
  #target {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(45deg, lime, green);
    background-repeat: round;
    background-size: 51px 51px;
    background-position: left 75% top 75%;
  }
</style>
<div id="target"></div>