Home|About|Gaming cabinet|Archives|How it works|Starter sites

GeezerVison is showing github.com — wpt/css/css-backgrounds/background-size-009.html at master · web-platform-tests/wpt

Expand file tree

/

background-size-009.html

Copy path

More file actions

More file actions

Latest commit

History

History

39 lines (38 loc) · 1.97 KB

/

background-size-009.html

Copy path

File metadata and controls

39 lines (38 loc) · 1.97 KB

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Backgrounds and Borders Test: background-size - one <percentage> value</title>

<link rel="author" title="Intel" href="http://www.intel.com">

<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9 Sizing Images: the 'background-size' property">

<link rel="match" href="reference/background-size-006-ref.html">

<meta name="flags" content="image">

<meta name="assert" content="Check if 'background-size' has only one percentage value, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. A percentage is relative to the dimensions of the background positioning area. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 45px.">

<style>

#ref-overlapped-red {

background-color: red;

height: 45px;

width: 45px;

}

#test-overlapping-green {

background-image: url(support/1x1-green.png);

background-repeat: no-repeat;

background-size: 45%;

bottom: 45px;

height: 50px;

position: relative;

width: 100px;

}

/*

background-size: 45% is relative to the background positioning area

which is 100px by 100px in this test.

*/

</style>

</head>

<body>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="ref-overlapped-red"></div>

<div id="test-overlapping-green"></div>

</body>

</html>