commit cea5c6854c1e532e35d1f34b22d901509b8d6d75
parent 62c7b8ab2aa78242ca6559ed0c90e6fdb096eacb
Author: Jonathan Kew <jkew@mozilla.com>
Date: Thu, 23 Oct 2025 10:40:25 +0000
Bug 1995253 - patch 3 - Add flip-x/flip-y variants to some of the try-tactic tests. r=layout-reviewers,emilio
Differential Revision: https://phabricator.services.mozilla.com/D269495
Diffstat:
4 files changed, 74 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-area-in-position-try.html b/testing/web-platform/tests/css/css-anchor-position/position-area-in-position-try.html
@@ -177,12 +177,17 @@ test_position_area_placement('--bottom, --left, --top, --right', 'left');
test_position_area_placement('--right flip-inline', 'left');
test_position_area_placement('--bottom flip-block', 'top');
test_position_area_placement('--left flip-start', 'top');
+test_position_area_placement('--right flip-x', 'left');
+test_position_area_placement('--bottom flip-y', 'top');
// left + flip-inline => right (no space).
test_position_area_placement('--left flip-inline, --top', 'top');
+test_position_area_placement('--left flip-x, --top', 'top');
// top + flip-block => bottom (no space).
test_position_area_placement('--top flip-block, --left', 'left');
+test_position_area_placement('--top flip-y, --left', 'left');
// left + flip-start flip-block => bottom (no space).
test_position_area_placement('--left flip-start flip-block, --left', 'left');
+test_position_area_placement('--left flip-start flip-y, --left', 'left');
</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-alignment.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-alignment.html
@@ -114,6 +114,36 @@ test_justify_flip(
'justify-self:start;align-self:start',
'justify-self:end;align-self:end');
+test_justify_flip(
+ 'flip-x',
+ 'justify-self:start;align-self:start',
+ 'justify-self:end;align-self:start');
+
+test_justify_flip(
+ 'flip-y',
+ 'justify-self:start;align-self:start',
+ 'justify-self:start;align-self:end');
+
+test_justify_flip(
+ 'flip-y flip-x',
+ 'justify-self:start;align-self:start',
+ 'justify-self:end;align-self:end');
+
+test_justify_flip(
+ 'flip-y flip-start',
+ 'justify-self:start;align-self:start',
+ 'justify-self:end;align-self:start');
+
+test_justify_flip(
+ 'flip-x flip-start',
+ 'justify-self:start;align-self:start',
+ 'justify-self:start;align-self:end');
+
+test_justify_flip(
+ 'flip-y flip-x flip-start',
+ 'justify-self:start;align-self:start',
+ 'justify-self:end;align-self:end');
+
// left/right are special cases, because they're supported by
// justify-self, but not align-self:
@@ -123,6 +153,11 @@ test_justify_flip(
'justify-self:right;align-self:start');
test_justify_flip(
+ 'flip-x',
+ 'justify-self:left;align-self:start',
+ 'justify-self:right;align-self:start');
+
+test_justify_flip(
'flip-start',
'justify-self:left;align-self:end',
'justify-self:end;align-self:self-start');
@@ -180,6 +215,15 @@ test_computed_value('flip-inline', 'justify-self', 'flex-end', 'flex-start');
test_computed_value('flip-inline', 'justify-self', 'left', 'right');
test_computed_value('flip-inline', 'justify-self', 'right', 'left');
+test_computed_value('flip-x', 'justify-self', 'start', 'end');
+test_computed_value('flip-x', 'justify-self', 'end', 'start');
+test_computed_value('flip-x', 'justify-self', 'self-start', 'self-end');
+test_computed_value('flip-x', 'justify-self', 'self-end', 'self-start');
+test_computed_value('flip-x', 'justify-self', 'flex-start', 'flex-end');
+test_computed_value('flip-x', 'justify-self', 'flex-end', 'flex-start');
+test_computed_value('flip-x', 'justify-self', 'left', 'right');
+test_computed_value('flip-x', 'justify-self', 'right', 'left');
+
test_computed_value('flip-block', 'align-self', 'start', 'end');
test_computed_value('flip-block', 'align-self', 'end', 'start');
test_computed_value('flip-block', 'align-self', 'self-start', 'self-end');
@@ -187,6 +231,13 @@ test_computed_value('flip-block', 'align-self', 'self-end', 'self-start');
test_computed_value('flip-block', 'align-self', 'flex-start', 'flex-end');
test_computed_value('flip-block', 'align-self', 'flex-end', 'flex-start');
+test_computed_value('flip-y', 'align-self', 'start', 'end');
+test_computed_value('flip-y', 'align-self', 'end', 'start');
+test_computed_value('flip-y', 'align-self', 'self-start', 'self-end');
+test_computed_value('flip-y', 'align-self', 'self-end', 'self-start');
+test_computed_value('flip-y', 'align-self', 'flex-start', 'flex-end');
+test_computed_value('flip-y', 'align-self', 'flex-end', 'flex-start');
+
test_justify_flip(
'flip-start',
'justify-self:left;align-self:end',
diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-basic.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-basic.html
@@ -40,30 +40,44 @@
// bottom:20px
test_try_tactic('flip-block', {left:10, top:340, width:30, height:40});
+ test_try_tactic('flip-y', {left:10, top:340, width:30, height:40});
// right:10px
test_try_tactic('flip-inline', {left:360, top:20, width:30, height:40});
+ test_try_tactic('flip-x', {left:360, top:20, width:30, height:40});
// right:10px; bottom:20px
test_try_tactic('flip-block flip-inline', {left:360, top:340, width:30, height:40});
test_try_tactic('flip-inline flip-block', {left:360, top:340, width:30, height:40});
+ test_try_tactic('flip-y flip-x', {left:360, top:340, width:30, height:40});
+ test_try_tactic('flip-x flip-y', {left:360, top:340, width:30, height:40});
// left:20px; top:10px; width:40px; height:30px
test_try_tactic('flip-start', {left:20, top:10, width:40, height:30});
test_try_tactic('flip-block flip-start flip-inline', {left:20, top:10, width:40, height:30});
test_try_tactic('flip-inline flip-start flip-block', {left:20, top:10, width:40, height:30});
+ test_try_tactic('flip-y flip-start flip-x', {left:20, top:10, width:40, height:30});
+ test_try_tactic('flip-x flip-start flip-y', {left:20, top:10, width:40, height:30});
// left:20px; bottom:10px; width:40px; height:30px
test_try_tactic('flip-start flip-block', {left:20, top:360, width:40, height:30});
test_try_tactic('flip-inline flip-start', {left:20, top:360, width:40, height:30});
+ test_try_tactic('flip-start flip-y', {left:20, top:360, width:40, height:30});
+ test_try_tactic('flip-x flip-start', {left:20, top:360, width:40, height:30});
// right:20px; top:10px; width:40px; height:30px
test_try_tactic('flip-start flip-inline', {left:340, top:10, width:40, height:30});
test_try_tactic('flip-block flip-start', {left:340, top:10, width:40, height:30});
+ test_try_tactic('flip-start flip-x', {left:340, top:10, width:40, height:30});
+ test_try_tactic('flip-y flip-start', {left:340, top:10, width:40, height:30});
// right:20px; bottom:10px; width:40px; height:30px
test_try_tactic('flip-start flip-block flip-inline', {left:340, top:360, width:40, height:30});
test_try_tactic('flip-start flip-inline flip-block', {left:340, top:360, width:40, height:30});
test_try_tactic('flip-inline flip-block flip-start', {left:340, top:360, width:40, height:30});
test_try_tactic('flip-block flip-inline flip-start', {left:340, top:360, width:40, height:30});
+ test_try_tactic('flip-start flip-y flip-x', {left:340, top:360, width:40, height:30});
+ test_try_tactic('flip-start flip-x flip-y', {left:340, top:360, width:40, height:30});
+ test_try_tactic('flip-x flip-y flip-start', {left:340, top:360, width:40, height:30});
+ test_try_tactic('flip-y flip-x flip-start', {left:340, top:360, width:40, height:30});
</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-wm.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-wm.html
@@ -43,13 +43,17 @@
// Effectively flips left:10px to right:10px:
test_try_tactic_wm('flip-inline', 'horizontal-tb', 'ltr', {left:360, top:20, width:30, height:40});
+ test_try_tactic_wm('flip-x', 'horizontal-tb', 'ltr', {left:360, top:20, width:30, height:40});
// Effectively flips top:20px to bottom:20px:
test_try_tactic_wm('flip-inline', 'vertical-lr', 'ltr', {left:10, top:340, width:30, height:40});
test_try_tactic_wm('flip-inline', 'sideways-lr', 'ltr', {left:10, top:340, width:30, height:40});
+ test_try_tactic_wm('flip-y', 'vertical-lr', 'ltr', {left:10, top:340, width:30, height:40});
+ test_try_tactic_wm('flip-y', 'sideways-lr', 'ltr', {left:10, top:340, width:30, height:40});
// Effectively flips left:10px to right:10px:
test_try_tactic_wm('flip-block', 'sideways-rl', 'ltr', {left:360, top:20, width:30, height:40});
+ test_try_tactic_wm('flip-x', 'sideways-rl', 'ltr', {left:360, top:20, width:30, height:40});
// Mirror across the [left,top]=>[bottom,right] diagonal:
test_try_tactic_wm('flip-start', 'horizontal-tb', 'ltr', {left:20, top:10, width:40, height:30});
