checkVisibility.html (5758B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/w3c/csswg-drafts/issues/6850"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <div id=visibilityhidden style="visibility:hidden">hello</div> 8 9 <div style="content-visibility:hidden"> 10 <div id=cvhidden>hello</div> 11 </div> 12 13 <div style="content-visibility:auto"> 14 <div id=cvauto>hello</div> 15 </div> 16 17 <div id=displaynone style="display:none">hello</div> 18 19 <div style="display:none" class="shadow-host-with-slot"> 20 <div id="slottedindisplaynone" slot="slot">slotted</div> 21 </div> 22 23 <div id=displaycontents style="display:contents"> 24 <div id=displaycontentschild>hello</div> 25 </div> 26 27 <div id=opacityzero style="opacity:0">hello</div> 28 29 <div style="opacity:0" class="shadow-host-with-slot"> 30 <div id="slottedinopacityzero" slot="slot">slotted</div> 31 </div> 32 33 <div style="content-visibility:hidden"> 34 <div id=cvhiddenchildwithupdate></div> 35 </div> 36 37 <div style="content-visibility:hidden" id=cvhiddenwithupdate></div> 38 39 <div style="content-visibility:hidden" class="shadow-host-with-slot"> 40 <div id="slottedincvhidden" slot="slot">slotted</div> 41 </div> 42 43 <div style="height:10000px">spacer</div> 44 45 <div style="content-visibility:auto"> 46 <div id=cvautooffscreen>hello</div> 47 </div> 48 49 <div id=cvautocontainer> 50 <div id=cvautochild></div> 51 </div> 52 53 <div style="content-visibility:auto"> 54 <div style="content-visibility:auto"> 55 <div id=nestedcvautochild></div> 56 </div> 57 </div> 58 59 <script> 60 for (const host of document.querySelectorAll(".shadow-host-with-slot")) { 61 const shadowRoot = host.attachShadow({ mode: "open" }); 62 const slot = document.createElement("slot"); 63 slot.name = "slot"; 64 shadowRoot.appendChild(slot); 65 } 66 67 test(() => { 68 assert_false(visibilityhidden.checkVisibility({ 69 checkVisibilityCSS: true 70 }), 'checkVisibilityCSS:true'); 71 assert_false(visibilityhidden.checkVisibility({ 72 visibilityProperty: true 73 }), 'visibilityProperty:true'); 74 assert_true(visibilityhidden.checkVisibility({ 75 checkVisibilityCSS: false 76 }), 'checkVisibilityCSS:false'); 77 }, 'checkVisibility on visibility:hidden element.'); 78 79 test(() => { 80 assert_false(cvhidden.checkVisibility()); 81 }, 'checkVisibility on content-visibility:hidden element.'); 82 83 test(() => { 84 assert_false(slottedincvhidden.checkVisibility()); 85 }, 'checkVisibility on element slotted in content-visibility: hidden shadow host.'); 86 87 promise_test(async () => { 88 await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r))); 89 assert_true(cvauto.checkVisibility({ 90 contentVisibilityAuto: false 91 }), 'contentVisibilityAuto: false'); 92 assert_true(cvauto.checkVisibility({ 93 contentVisibilityAuto: true 94 }), 'contentVisibilityAuto: true'); 95 }, 'checkVisibility on content-visibility:auto element.'); 96 97 test(() => { 98 assert_true(cvautooffscreen.checkVisibility({ 99 contentVisibilityAuto: false 100 }), 'contentVisibilityAuto: false'); 101 assert_false(cvautooffscreen.checkVisibility({ 102 contentVisibilityAuto: true 103 }), 'contentVisibilityAuto: true'); 104 }, 'checkVisibility on content-visibility:auto element which is outside the viewport.'); 105 106 test(() => { 107 assert_false(displaynone.checkVisibility()); 108 }, 'checkVisibility on display:none element.'); 109 110 test(() => { 111 assert_false(slottedindisplaynone.checkVisibility()); 112 }, 'checkVisibility on element slotted in display:none shadow host.'); 113 114 test(() => { 115 assert_false(displaycontents.checkVisibility()); 116 assert_true(displaycontentschild.checkVisibility()); 117 }, 'checkVisibility on display:contents element.'); 118 119 test(() => { 120 assert_false(opacityzero.checkVisibility({ 121 checkOpacity: true 122 }), 'checkOpacity:true'); 123 assert_false(opacityzero.checkVisibility({ 124 opacityProperty: true 125 }), 'opacityProperty:true'); 126 assert_true(opacityzero.checkVisibility({ 127 checkOpacity: false 128 }), 'checkOpacity:false'); 129 }, 'checkVisibility on opacity:0 element.'); 130 131 test(() => { 132 assert_false(slottedinopacityzero.checkVisibility({ 133 checkOpacity: true 134 }), 'checkOpacity: true'); 135 assert_true(slottedinopacityzero.checkVisibility({ 136 checkOpacity: false 137 }), 'checkOpacity: true'); 138 }, 'checkVisibility on element slotted in opacity: 0; shadow host.'); 139 140 test(() => { 141 cvautocontainer.style.contentVisibility = 'auto'; 142 cvautochild.style.visibility = 'hidden'; 143 assert_false(cvautochild.checkVisibility({checkVisibilityCSS: true})); 144 assert_false(cvautochild.checkVisibility({contentVisibilityAuto: true})); 145 assert_true(cvautochild.checkVisibility()); 146 cvautochild.style.visibility = 'visible'; 147 assert_true(cvautochild.checkVisibility({checkVisibilityCSS: true})); 148 assert_false(cvautochild.checkVisibility({contentVisibilityAuto: true})); 149 assert_true(cvautochild.checkVisibility()); 150 }, 'checkVisibility on content-visibility:auto with visibility:hidden inside.'); 151 152 test(() => { 153 assert_true(nestedcvautochild.checkVisibility()); 154 }, 'checkVisibility on nested content-visibility:auto containers reports that the content is visible.'); 155 156 test(() => { 157 cvhiddenchildwithupdate.getBoundingClientRect(); 158 assert_false(cvhiddenchildwithupdate.checkVisibility()); 159 }, 'checkVisibility on content-visibility:hidden child after forced layout update.'); 160 161 test(() => { 162 cvhiddenwithupdate.getBoundingClientRect(); 163 assert_true(cvhiddenwithupdate.checkVisibility()); 164 }, 'checkVisibility on content-visibility:hidden element after forced layout update.'); 165 166 test(() => { 167 document.documentElement.style.contentVisibility = "hidden"; 168 assert_true(document.documentElement.checkVisibility()); 169 document.documentElement.style.removeProperty("content-visibility"); 170 }, 'checkVisibility on root element with content-visibility: hidden returns true.'); 171 </script>