background-position-xy-three-four-values-passthru.html (1313B)
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 5 <title>CSS Test: 'Background-position' with three and four values</title> 6 <link rel="help" href="http://www.w3.org/TR/css3-background/#background-position" /> 7 <meta name="assert" content="background-position-x/y will round-trip serialized values even if the new three/four value syntax is used for background-position." /> 8 <link rel="match" href="reference/background-position-three-four-values-ref.html"> 9 <style type="text/css"> 10 div { 11 width: 200px; 12 height: 200px; 13 border: 2px solid black; 14 background-image: url("support/blue_color.png"); 15 background-repeat: no-repeat; 16 display: inline-block; 17 } 18 #test1 { 19 background-position: left 50px center; 20 } 21 #test2 { 22 background-position: right 25px top 75%; 23 } 24 #test3 { 25 background-position: left 25px bottom 75%; 26 } 27 #test4 { 28 background-position: right 25px bottom 25%; 29 } 30 </style> 31 32 </head> 33 <body> 34 35 <div id="test1"></div> 36 <div id="test2"></div> 37 <div id="test3"></div> 38 <div id="test4"></div> 39 40 <script> 41 for (let id of ['test1','test2','test3','test4']) { 42 let d = document.getElementById(id); 43 let x = getComputedStyle(d).backgroundPositionX; 44 let y = getComputedStyle(d).backgroundPositionY; 45 d.style.backgroundPositionX = x; 46 d.style.backgroundPositionY = y; 47 } 48 </script> 49 50 </body> 51 </html>