diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-position/resources | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-position/resources')
5 files changed, 226 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-position/resources/position-absolute-iframe-child-002.sub.html b/testing/web-platform/tests/css/css-position/resources/position-absolute-iframe-child-002.sub.html new file mode 100644 index 0000000000..745a95ff98 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/resources/position-absolute-iframe-child-002.sub.html @@ -0,0 +1,16 @@ +<!doctype html> +<style> + body { + margin: 0; + } + iframe { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + } +</style> +<div style="height:200vh;"></div> +<iframe frameborder=0 scrolling=no + src="//{{hosts[][]}}:{{ports[http][0]}}{{location[path]}}/../position-absolute-iframe-child.html"></iframe> diff --git a/testing/web-platform/tests/css/css-position/resources/position-absolute-iframe-child.html b/testing/web-platform/tests/css/css-position/resources/position-absolute-iframe-child.html new file mode 100644 index 0000000000..3169cac0af --- /dev/null +++ b/testing/web-platform/tests/css/css-position/resources/position-absolute-iframe-child.html @@ -0,0 +1,6 @@ +<!doctype html> +<style> + body { margin: 0 } +</style> +<div style="height:200vh;"></div> +<div style="position:absolute; top:0; left:0;">This text should be visible in the first page</div> diff --git a/testing/web-platform/tests/css/css-position/resources/position-sticky-fixed-ancestor-iframe-child.html b/testing/web-platform/tests/css/css-position/resources/position-sticky-fixed-ancestor-iframe-child.html new file mode 100644 index 0000000000..ee91178ff6 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/resources/position-sticky-fixed-ancestor-iframe-child.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<style> + body,html { + margin: 0; + width: 100%; + height: 100%; + } + + .sticky { + background: green; + position: sticky; + bottom: 50vh; + width: 100px; + height: 10%; + } + + .spacer { + height: 90%; + } + .long { + height: 600vh; + } + + .position-parent { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + top: 100vh; + background-color: lightgrey; + } + + .container { + width: 100px; + height: 100%; + background-color: grey; + } + + button { + position: fixed; + left: 20px; + top: 20px; + } + + .fixed { + position: fixed; + top: 25vh; + } +</style> + +<div class="position-parent"> + <div class="container"> + <div class="spacer"></div> + <div class="sticky"></div> + </div> +</div> +<div class="long"></div> +<button id="button">Toggle Fixed</button> +</html> diff --git a/testing/web-platform/tests/css/css-position/resources/ref-rectangle.js b/testing/web-platform/tests/css/css-position/resources/ref-rectangle.js new file mode 100644 index 0000000000..c94c15720f --- /dev/null +++ b/testing/web-platform/tests/css/css-position/resources/ref-rectangle.js @@ -0,0 +1,34 @@ +/** + * The function positions a new div to exactly the bounding client rect without + * using sticky position. If it's directly under the sticky element it could be + * obscured and not show up when compared to the ref. */ +function createIndicatorForStickyElements(sticky_divs) { + if (sticky_divs.length == 0) + throw "No sticky div was found in the test case."; + + sticky_divs.forEach((sticky_div) => { + if (getComputedStyle(sticky_div).position != "sticky") + throw "Provided sticky element does not have position: sticky"; + }); + + document.fonts.ready.then(() => { + sticky_divs.forEach((sticky_div) => { + // The relative position indicator will be able to share the same containing + // block to match the position with the same offset from in flow position + // (offsetTop/offsetLeft) + let position_div = document.createElement("div"); + position_div.style.left = sticky_div.offsetLeft + "px"; + position_div.style.top = sticky_div.offsetTop + "px"; + // The absolute position is to ensure that the position_div adds zero size + // to in flow layout + position_div.style.position = "absolute" + let indicator_div = document.createElement("div"); + indicator_div.style.width = sticky_div.offsetWidth + "px"; + indicator_div.style.height = sticky_div.offsetHeight + "px"; + indicator_div.style.backgroundColor = "blue"; + indicator_div.style.position = "relative"; + position_div.appendChild(indicator_div); + sticky_div.parentNode.insertBefore(position_div, sticky_div); + }); + }); +} diff --git a/testing/web-platform/tests/css/css-position/resources/sticky-util.js b/testing/web-platform/tests/css/css-position/resources/sticky-util.js new file mode 100644 index 0000000000..074c25c81f --- /dev/null +++ b/testing/web-platform/tests/css/css-position/resources/sticky-util.js @@ -0,0 +1,109 @@ +/** + * Builds a generic structure that looks like: + * + * <div class="scroller"> // 100x200 viewport + * <div class="contents"> // 100x500 + * <div class="prepadding"></div> // 100x100 + * <div class="container"> // 300x300 containing block + * <div class="filler"></div> // 100x100 + * <div class="sticky box"></div> // 100x100 + * </div> + * </div> + * </div> + * + * If the sticky direction is 'left' or 'right', the necessary blocks will be + * marked as inline-block and the dimensions above are flipped. + * + * Returns an 'elements' object which has each of the above elements as an + * accessible property. + */ +function setupStickyTest(stickyDirection, stickyOffset) { + const elements = {}; + const inline = stickyDirection === 'left' || stickyDirection === 'right'; + + elements.scroller = document.createElement('div'); + elements.scroller.style.position = 'relative'; + elements.scroller.style.width = (inline ? '200px' : '100px'); + elements.scroller.style.height = (inline ? '100px' : '200px'); + + // 'hidden' is used here instead of 'scroll' because this prevents + // scrollbars from affecting the size and offset of sticky items. + elements.scroller.style.overflow = 'hidden'; + + elements.contents = document.createElement('div'); + elements.contents.style.height = (inline ? '100%' : '500px'); + elements.contents.style.width = (inline ? '500px' : '100%'); + + elements.prepadding = document.createElement('div'); + elements.prepadding.style.height = (inline ? '100%' : '100px'); + elements.prepadding.style.width = (inline ? '100px' : '100%'); + if (inline) + elements.prepadding.style.display = 'inline-block'; + + elements.container = document.createElement('div'); + elements.container.style.height = (inline ? '100%' : '300px'); + elements.container.style.width = (inline ? '300px' : '100%'); + if (inline) + elements.container.style.display = 'inline-block'; + + elements.filler = document.createElement('div'); + elements.filler.style.height = (inline ? '100%' : '100px'); + elements.filler.style.width = (inline ? '100px' : '100%'); + if (inline) + elements.filler.style.display = 'inline-block'; + + elements.sticky = document.createElement('div'); + elements.sticky.style = `${stickyDirection}: ${stickyOffset}px;`; + elements.sticky.style.position = 'sticky'; + elements.sticky.style.height = (inline ? '100%' : '100px'); + elements.sticky.style.width = (inline ? '100px' : '100%'); + elements.sticky.style.backgroundColor = 'green'; + if (inline) + elements.sticky.style.display = 'inline-block'; + + elements.scroller.appendChild(elements.contents); + elements.contents.appendChild(elements.prepadding); + elements.contents.appendChild(elements.container); + elements.container.appendChild(elements.filler); + elements.container.appendChild(elements.sticky); + + document.body.appendChild(elements.scroller); + + return elements; +} + +/** + * Similar to above, but nests a second sticky (named innerSticky) inside the + * sticky element. + * + * In the 'bottom' and 'right' cases, we also inject some padding before the + * innerSticky element, to give it something to push into. This inner padding is + * not exposed. + */ +function setupNestedStickyTest(stickyDirection, outerStickyOffset, + innerStickyOffset) { + const elements = setupStickyTest(stickyDirection, outerStickyOffset); + + const inline = stickyDirection === 'left' || stickyDirection === 'right'; + if (stickyDirection === 'bottom' || stickyDirection === 'right') { + const innerPadding = document.createElement('div'); + innerPadding.style.height = (inline ? '100%' : '50px'); + innerPadding.style.width = (inline ? '50px' : '100%'); + if (inline) + innerPadding.style.display = 'inline-block'; + elements.sticky.appendChild(innerPadding); + } + + elements.innerSticky = document.createElement('div'); + elements.innerSticky.style = `${stickyDirection}: ${innerStickyOffset}px;`; + elements.innerSticky.style.position = 'sticky'; + elements.innerSticky.style.height = (inline ? '100%' : '50px'); + elements.innerSticky.style.width = (inline ? '50px' : '100%'); + elements.innerSticky.style.backgroundColor = 'blue'; + if (inline) + elements.innerSticky.style.display = 'inline-block'; + + elements.sticky.appendChild(elements.innerSticky); + + return elements; +} |