content-visibility-style-containment-001.html (6811B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>content-visibility and style containment</title> 4 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 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 <script src="/common/rendering-utils.js"></script> 10 <meta name="assert" content="content-visibility: auto and elements skipping their content change the used value of the contain property to turn on style containment."> 11 <style> 12 /* Selectors for content-visibility */ 13 #spacer_for_far_to_viewport { 14 height: 300vh; 15 } 16 #visible .content_visibility { 17 content-visibility: visible; 18 } 19 #hidden .content_visibility { 20 content-visibility: hidden; 21 } 22 #auto_far .content_visibility { 23 content-visibility: auto; 24 } 25 #auto_close .content_visibility { 26 content-visibility: auto; 27 } 28 #visible_to_hidden .content_visibility { 29 content-visibility: visible; 30 } 31 #hidden_to_visible .content_visibility { 32 content-visibility: hidden; 33 } 34 #visible_to_auto .content_visibility { 35 content-visibility: visible; 36 } 37 #auto_to_visible .content_visibility { 38 content-visibility: auto; 39 } 40 41 /* Selectors for testing counters */ 42 .set_counter_to_9 { 43 counter-set: testcounter 9; 44 } 45 .increment_counter { 46 counter-increment: testcounter; 47 } 48 span.print_counter::after { 49 font: 25px/1 Ahem; 50 content: counters(testcounter, "."); 51 } 52 53 </style> 54 <body> 55 <div id="log"></div> 56 57 <div id="visible"> 58 <div class="set_counter_to_9"></div> 59 <span><span class="print_counter"></span></span> 60 <div class="content_visibility"> 61 <span class="increment_counter"></span> 62 </div> 63 <span><span class="print_counter"></span></span> 64 </div> 65 66 <div id="hidden"> 67 <div class="set_counter_to_9"></div> 68 <span><span class="print_counter"></span></span> 69 <div class="content_visibility"> 70 <span class="increment_counter"></span> 71 </div> 72 <span><span class="print_counter"></span></span> 73 </div> 74 75 <div id="auto_close"> 76 <div class="set_counter_to_9"></div> 77 <span><span class="print_counter"></span></span> 78 <div class="content_visibility"> 79 <span class="increment_counter"></span> 80 </div> 81 <span><span class="print_counter"></span></span> 82 </div> 83 84 <div id="visible_to_hidden"> 85 <div class="set_counter_to_9"></div> 86 <span><span class="print_counter"></span></span> 87 <div class="content_visibility"> 88 <span class="increment_counter"></span> 89 </div> 90 <span><span class="print_counter"></span></span> 91 </div> 92 93 <div id="hidden_to_visible"> 94 <div class="set_counter_to_9"></div> 95 <span><span class="print_counter"></span></span> 96 <div class="content_visibility"> 97 <span class="increment_counter"></span> 98 </div> 99 <span><span class="print_counter"></span></span> 100 </div> 101 102 <div id="visible_to_auto"> 103 <div class="set_counter_to_9"></div> 104 <span><span class="print_counter"></span></span> 105 <div class="content_visibility"> 106 <span class="increment_counter"></span> 107 </div> 108 <span><span class="print_counter"></span></span> 109 </div> 110 111 <div id="auto_to_visible"> 112 <div class="set_counter_to_9"></div> 113 <span><span class="print_counter"></span></span> 114 <div class="content_visibility"> 115 <span class="increment_counter"></span> 116 </div> 117 <span><span class="print_counter"></span></span> 118 </div> 119 120 <div id="spacer_for_far_to_viewport"></div> 121 122 <div id="auto_far"> 123 <div class="set_counter_to_9"></div> 124 <span><span class="print_counter"></span></span> 125 <div class="content_visibility"> 126 <span class="increment_counter"></span> 127 </div> 128 <span><span class="print_counter"></span></span> 129 </div> 130 131 <script> 132 function styleContainmentApplied(id) { 133 let container = document.getElementById(id); 134 135 let printed_counters = container.getElementsByClassName("print_counter"); 136 137 // To verify style containment, we test the string length of generated 138 // content for counters. 139 // See contain-style-dynamic-001.html for more details. 140 function haveSameStringLength(box1, box2) { 141 const ahemFontSizePx = 25; 142 return Math.abs(box2.width - box1.width) < ahemFontSizePx / 2; 143 } 144 let beforeBox = printed_counters[0].parentNode.getBoundingClientRect(); 145 let afterBox = printed_counters[1].parentNode.getBoundingClientRect(); 146 return haveSameStringLength(beforeBox, afterBox); 147 } 148 149 function setContentVisibility(id, value) { 150 let container = document.getElementById(id); 151 let content_visibility = container.getElementsByClassName("content_visibility")[0]; 152 content_visibility.style.contentVisibility = value; 153 } 154 155 promise_test(async () => { 156 await document.fonts.ready; 157 assert_false(styleContainmentApplied("visible")); 158 }, "content-visibility: visible"); 159 160 promise_test(async () => { 161 await document.fonts.ready; 162 assert_true(styleContainmentApplied("hidden")); 163 }, "content-visibility: hidden"); 164 165 promise_test(async () => { 166 await document.fonts.ready; 167 await waitForAtLeastOneFrame(); 168 assert_true(styleContainmentApplied("auto_far")); 169 }, "content-visibility: auto (far from viewport)"); 170 171 promise_test(async () => { 172 await document.fonts.ready; 173 await waitForAtLeastOneFrame(); 174 assert_true(styleContainmentApplied("auto_close")); 175 }, "content-visibility: auto (close from viewport)"); 176 177 promise_test(async () => { 178 await document.fonts.ready; 179 setContentVisibility("visible_to_hidden", "hidden"); 180 assert_true(styleContainmentApplied("visible_to_hidden")); 181 }, "switching content-visibility from visible to hidden"); 182 183 promise_test(async () => { 184 await document.fonts.ready; 185 setContentVisibility("hidden_to_visible", "visible"); 186 assert_false(styleContainmentApplied("hidden_to_visible")); 187 }, "switching content-visibility from hidden to visible"); 188 189 promise_test(async () => { 190 await document.fonts.ready; 191 setContentVisibility("visible_to_auto", "auto"); 192 await waitForAtLeastOneFrame(); 193 assert_true(styleContainmentApplied("visible_to_auto")); 194 }, "switching content-visibility from visible to auto"); 195 196 promise_test(async () => { 197 await document.fonts.ready; 198 setContentVisibility("auto_to_visible", "visible"); 199 assert_false(styleContainmentApplied("auto_to_visible")); 200 }, "switching content-visibility from auto to visible"); 201 </script> 202 </body>