Skip to content

Commit

Permalink
Updated CSS Anchor Position 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@SebastianZ
SebastianZ committed Apr 7, 2024
1 parent 0ffa99f commit 38541bd
Showing 1 changed file with 272 additions and 56 deletions.
328 changes: 272 additions & 56 deletions tests/css-anchor-position-1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ export default {
'anchor(center)',
'anchor(30%)',
'anchor(inside, 20px)',
'anchor(outside, 20px)',
'anchor(outside, 30%)',
'anchor(top, 20px)',
'anchor(start, 20px)',
'anchor(start, 30%)',
'anchor(30%, 20px)',
'anchor(--anchor top)',
'anchor(--anchor top, 20px)',
Expand Down Expand Up @@ -108,95 +108,311 @@ export default {
tr: '#name',
dev: '#name',
},
tests: ['none', '--anchor'],
tests: ['none', '--anchor', '--first-anchor, --second-anchor'],
},
'anchor-scope': {
links: {
tr: '#anchor-scope',
dev: '#anchor-scope',
},
tests: [
'none',
'all',
'--anchor',
'--first-anchor, --second-anchor',
],
},
'inset-area': {
links: {
dev: '#inset-area',
},
tests: [
'none',
'start',
'end',
'center',
'self-start',
'self-end',
'top',
'bottom',
'left',
'center',
'right',
'span-left',
'span-right',
'x-start',
'x-end',
'y-start',
'y-end',
'span-x-start',
'span-x-end',
'x-self-start',
'x-self-end',
'span-x-self-start',
'span-x-self-end',
'span-all',
'top',
'bottom',
'span-top',
'span-bottom',
'y-start',
'y-end',
'span-y-start',
'span-y-end',
'y-self-start',
'y-self-end',
'all',
'start end',
'start center end',
'span-y-self-start',
'span-y-self-end',
'left top',
'center span-top',
'span-all span-all',
'block-start',
'block-end',
'span-block-start',
'span-block-end',
'inline-start',
'inline-end',
'span-inline-start',
'span-inline-end',
'block-start inline-end',
'span-block-start span-inline-end',
'self-block-start',
'self-block-end',
'span-self-block-start',
'span-self-block-end',
'self-inline-start',
'self-inline-end',
'span-self-inline-start',
'span-self-inline-end',
'self-block-start self-inline-end',
'span-self-inline-start self-block-end',
'start',
'end',
'span-start',
'span-end',
'start start',
'center span-end',
'self-start',
'self-end',
'span-self-start',
'span-self-end',
'self-start self-end',
'self-start center self-end',
'top bottom',
'top center bottom',
'left right',
'left center right',
'x-start x-end',
'x-start center x-end',
'y-start y-end',
'y-start center y-end',
'x-self-start x-self-end',
'x-self-start center x-self-end',
'y-self-start y-self-end',
'y-self-start center y-self-end',
'left / bottom',
'x-start / y-end',
'span-self-start span-self-end',
],
},
'position-fallback': {
'position-anchor': {
links: {
tr: '#fallback-property',
dev: '#fallback-property',
tr: '#position-anchor',
dev: '#position-anchor',
},
tests: ['none', '--fallback'],
tests: ['implicit', '--fallback'],
},
'position-fallback-bounds': {
'position-try': {
links: {
tr: '#fallback-bounds',
dev: '#fallback-bounds',
tr: '#position-try-prop',
dev: '#position-try-prop',
},
tests: ['normal', '--fallback'],
tests: [
'none',
'--try-position',
'flip-block',
'flip-inline',
'flip-start',
'--try-position flip-block',
'--try-position flip-inline',
'--try-position flip-start',
'inset-area(left)',
'inset-area(center)',
'inset-area(right)',
'inset-area(span-left)',
'inset-area(span-right)',
'inset-area(x-start)',
'inset-area(x-end)',
'inset-area(span-x-start)',
'inset-area(span-x-end)',
'inset-area(x-self-start)',
'inset-area(x-self-end)',
'inset-area(span-x-self-start)',
'inset-area(span-x-self-end)',
'inset-area(span-all)',
'inset-area(top)',
'inset-area(bottom)',
'inset-area(span-top)',
'inset-area(span-bottom)',
'inset-area(y-start)',
'inset-area(y-end)',
'inset-area(span-y-start)',
'inset-area(span-y-end)',
'inset-area(y-self-start)',
'inset-area(y-self-end)',
'inset-area(span-y-self-start)',
'inset-area(span-y-self-end)',
'inset-area(left top)',
'inset-area(center span-top)',
'inset-area(span-all span-all)',
'inset-area(block-start)',
'inset-area(block-end)',
'inset-area(span-block-start)',
'inset-area(span-block-end)',
'inset-area(inline-start)',
'inset-area(inline-end)',
'inset-area(span-inline-start)',
'inset-area(span-inline-end)',
'inset-area(block-start inline-end)',
'inset-area(span-block-start span-inline-end)',
'inset-area(self-block-start)',
'inset-area(self-block-end)',
'inset-area(span-self-block-start)',
'inset-area(span-self-block-end)',
'inset-area(self-inline-start)',
'inset-area(self-inline-end)',
'inset-area(span-self-inline-start)',
'inset-area(span-self-inline-end)',
'inset-area(self-block-start self-inline-end)',
'inset-area(span-self-inline-start self-block-end)',
'inset-area(start)',
'inset-area(end)',
'inset-area(span-start)',
'inset-area(span-end)',
'inset-area(start start)',
'inset-area(center span-end)',
'inset-area(self-start)',
'inset-area(self-end)',
'inset-area(span-self-start)',
'inset-area(span-self-end)',
'inset-area(self-start self-end)',
'inset-area(span-self-start span-self-end)',
'flip-block, --try-position',
'flip-inline, --try-position flip-block',
'--try-position, inset-area(block-start)',
'normal --try-position',
'most-width flip-block',
'most-height inset-area(left)',
'most-block-size flip-block, --try-position',
'most-inline-size inset-area(block-start), --try-position flip-inline',
],
},
'position-try-options': {
links: {
tr: '#position-try-options',
dev: '#position-try-options',
},
tests: [
'none',
'--try-position',
'flip-block',
'flip-inline',
'flip-start',
'--try-position flip-block',
'--try-position flip-inline',
'--try-position flip-start',
'inset-area(left)',
'inset-area(center)',
'inset-area(right)',
'inset-area(span-left)',
'inset-area(span-right)',
'inset-area(x-start)',
'inset-area(x-end)',
'inset-area(span-x-start)',
'inset-area(span-x-end)',
'inset-area(x-self-start)',
'inset-area(x-self-end)',
'inset-area(span-x-self-start)',
'inset-area(span-x-self-end)',
'inset-area(span-all)',
'inset-area(top)',
'inset-area(bottom)',
'inset-area(span-top)',
'inset-area(span-bottom)',
'inset-area(y-start)',
'inset-area(y-end)',
'inset-area(span-y-start)',
'inset-area(span-y-end)',
'inset-area(y-self-start)',
'inset-area(y-self-end)',
'inset-area(span-y-self-start)',
'inset-area(span-y-self-end)',
'inset-area(left top)',
'inset-area(center span-top)',
'inset-area(span-all span-all)',
'inset-area(block-start)',
'inset-area(block-end)',
'inset-area(span-block-start)',
'inset-area(span-block-end)',
'inset-area(inline-start)',
'inset-area(inline-end)',
'inset-area(span-inline-start)',
'inset-area(span-inline-end)',
'inset-area(block-start inline-end)',
'inset-area(span-block-start span-inline-end)',
'inset-area(self-block-start)',
'inset-area(self-block-end)',
'inset-area(span-self-block-start)',
'inset-area(span-self-block-end)',
'inset-area(self-inline-start)',
'inset-area(self-inline-end)',
'inset-area(span-self-inline-start)',
'inset-area(span-self-inline-end)',
'inset-area(self-block-start self-inline-end)',
'inset-area(span-self-inline-start self-block-end)',
'inset-area(start)',
'inset-area(end)',
'inset-area(span-start)',
'inset-area(span-end)',
'inset-area(start start)',
'inset-area(center span-end)',
'inset-area(self-start)',
'inset-area(self-end)',
'inset-area(span-self-start)',
'inset-area(span-self-end)',
'inset-area(self-start self-end)',
'inset-area(span-self-start span-self-end)',
'flip-block, --try-position',
'flip-inline, --try-position flip-block',
'--try-position, inset-area(block-start)',
],
},
'position-try-order': {
links: {
tr: '#position-try-order-property',
dev: '#position-try-order-property',
},
tests: [
'normal',
'most-width',
'most-height',
'most-block-size',
'most-inline-size',
],
},
'position-visibility': {
links: {
tr: '#position-visibility',
dev: '#position-visibility',
},
tests: [
'always',
'anchors-valid',
'anchors-visible',
'no-overflow',
'anchors-valid anchors-visible',
'anchors-valid no-overflow',
'anchors-visible no-overflow',
'anchors-valid anchors-visible no-overflow',
],
},
},
'@rules': {
'@position-fallback': {
'@position-try': {
links: {
tr: '#fallback-rule',
dev: '#fallback-rule',
},
tests: "@position-fallback --button-popover {\n @try {\n top: anchor(--button bottom);\n left: anchor(--button left);\n }\n\n @try {\n bottom: anchor(--button top);\n right: anchor(--button right);\n }\n}",
tests: [
"@position-try --button-popover {\n top: anchor(--button bottom);\n left: anchor(--button left);\n}",
"@position-try --button-popover {\n bottom: anchor(--button top);\n right: anchor(--button right);\n margin: 1em;\n}",
"@position-try --position-try {\n inset-area: top left;\n}",
],
},
},
interfaces: {
CSSPositionFallbackRule: {
links: {
dev: '#position-fallback-rule',
mdnGroup: 'DOM',
},
tests: ['name', 'cssRules', 'insertRule', 'deleteRule'],
required: '@position-fallback --button-popover { @try { top: anchor(--button bottom); left: anchor(--button left); } }',
interface: function(style) {
return style.sheet.cssRules[0];
}
},
CSSTryRule: {
CSSPositionTryRule: {
links: {
dev: '#position-try-rule',
dev: '#om-position-try',
mdnGroup: 'DOM',
},
tests: ['style', 'cssText', 'parentRule', 'parentStyleSheet'],
required: '@position-fallback --button-popover { @try { top: anchor(--button bottom); left: anchor(--button left); } }',
tests: ['name', 'style', 'cssText', 'parentRule', 'parentStyleSheet'],
required: '@position-try --button-popover {\n top: anchor(--button bottom);\n left: anchor(--button left);\n}',
interface: function(style) {
return style.sheet.cssRules[0].cssRules[0];
}
Expand Down

0 comments on commit 38541bd

Please sign in to comment.