background-position-calc-minmax-001.html (2745B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Background and Borders Test: background-position with min and max percentages</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-position"> 9 <link rel="help" href="https://www.w3.org/TR/css-values-4/#comp-func"> 10 11 <!-- 12 13 Issue 4227: [css-values-4] min/max(%, %) should explicitly evaluate 14 against the % value, not the resolved value 15 https://github.com/w3c/csswg-drafts/issues/4227 16 17 Bug 1689244: Don't eagerly resolve min() expressions that have a 18 percent value (at least not if the percent value could be resolved 19 against a negative percent basis) 20 https://bugzilla.mozilla.org/show_bug.cgi?id=1689244 21 22 --> 23 24 <link rel="match" href="reference/ref-filled-green-100px-square.xht"> 25 26 <meta content="" name="flags"> 27 <meta content="This test checks that when the background positioning area is smaller than the width of background image, then the 'background-position' percentage value will resolve as a negative offset." name="assert"> 28 29 <style> 30 div 31 { 32 height: 25px; 33 width: 100px; 34 } 35 36 div#first-sub-test 37 { 38 background-image: url("support/pattern-rg-rr-200x200.png"); 39 background-position: min(0%, 100%) max(0%, 100%); 40 41 /* 42 43 the first value represents the horizontal position (or offset) and (...) 44 the second value represents the vertical position (or offset). The 45 <length-percentage> values represent an offset of the top left 46 corner of the background image from the top left corner of the 47 background positioning area. 48 49 A percentage for the horizontal offset is relative to 50 (width of background positioning area - width of background image). 51 A percentage for the vertical offset is relative to 52 (height of background positioning area - height of background image), 53 where the size of the image is the size given by background-size. 54 55 */ 56 } 57 58 div#second-sub-test 59 { 60 background-image: url("support/pattern-rr-rg-200x200.png"); 61 background-position: min(0%, 100%) min(0%, 100%); 62 } 63 64 div#third-sub-test 65 { 66 background-image: url("support/pattern-rr-gr-200x200.png"); 67 background-position: max(0%, 100%) min(0%, 100%); 68 } 69 70 div#fourth-sub-test 71 { 72 background-image: url("support/pattern-gr-rr-200x200.png"); 73 background-position: max(0%, 100%) max(0%, 100%); 74 } 75 </style> 76 77 <p>Test passes if there is a filled green square and <strong>no red</strong>. 78 79 <div id="first-sub-test"></div> 80 81 <div id="second-sub-test"></div> 82 83 <div id="third-sub-test"></div> 84 85 <div id="fourth-sub-test"></div>