From 4a71f4233a1852e2fc54e32a442e590ce3178ce1 Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Wed, 1 Jul 2015 15:22:36 +0200 Subject: [PATCH 1/3] [css-overflow] Add computed value logic for overflow and contain: paint --- css-overflow/Overview.bs | 11 + css-overflow/Overview.html | 827 +++++++------------------------------ 2 files changed, 161 insertions(+), 677 deletions(-) diff --git a/css-overflow/Overview.bs b/css-overflow/Overview.bs index 7abfdb2bf87..d27be85182a 100644 --- a/css-overflow/Overview.bs +++ b/css-overflow/Overview.bs @@ -28,6 +28,8 @@ type: dfn; spec:css-multicol-1; text:overflow column
 url: http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style; type: property; text: overflow-style;
 url: http://dev.w3.org/csswg/selectors-3/#subject; type: dfn; text: subject;
+url: http://dev.w3.org/csswg/css-containment/#propdef-contain; type: property; text: contain
+url: http://dev.w3.org/csswg/css-containment/#paint-containment; type: dfn; text: paint containment
 
+ @@ -308,7 +239,7 @@

CSS Overflow Module Level 3

Editor’s Draft, -

+
@@ -319,8 +250,9 @@

http://www.w3.org/TR/2013/WD-css-overflow-3-20130418/
Feedback: -
www-style@w3.org with subject line “[css-overflow] … message topic …” (archives) +
www-style@w3.org with subject line “[css-overflow] … message topic …” (archives)
Issue Tracking: +
GitHub
Inline In Spec
Editors:
L. David Baron (Mozilla) @@ -865,6 +797,17 @@

  • + Otherwise, if both cascaded values are visible + and the computed value of contain is + one that activates paint containment + (e.g. contain:strict + or contain: paint + or contain: layout paint…), + then the computed values of both overflow-x and overflow-y + are changed to clip. + +
  • Otherwise, the computed values are as specified. @@ -910,7 +853,7 @@

    Mozilla implements -moz-hidden-unscrollable, +

    Mozilla implements -moz-hidden-unscrollable, which is similar to clip, except that it does not cause the element to establish a BFC. Should we match that?

    @@ -926,12 +869,12 @@

    print, - overflowing content may be printed. + overflowing content may be printed.
    auto
    The behavior of the auto value is user agent-dependent, - but should cause a scrolling mechanism to be provided for overflowing boxes. + but should cause a scrolling mechanism to be provided for overflowing boxes.

  • @@ -947,7 +890,7 @@

    UAs must apply the overflow property set on the root element to the viewport. HTML UAs must instead apply the ‘overflow’ property - from the body element to the viewport + from the body element to the viewport if the value on the root element is visible. The visible value when used for the viewport must be interpreted as auto. @@ -963,7 +906,7 @@

    -

    import examples from [CSS3-BOX].

    +

    import examples from [CSS3-BOX].

    @@ -1034,14 +977,14 @@

    per grammar -

    The naming of this property and its values is preliminary. +

    The naming of this property and its values is preliminary. This was initially proposed as "fragmentation: auto | none | break | clone | page" in https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html, and there is not yet wide agreement as to which naming is better.

    -

    This property is meant to generalize and replace region-fragment. +

    This property is meant to generalize and replace region-fragment. Once it is sufficiently stable in this specification, region-fragment should be removed from the regions specification in favor of this.

    @@ -1079,7 +1022,7 @@

    When the element isn’t a fragmentation container already, +

    When the element isn’t a fragmentation container already, should this work by turning it directly into one, or by creating a fragment box inside it like fragments does?

    @@ -1148,7 +1091,7 @@

    If we introduce a pseudo element that can select columns in a multicol, +

    If we introduce a pseudo element that can select columns in a multicol, we would need to specify that auto computes to auto on it, or introduce a new value and have auto compute to that (but what would that value compute to on things that aren’t columns?).

    @@ -1165,10 +1108,10 @@

    paginate value of the continue property.

    -

    Write this section

    +

    Write this section

    -

    Pages should be possible to style with @page rules. How does that work for nested pages?

    +

    Pages should be possible to style with @page rules. How does that work for nested pages?

    @@ -1176,26 +1119,25 @@

    auto, or by inserting this in the UA stylesheet: -
    @media (overflow-block: paged), (overflow-block: optional-paged) {
    -  :root {
    -    continue: paginate;
    -  }
    -}
    -
    +
    @media (overflow-block: paged), (overflow-block: optional-paged) {
    +  :root {
    +    continue: paginate;
    +  }
    +}

    -

    Traditional pagination (e.g. when printing) assumes that +

    Traditional pagination (e.g. when printing) assumes that :root is contained in the page box, rather than having the page box be a pseudo element child of :root. Can we work around that using something similar to fragment boxes? Or maybe by having a fragment box (reproducing :root) inside a page box inside :root?

    -

    How does the page box model work when it is a child of a regular css box?

    +

    How does the page box model work when it is a child of a regular css box?

    -

    The initial proposal in [CSS3GCPM] and implemantation from Opera +

    The initial proposal in [CSS3GCPM] and implemantation from Opera used 4 values instead of paginate: "paged-x | paged-y | paged-x-controls | paged-y-controls". Should this property also include these values, @@ -1203,13 +1145,13 @@

    -

    Ability to display N pages at once +

    Ability to display N pages at once rather than just one page at once? Could this be a value of "pagination-layout", such as: "pagination-layout: horizontal 2;"

    -

    Brad Kemper has proposed a model for combining pagination and +

    Brad Kemper has proposed a model for combining pagination and fragment overflow, which also deals with displaying multiple pages. http://www.w3.org/mid/FF1704C5-D5C1-4D6F-A99D-0DD094036685@gmail.com

    @@ -1514,15 +1456,15 @@

    Specifying other values of display, position, or float is permitted, but is not allowed to change - the computed value of display-inside. + the computed value of display-inside. (Since continue only applies to block containers, flex containers, and grid containers - the computed value of display-inside is always - block, flex, or - grid. + the computed value of display-inside is always + block, flex, or + grid. Need to specify exactly how this works, but it depends on - having display-inside and display-outside specified. + having display-inside and display-outside specified.

    @@ -1550,7 +1492,7 @@

    This inheritance rule allows specifying styles indirectly (by using explicit inherit or using default inheritance - on properties that don’t apply to ::first-letter) + on properties that don’t apply to ::first-letter) that can’t be specified directly (based on the rules in the next section). This is a problem. @@ -1610,14 +1552,14 @@

    ::nth-fragment() pseudo-element can also be used to style content inside of a fragment box. - Unlike the ::first-line and ::first-letter pseudo-elements, + Unlike the ::first-line and ::first-letter pseudo-elements, the ::nth-fragment() pseudo-element can be applied to parts of the selector other than the subject: in particular, it can match ancestors of the subject. However, the only CSS properties applied by rules with such selectors are those that apply - to the ::first-letter pseudo-element. + to the ::first-letter pseudo-element.

    @@ -1633,7 +1575,7 @@

  • the declarations are for properties that apply to the - ::first-letter pseudo-element, + ::first-letter pseudo-element, @@ -1822,7 +1764,7 @@

    it should actually apply to any fragmentainer.

    -

    having max-lines do nothing on regular elements is not ideal. +

    having max-lines do nothing on regular elements is not ideal. When applied to non fragmentainers, it should probably cause continue to compute to discard so that you only need to reach for one property rather than 2 to get @@ -2136,14 +2078,6 @@

    content -
  • [css-display-3] defines the following terms: -
  • [css-multicol-1] defines the following terms:
  • -
    Mozilla implements -moz-hidden-unscrollable, +
    Mozilla implements -moz-hidden-unscrollable, which is similar to clip, except that it does not cause the element to establish a BFC. Should we match that?
    -
    import examples from [CSS3-BOX].
    +
    import examples from [CSS3-BOX].
    Explain which directions allow scrolling and which don’t, as a function of direction @@ -2399,54 +2332,53 @@

    Issue despite that implementations have implemented overflow-x and overflow-y instead?

    -
    The naming of this property and its values is preliminary. +
    The naming of this property and its values is preliminary. This was initially proposed as "fragmentation: auto | none | break | clone | page" in https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html, and there is not yet wide agreement as to which naming is better.
    -
    This property is meant to generalize and replace region-fragment. +
    This property is meant to generalize and replace region-fragment. Once it is sufficiently stable in this specification, region-fragment should be removed from the regions specification in favor of this.
    -
    When the element isn’t a fragmentation container already, +
    When the element isn’t a fragmentation container already, should this work by turning it directly into one, or by creating a fragment box inside it like fragments does?
    -
    If we introduce a pseudo element that can select columns in a multicol, +
    If we introduce a pseudo element that can select columns in a multicol, we would need to specify that auto computes to auto on it, or introduce a new value and have auto compute to that (but what would that value compute to on things that aren’t columns?).
    -
    Write this section
    -
    Pages should be possible to style with @page rules. How does that work for nested pages?
    +
    Write this section
    +
    Pages should be possible to style with @page rules. How does that work for nested pages?
    Should traditional pagination (e.g. when printing) be expressed through some magic in the computed value of auto, or by inserting this in the UA stylesheet: -
    @media (overflow-block: paged), (overflow-block: optional-paged) {
    -  :root {
    -    continue: paginate;
    -  }
    -}
    -
    +
    @media (overflow-block: paged), (overflow-block: optional-paged) {
    +  :root {
    +    continue: paginate;
    +  }
    +}
    -
    Traditional pagination (e.g. when printing) assumes that +
    Traditional pagination (e.g. when printing) assumes that :root is contained in the page box, rather than having the page box be a pseudo element child of :root. Can we work around that using something similar to fragment boxes? Or maybe by having a fragment box (reproducing :root) inside a page box inside :root?
    -
    How does the page box model work when it is a child of a regular css box?
    -
    The initial proposal in [CSS3GCPM] and implemantation from Opera +
    How does the page box model work when it is a child of a regular css box?
    +
    The initial proposal in [CSS3GCPM] and implemantation from Opera used 4 values instead of paginate: "paged-x | paged-y | paged-x-controls | paged-y-controls". Should this property also include these values, or are they better handled as separate properties? (e.g.: "pagination-layout: auto | horizontal | vertical", "pagination-controls: auto | none")
    -
    Ability to display N pages at once +
    Ability to display N pages at once rather than just one page at once? Could this be a value of "pagination-layout", such as: "pagination-layout: horizontal 2;"
    -
    Brad Kemper has proposed a model for combining pagination and +
    Brad Kemper has proposed a model for combining pagination and fragment overflow, which also deals with displaying multiple pages. http://www.w3.org/mid/FF1704C5-D5C1-4D6F-A99D-0DD094036685@gmail.com
    @@ -2514,11 +2446,11 @@

    Issue the cascading module as well?

    Need to specify exactly how this works, but it depends on - having display-inside and display-outside specified.
    + having display-inside and display-outside specified.
    This inheritance rule allows specifying styles indirectly (by using explicit inherit or using default inheritance - on properties that don’t apply to ::first-letter) + on properties that don’t apply to ::first-letter) that can’t be specified directly (based on the rules in the next section). This is a problem. @@ -2538,7 +2470,7 @@

    Issue to pagination? Given what we’re doing with the continue property, it should actually apply to any fragmentainer.

    -
    having max-lines do nothing on regular elements is not ideal. +
    having max-lines do nothing on regular elements is not ideal. When applied to non fragmentainers, it should probably cause continue to compute to discard so that you only need to reach for one property rather than 2 to get @@ -2553,464 +2485,5 @@

    Issue the content they produce for interactive media is printed.

    -
    - +
    \ No newline at end of file From a83fcc9cfeb719547453e4f3cd670f51144e1660 Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Wed, 1 Jul 2015 15:34:55 +0200 Subject: [PATCH 2/3] [css-containment] Express paint containment in terms of overflow:clip Based on this resolution: https://lists.w3.org/Archives/Public/www-style/2015Apr/0405.html --- css-containment/Overview.bs | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/css-containment/Overview.bs b/css-containment/Overview.bs index 2cc0d5b0e88..262ce48e70c 100644 --- a/css-containment/Overview.bs +++ b/css-containment/Overview.bs @@ -197,8 +197,12 @@ Paint Containment Giving an element paint containment has the following effects: - 1. The contents of the element must be clipped to the element's content box. - This includes both the paint of the descendants and their geometry (similar to overflow). + 1. As specified in [[!CSS-OVERFLOW-3]], + the computed value the 'overflow-x' and 'overflow-y' is changed to ''overflow/clip'' + if it would otherwise have been ''overflow/visible''. + This means that regardless of the specified value of 'overflow', + the contents of the element is clipped to the element's content box, + including both the paint of the descendants and their geometry 2. The element must act as a containing block for absolutely positioned and fixed positioned descendants. 3. The element must be a formatting context. @@ -208,7 +212,8 @@ Paint Containment the UA can directly skip trying to paint its contents, as they're guaranteed to be off-screen/obscured as well. - 2. If the containing element is ''overflow:visible'', + 2. If the containing element would have been ''overflow:visible'', + it becomes ''overflow:clip'' and the UA can reserve "canvas" space for the element exactly the element's size. (In similar, scrollable, situations, like ''overflow: hidden'', it's possible to scroll to the currently-clipped content, From 43a8b06eaf54f1fb645b73a84fdede55f1ebb0dd Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Wed, 1 Jul 2015 19:15:41 +0200 Subject: [PATCH 3/3] [css-containment] Improve phrasing --- css-containment/Overview.bs | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/css-containment/Overview.bs b/css-containment/Overview.bs index 262ce48e70c..fab7b071754 100644 --- a/css-containment/Overview.bs +++ b/css-containment/Overview.bs @@ -197,9 +197,8 @@ Paint Containment Giving an element paint containment has the following effects: - 1. As specified in [[!CSS-OVERFLOW-3]], - the computed value the 'overflow-x' and 'overflow-y' is changed to ''overflow/clip'' - if it would otherwise have been ''overflow/visible''. + 1. If the computed value of overflow-x or overflow-y would otherwise have been ''overflow/visible'', + it must instead compute to ''overflow/clip''. [[!CSS-OVERFLOW-3]] This means that regardless of the specified value of 'overflow', the contents of the element is clipped to the element's content box, including both the paint of the descendants and their geometry @@ -212,8 +211,8 @@ Paint Containment the UA can directly skip trying to paint its contents, as they're guaranteed to be off-screen/obscured as well. - 2. If the containing element would have been ''overflow:visible'', - it becomes ''overflow:clip'' and + 2. If the containing element's overflow has been changed to ''overflow/clip'' + (because it was originally ''overflow/visible''), the UA can reserve "canvas" space for the element exactly the element's size. (In similar, scrollable, situations, like ''overflow: hidden'', it's possible to scroll to the currently-clipped content,