Skip to content

Commit e01d805

Browse files
fantasaifantasai
committed
[css-values-4] Fix confusing background-position example. See #3482 (comment) and reply in #3482 (comment) 
1 parent 37f28fc commit e01d805

File tree

2 files changed

+20
-37
lines changed

2 files changed

+20
-37
lines changed

‎css-values-3/Overview.bs

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1553,14 +1553,15 @@ Mathematical Expressions: ''calc()''
15531553
15541554

15551555
1556-
The following example stacks two centered background images,
1557-
with one offset slightly from the other.
1556+
The following example stacks two background images,
1557+
with the first perfectly centered
1558+
and the second offset 20px to the bottom and to the left of the first.
15581559

15591560
15601561
		.foo {
15611562
			background: url(top.png), url(bottom.png);
15621563
			background-repeat: no-repeat;
1563-
			background-position: calc(50% + 20px) calc(50% + 20px), 50% 50%;
1564+
			background-position: 50% 50%, calc(50% + 20px) calc(50% + 20px);
15641565
		}
15651566
		
15661567
	
@@ -1715,24 +1716,14 @@ Computed Value
17151716
	they apply whenever a ''calc()'' expression contains percentages.
17161717

17171718
	
1718-
		For example, 'background-position' has special behavior for percentage values, different from lengths:
1719-
1720-
		
1721-
		.foo {
1722-
			width: 200px;
1723-
			background-image: url(bg.png);
1724-
			background-position: left 50%;
1725-
			/* different than: */
1726-
			background-position: left 100px;
1727-
			/* despite 50% of 200px being 100px */
1728-
		}
1729-
		
1719+
		For example,
1720+
		whereas 'font-size' computes percentage values at computed value time
1721+
		so that font-relative length units can be computed,
1722+
		'background-position' has layout-dependent behavior for percentage values,
1723+
		and thus does not resolve percentages until used-value time.
17301724

1731-
		Due to this, 'background-position' preserves the percentage in a ''calc()''
1732-
		rather than resolving it directly into a length,
1733-
		so that an expression like ''background-position: left calc(50% + 20px) center''
1734-
		properly centers the background and then shifts it ''20px'' to the right,
1735-
		rather than placing its left edge 20px off of center.
1725+
		Due to this, 'background-position' computation preserves the percentage in a ''calc()''
1726+
		whereas 'font-size' will compute such expressions directly into a length.
17361727
	
17371728

17381729
	css-values-4/Overview.bs
Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2289,24 +2289,14 @@ Computed Value
22892289
	
22902290

22912291
	
2292-
		For example, 'background-position' has special behavior for percentage values, different from lengths:
2293-
2294-
		
2295-
		.foo {
2296-
			width: 200px;
2297-
			background-image: url(bg.png);
2298-
			background-position: left 50%;
2299-
			/* different than: */
2300-
			background-position: left 100px;
2301-
			/* despite 50% of 200px being 100px */
2302-
		}
2303-
		
2292+
		For example,
2293+
		whereas 'font-size' computes percentage values at computed value time
2294+
		so that font-relative length units can be computed,
2295+
		'background-position' has layout-dependent behavior for percentage values,
2296+
		and thus does not resolve percentages until used-value time.
23042297

2305-
		Due to this, 'background-position' preserves the percentage in a ''calc()''
2306-
		rather than resolving it directly into a length,
2307-
		so that an expression like ''background-position: left calc(50% + 20px) center''
2308-
		properly centers the background and then shifts it ''20px'' to the right,
2309-
		rather than placing its left edge 20px off of center.
2298+
		Due to this, 'background-position' computation preserves the percentage in a ''calc()''
2299+
		whereas 'font-size' will compute such expressions directly into a length.
23102300
	
23112301

23122302
	 commit comments
Comments
 (0)