diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html | 108 |
1 files changed, 52 insertions, 56 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html index 4a63635558..b89d0e2428 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html @@ -31,7 +31,7 @@ position: absolute; align-self: stretch; justify-self: stretch; - anchor-default: --anchor; + position-anchor: --anchor; } #anchor { margin-top: 150px; @@ -49,73 +49,69 @@ function test_inset_area(inset_area, expected_offsets) { anchored.style.insetArea = inset_area; test(() => { - assert_equals(anchored.offsetLeft, expected_offsets.left); - assert_equals(anchored.offsetTop, expected_offsets.top); - assert_equals(anchored.offsetWidth, expected_offsets.width); - assert_equals(anchored.offsetHeight, expected_offsets.height); + assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); + assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); + assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); + assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); }, "Offsets for: " + inset_area); } test_inset_area("none", {left:0, top:0, width:0, height:0}); - test_inset_area("all", {left:0, top:0, width:400, height:400}); - test_inset_area("all / all", {left:0, top:0, width:400, height:400}); + test_inset_area("span-all", {left:0, top:0, width:400, height:400}); + test_inset_area("span-all span-all", {left:0, top:0, width:400, height:400}); // Single region spans - test_inset_area("top / left", {left:0, top:0, width:100, height:150}); - test_inset_area("top / center", {left:100, top:0, width:150, height:150}); - test_inset_area("top / right", {left:250, top:0, width:150, height:150}); - test_inset_area("center / left", {left:0, top:150, width:100, height:75}); - test_inset_area("center / center", {left:100, top:150, width:150, height:75}); - test_inset_area("center / right", {left:250, top:150, width:150, height:75}); - test_inset_area("bottom / left", {left:0, top:225, width:100, height:175}); - test_inset_area("bottom / center", {left:100, top:225, width:150, height:175}); - test_inset_area("bottom / right", {left:250, top:225, width:150, height:175}); + test_inset_area("top left", {left:0, top:0, width:100, height:150}); + test_inset_area("top center", {left:100, top:0, width:150, height:150}); + test_inset_area("top right", {left:250, top:0, width:150, height:150}); + test_inset_area("center left", {left:0, top:150, width:100, height:75}); + test_inset_area("center center", {left:100, top:150, width:150, height:75}); + test_inset_area("center right", {left:250, top:150, width:150, height:75}); + test_inset_area("bottom left", {left:0, top:225, width:100, height:175}); + test_inset_area("bottom center", {left:100, top:225, width:150, height:175}); + test_inset_area("bottom right", {left:250, top:225, width:150, height:175}); - test_inset_area("start / start", {left:0, top:0, width:100, height:150}); - test_inset_area("start / center", {left:100, top:0, width:150, height:150}); - test_inset_area("start / end", {left:250, top:0, width:150, height:150}); - test_inset_area("center / start", {left:0, top:150, width:100, height:75}); - test_inset_area("center / end", {left:250, top:150, width:150, height:75}); - test_inset_area("end / start", {left:0, top:225, width:100, height:175}); - test_inset_area("end / center", {left:100, top:225, width:150, height:175}); - test_inset_area("end / end", {left:250, top:225, width:150, height:175}); + test_inset_area("start start", {left:0, top:0, width:100, height:150}); + test_inset_area("start center", {left:100, top:0, width:150, height:150}); + test_inset_area("start end", {left:250, top:0, width:150, height:150}); + test_inset_area("center start", {left:0, top:150, width:100, height:75}); + test_inset_area("center end", {left:250, top:150, width:150, height:75}); + test_inset_area("end start", {left:0, top:225, width:100, height:175}); + test_inset_area("end center", {left:100, top:225, width:150, height:175}); + test_inset_area("end end", {left:250, top:225, width:150, height:175}); - test_inset_area("self-start / self-start", {left:0, top:0, width:100, height:150}); - test_inset_area("self-start / center", {left:100, top:0, width:150, height:150}); - test_inset_area("self-start / self-end", {left:250, top:0, width:150, height:150}); - test_inset_area("center / self-start", {left:0, top:150, width:100, height:75}); - test_inset_area("center / self-end", {left:250, top:150, width:150, height:75}); - test_inset_area("self-end / self-start", {left:0, top:225, width:100, height:175}); - test_inset_area("self-end / center", {left:100, top:225, width:150, height:175}); - test_inset_area("self-end / self-end", {left:250, top:225, width:150, height:175}); + test_inset_area("self-start self-start", {left:0, top:0, width:100, height:150}); + test_inset_area("self-start center", {left:100, top:0, width:150, height:150}); + test_inset_area("self-start self-end", {left:250, top:0, width:150, height:150}); + test_inset_area("center self-start", {left:0, top:150, width:100, height:75}); + test_inset_area("center self-end", {left:250, top:150, width:150, height:75}); + test_inset_area("self-end self-start", {left:0, top:225, width:100, height:175}); + test_inset_area("self-end center", {left:100, top:225, width:150, height:175}); + test_inset_area("self-end self-end", {left:250, top:225, width:150, height:175}); - test_inset_area("y-start / x-start", {left:0, top:0, width:100, height:150}); - test_inset_area("y-start / center", {left:100, top:0, width:150, height:150}); - test_inset_area("y-start / x-end", {left:250, top:0, width:150, height:150}); - test_inset_area("center / x-start", {left:0, top:150, width:100, height:75}); - test_inset_area("center / x-end", {left:250, top:150, width:150, height:75}); - test_inset_area("y-end / x-start", {left:0, top:225, width:100, height:175}); - test_inset_area("y-end / center", {left:100, top:225, width:150, height:175}); - test_inset_area("y-end / x-end", {left:250, top:225, width:150, height:175}); + test_inset_area("y-start x-start", {left:0, top:0, width:100, height:150}); + test_inset_area("y-start center", {left:100, top:0, width:150, height:150}); + test_inset_area("y-start x-end", {left:250, top:0, width:150, height:150}); + test_inset_area("center x-start", {left:0, top:150, width:100, height:75}); + test_inset_area("center x-end", {left:250, top:150, width:150, height:75}); + test_inset_area("y-end x-start", {left:0, top:225, width:100, height:175}); + test_inset_area("y-end center", {left:100, top:225, width:150, height:175}); + test_inset_area("y-end x-end", {left:250, top:225, width:150, height:175}); - test_inset_area("y-self-start / x-self-start", {left:0, top:0, width:100, height:150}); - test_inset_area("y-self-start / center", {left:100, top:0, width:150, height:150}); - test_inset_area("y-self-start / x-self-end", {left:250, top:0, width:150, height:150}); - test_inset_area("center / x-self-start", {left:0, top:150, width:100, height:75}); - test_inset_area("center / x-self-end", {left:250, top:150, width:150, height:75}); - test_inset_area("y-self-end / x-self-start", {left:0, top:225, width:100, height:175}); - test_inset_area("y-self-end / center", {left:100, top:225, width:150, height:175}); - test_inset_area("y-self-end / x-self-end", {left:250, top:225, width:150, height:175}); + test_inset_area("y-self-start x-self-start", {left:0, top:0, width:100, height:150}); + test_inset_area("y-self-start center", {left:100, top:0, width:150, height:150}); + test_inset_area("y-self-start x-self-end", {left:250, top:0, width:150, height:150}); + test_inset_area("center x-self-start", {left:0, top:150, width:100, height:75}); + test_inset_area("center x-self-end", {left:250, top:150, width:150, height:75}); + test_inset_area("y-self-end x-self-start", {left:0, top:225, width:100, height:175}); + test_inset_area("y-self-end center", {left:100, top:225, width:150, height:175}); + test_inset_area("y-self-end x-self-end", {left:250, top:225, width:150, height:175}); // Multi-region spans - test_inset_area("y-self-start center / self-end center", {left:100, top:0, width:300, height:225}); - test_inset_area("bottom center / x-start x-end", {left:0, top:150, width:400, height:250}); - - // Non-orthogonal axes. - test_inset_area("x-start / left", {left:0, top:0, width:0, height:0}); - test_inset_area("y-end / y-self-start", {left:0, top:0, width:0, height:0}); + test_inset_area("span-y-self-start span-x-self-end", {left:100, top:0, width:300, height:225}); + test_inset_area("span-bottom span-all", {left:0, top:150, width:400, height:250}); // No implicit anchor means the inset-area should not apply. - anchored.style.anchorDefault = "implicit"; - test_inset_area("all / top", {left:0, top:0, width:0, height:0}); + anchored.style.positionAnchor = "implicit"; + test_inset_area("span-all top", {left:0, top:0, width:0, height:0}); </script> |