firefox-main/devtools/server/tests/chrome/inactive-property-helper/at-position-try-rules.mjs (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/*
InactivePropertyHelper `@position-try`
- position-anchor
- position-area
- Inset property descriptors
- top
- left
- bottom
- right
- inset-block-start
- inset-block-end
- inset-inline-start
- inset-inline-end
- inset-block
- inset-inline
- inset
- Margin property descriptors:
- margin-top
- margin-left
- margin-bottom
- margin-right
- margin-block-start
- margin-block-end
- margin-inline-start
- margin-inline-end
- margin
- margin-block
- margin-inline
- Sizing property descriptors:
- width
- height
- min-width
- min-height
- max-width
- max-height
- block-size
- inline-size
- min-block-size
- min-inline-size
- max-block-size
- max-inline-size
- Self-alignment property descriptors:
- align-self
- justify-self
- place-self
*/
export default [
{
info: "color is inactive in @position-try",
property: "color",
tagName: "div",
rules: ["@position-try --pt { color: tomato; }"],
isActive: false,
expectedMsgId: "inactive-css-at-position-try-not-supported",
},
{
info: "background is inactive in @position-try",
property: "background",
tagName: "div",
rules: ["@position-try --pt { background: gold; }"],
isActive: false,
expectedMsgId: "inactive-css-at-position-try-not-supported",
},
{
info: "top is still inactive on non-fixed element",
property: "top",
tagName: "div",
rules: ["@position-try --pt { top: 0; }"],
isActive: false,
},
{
info: "custom property are inactive in @position-try",
property: "--my-var",
tagName: "div",
rules: ["@position-try --pt { --my-var: red; }"],
isActive: false,
},
{
info: "position-anchor is active in @position-try",
property: "position-anchor",
tagName: "div",
rules: ["@position-try --pt { position-anchor: auto; }"],
isActive: true,
},
{
info: "position-area is active in @position-try",
property: "position-area",
tagName: "div",
rules: ["@position-try --pt { position-area: top left; }"],
isActive: true,
},
{
info: "top is active in @position-try",
property: "top",
tagName: "div",
rules: ["@position-try --pt { top: 0; }", "div { position: fixed; }"],
isActive: true,
},
{
info: "left is active in @position-try",
property: "left",
tagName: "div",
rules: ["@position-try --pt { left: 0; }", "div { position: fixed; }"],
isActive: true,
},
{
info: "bottom is active in @position-try",
property: "bottom",
tagName: "div",
rules: ["@position-try --pt { bottom: 0; }", "div { position: fixed; }"],
isActive: true,
},
{
info: "right is active in @position-try",
property: "right",
tagName: "div",
rules: ["@position-try --pt { right: 0; }", "div { position: fixed; }"],
isActive: true,
},
{
info: "inset-block-start is active in @position-try",
property: "inset-block-start",
tagName: "div",
rules: [
"@position-try --pt { inset-block-start: 0; }",
"div { position: fixed; }",
],
isActive: true,
},
{
info: "inset-block-end is active in @position-try",
property: "inset-block-end",
tagName: "div",
rules: [
"@position-try --pt { inset-block-end: 0; }",
"div { position: fixed; }",
],
isActive: true,
},
{
info: "inset-inline-start is active in @position-try",
property: "inset-inline-start",
tagName: "div",
rules: [
"@position-try --pt { inset-inline-start: 0; }",
"div { position: fixed; }",
],
isActive: true,
},
{
info: "inset-inline-end is active in @position-try",
property: "inset-inline-end",
tagName: "div",
rules: [
"@position-try --pt { inset-inline-end: 0; }",
"div { position: fixed; }",
],
isActive: true,
},
{
info: "inset-block is active in @position-try",
property: "inset-block",
tagName: "div",
rules: [
"@position-try --pt { inset-block: 0; }",
"div { position: fixed; }",
],
isActive: true,
},
{
info: "inset-inline is active in @position-try",
property: "inset-inline",
tagName: "div",
rules: [
"@position-try --pt { inset-inline: 0; }",
"div { position: fixed; }",
],
isActive: true,
},
{
info: "inset is active in @position-try",
property: "inset",
tagName: "div",
rules: ["@position-try --pt { inset: 0; }", "div { position: fixed; }"],
isActive: true,
},
{
info: "margin-top is active in @position-try",
property: "margin-top",
tagName: "div",
rules: ["@position-try --pt { margin-top: 10px; }"],
isActive: true,
},
{
info: "margin-left is active in @position-try",
property: "margin-left",
tagName: "div",
rules: ["@position-try --pt { margin-left: 10px; }"],
isActive: true,
},
{
info: "margin-bottom is active in @position-try",
property: "margin-bottom",
tagName: "div",
rules: ["@position-try --pt { margin-bottom: 10px; }"],
isActive: true,
},
{
info: "margin-right is active in @position-try",
property: "margin-right",
tagName: "div",
rules: ["@position-try --pt { margin-right: 10px; }"],
isActive: true,
},
{
info: "margin-block-start is active in @position-try",
property: "margin-block-start",
tagName: "div",
rules: ["@position-try --pt { margin-block-start: 10px; }"],
isActive: true,
},
{
info: "margin-block-end is active in @position-try",
property: "margin-block-end",
tagName: "div",
rules: ["@position-try --pt { margin-block-end: 10px; }"],
isActive: true,
},
{
info: "margin-inline-start is active in @position-try",
property: "margin-inline-start",
tagName: "div",
rules: ["@position-try --pt { margin-inline-start: 10px; }"],
isActive: true,
},
{
info: "margin-inline-end is active in @position-try",
property: "margin-inline-end",
tagName: "div",
rules: ["@position-try --pt { margin-inline-end: 10px; }"],
isActive: true,
},
{
info: "margin is active in @position-try",
property: "margin",
tagName: "div",
rules: ["@position-try --pt { margin: 10px; }"],
isActive: true,
},
{
info: "margin-block is active in @position-try",
property: "margin-block",
tagName: "div",
rules: ["@position-try --pt { margin-block: 10px; }"],
isActive: true,
},
{
info: "margin-inline is active in @position-try",
property: "margin-inline",
tagName: "div",
rules: ["@position-try --pt { margin-inline: 10px; }"],
isActive: true,
},
{
info: "width is active in @position-try",
property: "width",
tagName: "div",
rules: ["@position-try --pt { width: 200px; }"],
isActive: true,
},
{
info: "height is active in @position-try",
property: "height",
tagName: "div",
rules: ["@position-try --pt { height: 200px; }"],
isActive: true,
},
{
info: "min-width is active in @position-try",
property: "min-width",
tagName: "div",
rules: ["@position-try --pt { min-width: 200px; }"],
isActive: true,
},
{
info: "min-height is active in @position-try",
property: "min-height",
tagName: "div",
rules: ["@position-try --pt { min-height: 200px; }"],
isActive: true,
},
{
info: "max-width is active in @position-try",
property: "max-width",
tagName: "div",
rules: ["@position-try --pt { max-width: 200px; }"],
isActive: true,
},
{
info: "max-height is active in @position-try",
property: "max-height",
tagName: "div",
rules: ["@position-try --pt { max-height: 200px; }"],
isActive: true,
},
{
info: "block-size is active in @position-try",
property: "block-size",
tagName: "div",
rules: ["@position-try --pt { block-size: 200px; }"],
isActive: true,
},
{
info: "inline-size is active in @position-try",
property: "inline-size",
tagName: "div",
rules: ["@position-try --pt { inline-size: 200px; }"],
isActive: true,
},
{
info: "min-block-size is active in @position-try",
property: "min-block-size",
tagName: "div",
rules: ["@position-try --pt { min-block-size: 200px; }"],
isActive: true,
},
{
info: "min-inline-size is active in @position-try",
property: "min-inline-size",
tagName: "div",
rules: ["@position-try --pt { min-inline-size: 200px; }"],
isActive: true,
},
{
info: "max-block-size is active in @position-try",
property: "max-block-size",
tagName: "div",
rules: ["@position-try --pt { max-block-size: 200px; }"],
isActive: true,
},
{
info: "max-inline-size is active in @position-try",
property: "max-inline-size",
tagName: "div",
rules: ["@position-try --pt { max-inline-size: 200px; }"],
isActive: true,
},
{
info: "align-self is active in @position-try",
property: "align-self",
tagName: "div",
rules: [
"@position-try --pt { align-self: center; }",
"div { position: fixed; }",
],
isActive: true,
},
{
info: "justify-self is active in @position-try",
property: "justify-self",
tagName: "div",
rules: [
"@position-try --pt { justify-self: center; }",
"div { position: fixed; }",
],
isActive: true,
},
{
info: "place-self is active in @position-try",
property: "place-self",
tagName: "div",
rules: [
"@position-try --pt { place-self: center; }",
"div { position: fixed; }",
],
isActive: true,
},
];