contain-style-dynamic-001.html (9062B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Dynamic change to style containment</title> 4 <link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1765615"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <meta name="assert" content="Verify style containment is properly updated after dynamic change to the contain property."> 10 <style> 11 /* Selectors for contain */ 12 #none .wrapper { 13 contain: none; 14 } 15 #style .wrapper { 16 contain: style; 17 } 18 #none_to_style .wrapper { 19 contain: none; 20 } 21 #style_to_none .wrapper { 22 contain: style; 23 } 24 25 /* Selectors for testing counters */ 26 .set_counter_to_9 { 27 counter-set: testcounter 9; 28 } 29 .increment_counter { 30 counter-increment: testcounter; 31 } 32 .set_counter_to_10 { 33 counter-set: testcounter 10; 34 } 35 span.print_counter::after { 36 font: 25px/1 Ahem; 37 content: counters(testcounter, "."); 38 } 39 40 /* Selectors for testing quotes */ 41 .open_quote::after { 42 content: open-quote; 43 } 44 .close_quote::after { 45 content: close-quote; 46 } 47 .no_open_quote::after { 48 content: no-open-quote; 49 } 50 .no_close_quote::after { 51 content: no-close-quote; 52 } 53 span.print_quotes::before, span.print_quotes::after { 54 font: 25px/1 Ahem; 55 quotes: "A" "" "BB" "" "CCC" "" "DDDD" "" "EEEEE" "" "FFFFF" "" "GGGGGG" "" "HHHHHHH" "" "IIIIIIII" "" "JJJJJJJJJ" ""; 56 } 57 span.print_quotes::before { 58 content: open-quote; 59 } 60 span.print_quotes::after { 61 content: no-close-quote; 62 } 63 </style> 64 <body> 65 <div id="log"></div> 66 67 <div id="none"> 68 <div class="set_counter_to_9"></div> 69 <span><span class="print_counter"></span></span> 70 <div class="wrapper"> 71 <span class="increment_counter"></span> 72 </div> 73 <span><span class="print_counter"></span></span> 74 75 <div class="set_counter_to_9"></div> 76 <span><span class="print_counter"></span></span> 77 <div class="wrapper"> 78 <span class="set_counter_to_10"></span> 79 </div> 80 <span><span class="print_counter"></span></span> 81 82 <span><span class="print_quotes"></span></span> 83 <div class="wrapper"> 84 <span class="open_quote"></span> 85 </div> 86 <span><span class="print_quotes"></span></span> 87 88 <span><span class="print_quotes"></span></span> 89 <div class="wrapper"> 90 <span class="close_quote"></span> 91 </div> 92 <span><span class="print_quotes"></span></span> 93 94 <span><span class="print_quotes"></span></span> 95 <div class="wrapper"> 96 <span class="no_open_quote"></span> 97 </div> 98 <span><span class="print_quotes"></span></span> 99 100 <span><span class="print_quotes"></span></span> 101 <div class="wrapper"> 102 <span class="no_close_quote"></span> 103 </div> 104 <span><span class="print_quotes"></span></span> 105 </div> 106 107 <div id="style"> 108 <div class="set_counter_to_9"></div> 109 <span><span class="print_counter"></span></span> 110 <div class="wrapper"> 111 <span class="increment_counter"></span> 112 </div> 113 <span><span class="print_counter"></span></span> 114 115 <div class="set_counter_to_9"></div> 116 <span><span class="print_counter"></span></span> 117 <div class="wrapper"> 118 <span class="set_counter_to_10"></span> 119 </div> 120 <span><span class="print_counter"></span></span> 121 122 <span><span class="print_quotes"></span></span> 123 <div class="wrapper"> 124 <span class="open_quote"></span> 125 </div> 126 <span><span class="print_quotes"></span></span> 127 128 <span><span class="print_quotes"></span></span> 129 <div class="wrapper"> 130 <span class="close_quote"></span> 131 </div> 132 <span><span class="print_quotes"></span></span> 133 134 <span><span class="print_quotes"></span></span> 135 <div class="wrapper"> 136 <span class="no_open_quote"></span> 137 </div> 138 <span><span class="print_quotes"></span></span> 139 140 <span><span class="print_quotes"></span></span> 141 <div class="wrapper"> 142 <span class="no_close_quote"></span> 143 </div> 144 <span><span class="print_quotes"></span></span> 145 </div> 146 147 <div id="none_to_style"> 148 <div class="set_counter_to_9"></div> 149 <span><span class="print_counter"></span></span> 150 <div class="wrapper"> 151 <span class="increment_counter"></span> 152 </div> 153 <span><span class="print_counter"></span></span> 154 155 <div class="set_counter_to_9"></div> 156 <span><span class="print_counter"></span></span> 157 <div class="wrapper"> 158 <span class="set_counter_to_10"></span> 159 </div> 160 <span><span class="print_counter"></span></span> 161 162 <span><span class="print_quotes"></span></span> 163 <div class="wrapper"> 164 <span class="open_quote"></span> 165 </div> 166 <span><span class="print_quotes"></span></span> 167 168 <span><span class="print_quotes"></span></span> 169 <div class="wrapper"> 170 <span class="close_quote"></span> 171 </div> 172 <span><span class="print_quotes"></span></span> 173 174 <span><span class="print_quotes"></span></span> 175 <div class="wrapper"> 176 <span class="no_open_quote"></span> 177 </div> 178 <span><span class="print_quotes"></span></span> 179 180 <span><span class="print_quotes"></span></span> 181 <div class="wrapper"> 182 <span class="no_close_quote"></span> 183 </div> 184 <span><span class="print_quotes"></span></span> 185 </div> 186 187 <div id="style_to_none"> 188 <div class="set_counter_to_9"></div> 189 <span><span class="print_counter"></span></span> 190 <div class="wrapper"> 191 <span class="increment_counter"></span> 192 </div> 193 <span><span class="print_counter"></span></span> 194 195 <div class="set_counter_to_9"></div> 196 <span><span class="print_counter"></span></span> 197 <div class="wrapper"> 198 <span class="set_counter_to_10"></span> 199 </div> 200 <span><span class="print_counter"></span></span> 201 202 <span><span class="print_quotes"></span></span> 203 <div class="wrapper"> 204 <span class="open_quote"></span> 205 </div> 206 <span><span class="print_quotes"></span></span> 207 208 <span><span class="print_quotes"></span></span> 209 <div class="wrapper"> 210 <span class="close_quote"></span> 211 </div> 212 <span><span class="print_quotes"></span></span> 213 214 <span><span class="print_quotes"></span></span> 215 <div class="wrapper"> 216 <span class="no_open_quote"></span> 217 </div> 218 <span><span class="print_quotes"></span></span> 219 220 <span><span class="print_quotes"></span></span> 221 <div class="wrapper"> 222 <span class="no_close_quote"></span> 223 </div> 224 <span><span class="print_quotes"></span></span> 225 </div> 226 227 <script> 228 function verifyStyleContainment(id, applied) { 229 let container = document.getElementById(id); 230 231 // To verify style containment for counters and quotes, we check whether 232 // the properties in the wrapper affect the string length of generated 233 // content. 234 function haveSameStringLength(box1, box2) { 235 const ahemFontSizePx = 25; 236 return Math.abs(box2.width - box1.width) < ahemFontSizePx / 2; 237 } 238 let counter_box = 239 Array.from(container.getElementsByClassName("print_counter")) 240 .map(e => e.parentNode.getBoundingClientRect()); 241 let quote_box = 242 Array.from(container.getElementsByClassName("print_quotes")) 243 .map(e => e.parentNode.getBoundingClientRect()); 244 assert_equals(haveSameStringLength(counter_box[0], counter_box[1]), applied, "increment-counter"); 245 assert_equals(haveSameStringLength(counter_box[2], counter_box[3]), applied, "set-counter"); 246 assert_equals(haveSameStringLength(quote_box[0], quote_box[1]), applied, "open-quote"); 247 assert_equals(haveSameStringLength(quote_box[2], quote_box[3]), applied, "close-quote"); 248 assert_equals(haveSameStringLength(quote_box[4], quote_box[5]), applied, "no-open-quote"); 249 assert_equals(haveSameStringLength(quote_box[6], quote_box[7]), applied, "no-close-quote"); 250 } 251 252 function setContain(id, value) { 253 let container = document.getElementById(id); 254 Array.from(container.getElementsByClassName("wrapper")) 255 .forEach(element => element.style.contain = value); 256 } 257 258 promise_test(async () => { 259 await document.fonts.ready; 260 verifyStyleContainment("none", /*applied=*/ false); 261 }, "contain: none"); 262 263 promise_test(async () => { 264 await document.fonts.ready; 265 verifyStyleContainment("style", /*applied=*/ true); 266 }, "contain: style"); 267 268 promise_test(async () => { 269 await document.fonts.ready; 270 setContain("none_to_style", "style"); 271 verifyStyleContainment("none_to_style", /*applied=*/ true); 272 }, "switching contain from none to style"); 273 274 promise_test(async () => { 275 await document.fonts.ready; 276 setContain("style_to_none", "none"); 277 verifyStyleContainment("style_to_none", /*applied=*/ false); 278 }, "switching contain from style to none"); 279 </script> 280 </body>