position-computed.tentative.html (6236B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Values and Units Module Level 5: computed values for <position></title> 6 <link rel="author" title="Sam Weinig" href="mailto:sam@webkit.org"> 7 <link rel="help" href="https://drafts.csswg.org/css-values-5/#position"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/computed-testcommon.js"></script> 11 </head> 12 <body> 13 <div id="container"> 14 <div id="target"></div> 15 </div> 16 <script> 17 const property = "object-position"; 18 19 test_computed_value(property, "10% center", "10% 50%"); 20 test_computed_value(property, "right 30% top 60px", "70% 60px"); 21 test_computed_value(property, "-20% -30px"); 22 test_computed_value(property, "30px center", "30px 50%"); 23 test_computed_value(property, "40px top", "40px 0%"); 24 test_computed_value(property, "right 20% bottom 10%", "80% 90%"); 25 test_computed_value(property, "right bottom", "100% 100%"); 26 test_computed_value(property, "center 50px", "50% 50px"); 27 test_computed_value(property, "center bottom", "50% 100%"); 28 test_computed_value(property, "left center", "0% 50%"); 29 test_computed_value(property, "left bottom", "0% 100%"); 30 test_computed_value(property, "right 40%", "100% 40%"); 31 test_computed_value(property, "center top", "50% 0%"); 32 test_computed_value(property, "center", "50% 50%"); 33 test_computed_value(property, "center center", "50% 50%"); 34 test_computed_value(property, "right 20px bottom 10px", "calc(100% - 20px) calc(100% - 10px)"); 35 36 test_computed_value(property, "x-start", "0% 50%"); 37 test_computed_value(property, "x-start 10px", "0% 10px"); 38 test_computed_value(property, "x-start 10% top 20px", "10% 20px"); 39 test_computed_value(property, "x-end", "100% 50%"); 40 test_computed_value(property, "x-end 10%", "100% 10%"); 41 test_computed_value(property, "x-end 10px top 20px", "calc(100% - 10px) 20px"); 42 test_computed_value(property, "y-start", "50% 0%"); 43 test_computed_value(property, "10px y-start", "10px 0%"); 44 test_computed_value(property, "left 10px y-start 20%", "10px 20%"); 45 test_computed_value(property, "y-end", "50% 100%"); 46 test_computed_value(property, "10px y-end", "10px 100%"); 47 test_computed_value(property, "left 10px y-end 20%", "10px 80%"); 48 49 function test_writing_modes(property) { 50 const writing_modes = [ 51 { 52 styles: [ 53 {"writing-mode": "horizontal-tb", "direction": "ltr"}, 54 ], 55 mappings: [ 56 { "x-start": "left" }, 57 { "x-end": "right" }, 58 { "y-start": "top" }, 59 { "y-end": "bottom" }, 60 ] 61 }, 62 { 63 styles: [ 64 {"writing-mode": "horizontal-tb", "direction": "rtl"}, 65 ], 66 mappings: [ 67 { "x-start": "right" }, 68 { "x-end": "left" }, 69 { "y-start": "top" }, 70 { "y-end": "bottom" }, 71 ] 72 }, 73 { 74 styles: [ 75 {"writing-mode": "vertical-rl", "direction": "rtl"}, 76 {"writing-mode": "sideways-rl", "direction": "rtl"}, 77 ], 78 mappings: [ 79 { "x-start": "right" }, 80 { "x-end": "left" }, 81 { "y-start": "bottom" }, 82 { "y-end": "top" }, 83 ] 84 }, 85 { 86 styles: [ 87 {"writing-mode": "vertical-rl", "direction": "ltr"}, 88 {"writing-mode": "sideways-rl", "direction": "ltr"}, 89 ], 90 mappings: [ 91 { "x-start": "right" }, 92 { "x-end": "left" }, 93 { "y-start": "top" }, 94 { "y-end": "bottom" }, 95 ] 96 }, 97 { 98 styles: [ 99 {"writing-mode": "vertical-lr", "direction": "rtl"}, 100 ], 101 mappings: [ 102 { "x-start": "left" }, 103 { "x-end": "right" }, 104 { "y-start": "bottom" }, 105 { "y-end": "top" }, 106 ] 107 }, 108 { 109 styles: [ 110 {"writing-mode": "sideways-lr", "direction": "ltr"}, 111 ], 112 mappings: [ 113 { "x-start": "left" }, 114 { "x-end": "right" }, 115 { "y-start": "bottom" }, 116 { "y-end": "top" }, 117 ] 118 }, 119 { 120 styles: [ 121 {"writing-mode": "vertical-lr", "direction": "ltr"}, 122 ], 123 mappings: [ 124 { "x-start": "left" }, 125 { "x-end": "right" }, 126 { "y-start": "top" }, 127 { "y-end": "bottom" }, 128 ] 129 }, 130 { 131 styles: [ 132 {"writing-mode": "sideways-lr", "direction": "rtl"}, 133 ], 134 mappings: [ 135 { "x-start": "left" }, 136 { "x-end": "right" }, 137 { "y-start": "top" }, 138 { "y-end": "bottom" }, 139 ] 140 }, 141 ]; 142 143 function inner_test(property, specified, expected_to_match, container_styles) { 144 test(() => { 145 const target = document.getElementById('target'); 146 assert_true(property in getComputedStyle(target), "'" + property + "' is a supported property for the computed style"); 147 assert_true(CSS.supports(property, specified), "'" + specified + "' is a supported value for " + property + "."); 148 149 target.style[property] = ''; 150 target.style[property] = expected_to_match; 151 let expectedValue = getComputedStyle(target)[property]; 152 153 target.style[property] = ''; 154 target.style[property] = specified; 155 let readValue = getComputedStyle(target)[property]; 156 assert_equals(readValue, expectedValue, `'${specified}' is equal to the computed value of ''${expected_to_match}' which is '${expectedValue}'`); 157 if (readValue !== specified) { 158 target.style[property] = ''; 159 target.style[property] = readValue; 160 assert_equals(getComputedStyle(target)[property], readValue, 161 'computed value should round-trip'); 162 } 163 }, `Property ${property} value '${specified}' in mode '${container_styles.join(', ')}'`); 164 } 165 166 const container = document.getElementById('container'); 167 for (let writing_mode of writing_modes) { 168 for (let style of writing_mode.styles) { 169 var container_styles = []; 170 for (let container_property in style) { 171 container.style[container_property] = style[container_property]; 172 container_styles.push(`${container_property}: ${style[container_property]}`); 173 } 174 175 for (let mapping of writing_mode.mappings) { 176 for (let key in mapping) { 177 inner_test(property, key, mapping[key], container_styles); 178 } 179 } 180 } 181 } 182 } 183 184 test_writing_modes(property); 185 186 </script> 187 </body> 188 </html>