Support image-set() on the cursor property.
Categories
(Core :: CSS Parsing and Computation, task, P3)
Tracking
()
Tracking | Status | |
---|---|---|
firefox88 | --- | fixed |
People
(Reporter: emilio, Assigned: mtigley)
References
(Blocks 2 open bugs, )
Details
(Keywords: dev-doc-complete)
Attachments
(1 file)
There are two properties left that should support image-set per spec and don't. One is cursor
, the other is content
.
In the long term, we should probably support all <image>
syntaxes for both properties. However this is more difficult for two reasons:
-
For
cursor
, there's only one callsite that processes the images, but then theimgIContainer
gets passed around to all sorts of widgety / platform-specific code. -
For
content
, we don't have the setup to disguise a CSS image as an image request, so we need to rewrite a lot of code. Also not great.
But we can both do an incremental step towards that and allow image-set for those if we do something like storing an Image
, but not parsing non-url values.
That way image-set will be automatically supported, the code would need minimal changes, and as I said it'd be a step in the right direction.
In order to do this, we'd need to:
-
Add an extra parameter to image parsing, much like
allow_none
, to control whether we should parse onlyurl
-like values. -
Change CursorImage type definitions to use
Image
instead ofImageUrl
, and the parsing code to use the new parameter. -
Change this line, which should stop compiling, by something like
image.image.GetImageRequest()
. -
That's it, we need to add some tests to property_database.js to ensure we parse
image-set(url(..))
but notimage-set(linear-gradient(...))
Comment 1•4 years ago
|
||
For reference, there's a discussion in the CSS Working Group about this.
Emilio, shouldn't we try to get a resolution for this from the CSSWG, first?
Sebastian
Reporter | ||
Comment 2•4 years ago
|
||
Idk, the discussion in the issue seems pretty uncontroversial and it is supported by other browsers so...
Assignee | ||
Updated•4 years ago
|
Assignee | ||
Comment 3•4 years ago
|
||
Comment 5•4 years ago
|
||
Backed out for failures on test_css-properties-db.js
backout: https://hg.mozilla.org/integration/autoland/rev/6c5bc506c6b829d8847f0eaa2a1373b52aa7042b
failure log: https://treeherder.mozilla.org/logviewer?job_id=331929239&repo=autoland&lineNumber=3432
[task 2021-03-03T17:22:20.565Z] 17:22:20 INFO - TEST-START | devtools/shared/tests/xpcshell/test_css-properties-db.js
[task 2021-03-03T17:22:20.745Z] 17:22:20 WARNING - TEST-UNEXPECTED-FAIL | devtools/shared/tests/xpcshell/test_css-properties-db.js | xpcshell return code: 0
[task 2021-03-03T17:22:20.746Z] 17:22:20 INFO - TEST-INFO took 176ms
[task 2021-03-03T17:22:20.747Z] 17:22:20 INFO - >>>>>>>
[task 2021-03-03T17:22:20.747Z] 17:22:20 INFO - (xpcshell/head.js) | test MAIN run_test pending (1)
[task 2021-03-03T17:22:20.748Z] 17:22:20 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_css-properties-db.js | run_test - [run_test : 42] The pseudo elements match on the client and platform. If this assertion fails, then the client side CSS properties list in devtools is out of sync with the CSS properties on the platform. To fix this assertion runmach devtools-css-db
to re-generate the client side properties. - [":after",":before",":marker",":backdrop",":cue",":first-letter",":first-line",":selection",":-moz-focus-inner",":-moz-progress-bar",":-moz-range-track",":-moz-range-progress",":-moz-range-thumb",":-moz-meter-bar",":placeholder",":-moz-color-swatch",":file-selector-button"] deepEqual [":after",":before",":marker",":backdrop",":cue",":first-letter",":first-line",":selection",":-moz-focus-inner",":-moz-progress-bar",":-moz-range-track",":-moz-range-progress",":-moz-range-thumb",":-moz-meter-bar",":placeholder",":-moz-color-swatch",":file-selector-button"]
[task 2021-03-03T17:22:20.756Z] 17:22:20 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_css-properties-db.js | run_test - [run_test : 50] The preferences match on the client and platform. If this assertion fails, then the client side CSS properties list in devtools is out of sync with the CSS properties on the platform. To fix this assertion runmach devtools-css-db
to re-generate the client side properties. - [["aspect-ratio","layout.css.aspect-ratio.enabled"],["font-optical-sizing","layout.css.font-variations.enabled"],["initial-letter","layout.css.initial-letter.enabled"],["masonry-auto-flow","layout.css.grid-template-masonry-value.enabled"],["math-depth","layout.css.math-depth.enabled"],["math-style","layout.css.math-style.enabled"],["-moz-osx-font-smoothing","layout.css.osx-font-smoothing.enabled"],["offset-rotate","layout.css.motion-path.enabled"],["overflow-anchor","layout.css.scroll-anchoring.enabled"],["touch-action","layout.css.touch_action.enabled"],["-webkit-line-clamp","layout.css.webkit-line-clamp.enabled"],["overflow-clip-box-block","layout.css.overflow-clip-box.enabled"],["overflow-clip-box-inline","layout.css.overflow-clip-box.enabled"],["overflow-block","layout.css.overflow-logical.enabled"],["overflow-inline","layout.css.overflow-logical.enabled"],["overscroll-behavior-block","layout.css.overscroll-behavior.enabled"],["overscroll-behavior-inline","layout.css.overscroll-behavior.enabled"],["overscroll-behavior-x","layout.css.overscroll-behavior.enabled"],["overscroll-behavior-y","layout.css.overscroll-behavior.enabled"],["align-tracks","layout.css.grid-template-masonry-value.enabled"],["backdrop-filter","layout.css.backdrop-filter.enabled"],["font-variation-settings","layout.css.font-variations.enabled"],["justify-tracks","layout.css.grid-template-masonry-value.enabled"],["offset-anchor","layout.css.motion-path.enabled"],["offset-path","layout.css.motion-path.enabled"],["rotate","layout.css.individual-transform.enabled"],["scale","layout.css.individual-transform.enabled"],["translate","layout.css.individual-transform.enabled"],["offset-distance","layout.css.motion-path.enabled"],["overflow-clip-box","layout.css.overflow-clip-box.enabled"],["overscroll-behavior","layout.css.overscroll-behavior.enabled"],["offset","layout.css.motion-path.enabled"],["zoom","layout.css.zoom-transform-hack.enabled"],["-moz-transition-duration","layout.css.prefixes.transitions"],["-moz-transition-timing-function","layout.css.prefixes.transitions"],["-moz-transition-property","layout.css.prefixes.transitions"],["-moz-transition-delay","layout.css.prefixes.transitions"],["-moz-animation-name","layout.css.prefixes.animations"],["-moz-animation-duration","layout.css.prefixes.animations"],["-moz-animation-timing-function","layout.css.prefixes.animations"],["-moz-animation-iteration-count","layout.css.prefixes.animations"],["-moz-animation-direction","layout.css.prefixes.animations"],["-moz-animation-play-state","layout.css.prefixes.animations"],["-moz-animation-fill-mode","layout.css.prefixes.animations"],["-moz-animation-delay","layout.css.prefixes.animations"],["-moz-transform","layout.css.prefixes.transforms"],["-moz-perspective","layout.css.prefixes.transforms"],["-moz-perspective-origin","layout.css.prefixes.transforms"],["-moz-backface-visibility","layout.css.prefixes.transforms"],["-moz-transform-style","layout.css.prefixes.transforms"],["-moz-transform-origin","layout.css.prefixes.transforms"],["-moz-column-width","layout.css.prefixes.columns"],["-moz-column-count","layout.css.prefixes.columns"],["-moz-column-fill","layout.css.prefixes.columns"],["-moz-column-rule-width","layout.css.prefixes.columns"],["-moz-column-rule-color","layout.css.prefixes.columns"],["-moz-column-span","layout.css.prefixes.columns"],["-moz-column-rule-style","layout.css.prefixes.columns"],["-moz-font-feature-settings","layout.css.prefixes.font-features"],["-moz-font-language-override","layout.css.prefixes.font-features"],["-moz-box-sizing","layout.css.prefixes.box-sizing"],["-moz-column-gap","layout.css.prefixes.columns"],["-moz-border-image","layout.css.prefixes.border-image"],["-moz-transition","layout.css.prefixes.transitions"],["-moz-animation","layout.css.prefixes.animations"],["-moz-columns","layout.css.prefixes.columns"],["-moz-column-rule","layout.css.prefixes.columns"]] deepEqual [["aspect-ratio","layout.css.aspect-ratio.enabled"],["font-optical-sizing","layout.css.font-variations.enabled"],["initial-letter","layout.css.initial-letter.enabled"],["masonry-auto-flow","layout.css.grid-template-masonry-value.enabled"],["math-depth","layout.css.math-depth.enabled"],["math-style","layout.css.math-style.enabled"],["-moz-osx-font-smoothing","layout.css.osx-font-smoothing.enabled"],["offset-rotate","layout.css.motion-path.enabled"],["overflow-anchor","layout.css.scroll-anchoring.enabled"],["touch-action","layout.css.touch_action.enabled"],["-webkit-line-clamp","layout.css.webkit-line-clamp.enabled"],["overflow-clip-box-block","layout.css.overflow-clip-box.enabled"],["overflow-clip-box-inline","layout.css.overflow-clip-box.enabled"],["overflow-block","layout.css.overflow-logical.enabled"],["overflow-inline","layout.css.overflow-logical.enabled"],["overscroll-behavior-block","layout.css.overscroll-behavior.enabled"],["overscroll-behavior-inline","layout.css.overscroll-behavior.enabled"],["overscroll-behavior-x","layout.css.overscroll-behavior.enabled"],["overscroll-behavior-y","layout.css.overscroll-behavior.enabled"],["align-tracks","layout.css.grid-template-masonry-value.enabled"],["backdrop-filter","layout.css.backdrop-filter.enabled"],["font-variation-settings","layout.css.font-variations.enabled"],["justify-tracks","layout.css.grid-template-masonry-value.enabled"],["offset-anchor","layout.css.motion-path.enabled"],["offset-path","layout.css.motion-path.enabled"],["rotate","layout.css.individual-transform.enabled"],["scale","layout.css.individual-transform.enabled"],["translate","layout.css.individual-transform.enabled"],["offset-distance","layout.css.motion-path.enabled"],["overflow-clip-box","layout.css.overflow-clip-box.enabled"],["overscroll-behavior","layout.css.overscroll-behavior.enabled"],["offset","layout.css.motion-path.enabled"],["zoom","layout.css.zoom-transform-hack.enabled"],["-moz-transition-duration","layout.css.prefixes.transitions"],["-moz-transition-timing-function","layout.css.prefixes.transitions"],["-moz-transition-property","layout.css.prefixes.transitions"],["-moz-transition-delay","layout.css.prefixes.transitions"],["-moz-animation-name","layout.css.prefixes.animations"],["-moz-animation-duration","layout.css.prefixes.animations"],["-moz-animation-timing-function","layout.css.prefixes.animations"],["-moz-animation-iteration-count","layout.css.prefixes.animations"],["-moz-animation-direction","layout.css.prefixes.animations"],["-moz-animation-play-state","layout.css.prefixes.animations"],["-moz-animation-fill-mode","layout.css.prefixes.animations"],["-moz-animation-delay","layout.css.prefixes.animations"],["-moz-transform","layout.css.prefixes.transforms"],["-moz-perspective","layout.css.prefixes.transforms"],["-moz-perspective-origin","layout.css.prefixes.transforms"],["-moz-backface-visibility","layout.css.prefixes.transforms"],["-moz-transform-style","layout.css.prefixes.transforms"],["-moz-transform-origin","layout.css.prefixes.transforms"],["-moz-column-width","layout.css.prefixes.columns"],["-moz-column-count","layout.css.prefixes.columns"],["-moz-column-fill","layout.css.prefixes.columns"],["-moz-column-rule-width","layout.css.prefixes.columns"],["-moz-column-rule-color","layout.css.prefixes.columns"],["-moz-column-span","layout.css.prefixes.columns"],["-moz-column-rule-style","layout.css.prefixes.columns"],["-moz-font-feature-settings","layout.css.prefixes.font-features"],["-moz-font-language-override","layout.css.prefixes.font-features"],["-moz-box-sizing","layout.css.prefixes.box-sizing"],["-moz-column-gap","layout.css.prefixes.columns"],["-moz-border-image","layout.css.prefixes.border-image"],["-moz-transition","layout.css.prefixes.transitions"],["-moz-animation","layout.css.prefixes.animations"],["-moz-columns","layout.css.prefixes.columns"],["-moz-column-rule","layout.css.prefixes.columns"]]
[task 2021-03-03T17:22:20.758Z] 17:22:20 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_css-properties-db.js | run_test - [run_test : 71] The static database and platform match for "-moz-animation". - true == true
[task 2021-03-03T17:22:20.758Z] 17:22:20 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_css-properties-db.js | run_test - [run_test : 71] The static database and platform match for "-moz-animation-delay". - true == true
Assignee | ||
Updated•4 years ago
|
Comment 7•4 years ago
|
||
bugherder |
Description
•