Proposal CSS Masking

—- dataentry —- Spec_tags : css-masking # in alpha order; or “none” Owner_tags : dschulze # Who’s driving the discussion? Status_tags : Resolved # [ Open | Resolved | Closed | Pending ] [, Urgent]? Added_dt : 2012-08-28 # Date added as WG discussion request

Action : Resolve to continue on ED # Or, if Pending, pending what? # Some Examples:

Action : Pick A, B, or C?

Action : Approve the proposal?

Action : Discuss problem and provide direction?

Action : Help research needed info!

Action : Help write proposals!

Action : Give feedback!

Action : Publish FPWD/WD/LC/CR/PR/REC!

Issue_urls : http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html Proposal_urls : Agenda_urls : # If this is part of an ordered series of related topics, e.g. LC issues, use this to link to the supertopic agenda

---

Background

The CSS WG and the SVG WG decided to work on a CSS Masking specification in the FXTF. The CSS WG did not decide if the specification should specify the current behavior of browsers:

• ‘mask’ as a shorthand for ‘mask-image’ and other properties deriving from ‘background’ and ‘mask-box-image’ as shorthand for properties deriving from ‘border-image’ (WebKit)
• ‘mask’ that takes a to a 'mask' element to mask arbitrary HTML and SVG content (Firefox)
• ‘clip-path’ that takes a to a 'clipPath' element to clip arbitrary HTML and SVG content (Firefox)

Further more the new specification unifies both implementations and extends ‘clip-path’ to take s from CSS Exclusions as shorthand for clipping beside .

The CSS WG needs to decide if we continue with the current specification.

Problem Statement

• Are all properties needed? In question: ‘mask-origin’, ‘mask-attachment’ and ‘mask-clip’.
• Masking/Clipping on Firefox operates on ‘bounding client rect’, ‘mask-image’ on WebKit operate on ‘border-box’, ‘content-box’ and ‘padding-box’. Both behaviors are reasonable.
• select() and child are new functions/keywords requested by the SVG WG. The sense in the HTML world depends on the definition.

Resolved

• Go on with ED
• Keep ‘mask-origin’
• Drop ‘mask-attachment’
• ‘mask-clip’ must allow extending the region beyond border-box.
• Keep ‘clip-path’
• Consider making ‘clip’ shadowing ‘clip-path’ (or the other way around), ‘rect()’ would just apply to absolute positioned elements for legacy reasons