diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-forced-layout-client-rects.html')
-rw-r--r-- | testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-forced-layout-client-rects.html | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-forced-layout-client-rects.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-forced-layout-client-rects.html new file mode 100644 index 0000000000..60e6849892 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-forced-layout-client-rects.html @@ -0,0 +1,105 @@ +<!doctype HTML> +<html> +<meta charset="utf8"> +<title>Content Visibility: nested forced layouts</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> +<meta name="assert" content="nested content-visibility items are all processed when layout is forced"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> +body, html { + padding: 0; + margin: 0; +} +.spacer { + height: 3000px; +} +.target { + width: 12px; + height: 34px; + + position: relative; + left: 5px; + top: 7px; +} + +.hidden { + content-visibility: hidden; +} + +.will-hide { + contain: style; + contain: size; + contain: layout; + contain: paint; +} +</style> + +<div class=spacer></div> + +<div class="will-hide"> + <div id=one>A line of a certain length...</div> +</div> + +<div class="will-hide"> + <div class=target id=two></div> +</div> + +<div class="will-hide"> + <div class=target id=three></div> +</div> + +<div class="will-hide"> + <div class="will-hide"> + <div class=target id=four></div> + </div> +</div> + +<div class="will-hide"> + <div class="will-hide"> + <div class="will-hide"> + <div class="will-hide"> + <div class="will-hide"> + <div class=target id=five></div> + </div> + </div> + </div> + </div> +</div> + +<script> +function hideContent() { + document + .querySelectorAll('.will-hide') + .forEach(content => content.classList.add("hidden")); +} + +function showContent() { + document + .querySelectorAll('.will-hide') + .forEach(content => content.classList.remove("hidden")); +} + +const ids = ["one", "two", "three", "four", "five"]; +for (let i = 0; i < ids.length; ++i) { + test(() => { + const expectedRect = document.getElementById(ids[i]).getClientRects()[0]; + const expectedBoundingRect = document.getElementById(ids[i]).getBoundingClientRect(); + hideContent(); + + const rect = document.getElementById(ids[i]).getClientRects()[0]; + assert_equals(rect.width, expectedRect.width, `width for "${ids[i]}"`); + assert_equals(rect.height, expectedRect.height, `height for "${ids[i]}`); + + const boundingRect = document.getElementById(ids[i]).getClientRects()[0]; + assert_equals(boundingRect.width, expectedBoundingRect.width, `width for "${ids[i]}"`); + assert_equals(boundingRect.height, expectedBoundingRect.height, `height for "${ids[i]}`); + + showContent(); + }, `${ids[i]}.getBoundingClientRect(): `); +} +</script> +</html> |