vars-background-shorthand-001.html (996B)
1 <!DOCTYPE html> 2 <title>CSS Variables 1: Test variables in background shorthand.</title> 3 <link rel="author" title="Lea Verou" href="mailto:lea@verou.me"> 4 <link rel="help" href="https://www.w3.org/TR/css-variables-1/#variables-in-shorthands"> 5 <link rel="match" href="reference/vars-background-shorthand-001-ref.html"> 6 <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-20000"> 7 <style> 8 div { 9 width: 50px; 10 height: 50px; 11 padding: 50px; 12 margin: 10px; 13 display: inline-block; 14 background: red; 15 } 16 17 div#d1 { 18 --foo: green; 19 background: var(--foo); 20 } 21 22 div#d2 { 23 --foo: green, green; 24 background: linear-gradient(var(--foo)); 25 } 26 27 div#d3 { 28 --foo: linear-gradient(green, green); 29 background: var(--foo); 30 } 31 32 div#d4 { 33 --foo: center / 0 0; 34 background: green linear-gradient(red, red) var(--foo, ); 35 } 36 </style> 37 <p>Test passes if you see four green squares, and no red.</p> 38 <div id="d1"></div> 39 <div id="d2"></div> 40 <div id="d3"></div> 41 <div id="d4"></div>