From 7c0e0b5f86f4d2f3cf807298e1233a11b242867d Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 31 Mar 2022 14:58:59 +0200 Subject: [PATCH 1/4] Split definition of clipped by overflow --- pages/glossary/clipped-by-overflow.md | 26 ------------------- .../horizontally-clipped-by-overflow.md | 25 ++++++++++++++++++ .../vertically-clipped-by-overflow.md | 25 ++++++++++++++++++ 3 files changed, 50 insertions(+), 26 deletions(-) delete mode 100644 pages/glossary/clipped-by-overflow.md create mode 100644 pages/glossary/horizontally-clipped-by-overflow.md create mode 100755 pages/glossary/vertically-clipped-by-overflow.md diff --git a/pages/glossary/clipped-by-overflow.md b/pages/glossary/clipped-by-overflow.md deleted file mode 100644 index 7d4ac1cdef..0000000000 --- a/pages/glossary/clipped-by-overflow.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Clipped by Overflow -key: clipped-by-overflow -unambiguous: true -objective: true ---- - -A [node][] with an [ancestor][] in the [flat tree][] with a [computed][] [overflow][] of `none` or `clipped`, where -changing the [overflow][] of all such [ancestors][ancestor] to `visible` would cause more of the [node][] to become [visible][]. - -#### Example of clipped by overflow - -This `img` element has an [ancestor][] `div` element with an `overflow` of `none` (both `overflow-x` and `overflow-y`). The height of the `img` is greater than that of the [ancestor][] `div`, and so is clipped by the `overflow` property of the `div`. - -```html -
- Partial W3C Logo -
-``` - -[visible]: #visible -[node]: https://dom.spec.whatwg.org/#node 'DOM node, as of 2019/02/14' -[ancestor]: https://dom.spec.whatwg.org/#concept-tree-ancestor 'DOM ancestor, as of 2019/02/14' -[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'CSS draft, flat tree, 2020/02/14' -[computed]: https://www.w3.org/TR/css-cascade-3/#computed-value -[overflow]: https://www.w3.org/TR/CSS22/visufx.html#overflow diff --git a/pages/glossary/horizontally-clipped-by-overflow.md b/pages/glossary/horizontally-clipped-by-overflow.md new file mode 100644 index 0000000000..1085cd1591 --- /dev/null +++ b/pages/glossary/horizontally-clipped-by-overflow.md @@ -0,0 +1,25 @@ +--- +title: Horizontally Clipped by Overflow +key: horizontally-clipped-by-overflow +unambiguous: true +objective: true +--- + +A [node][] is Horizontally Clipped by Overflow if it has an [ancestor][] in the [flat tree][] with a [computed][] [overflow-x][] of `hidden` or `clip`, where changing the [overflow-x][] of all such [ancestors][ancestor] to `visible` would cause more of the [node][] to become [visible][]. + +#### Example of Vertically Clipped by Overflow + +This `img` element has an [ancestor][] `div` element with an `overflow-x` of `hidden`. The width of the `img` is greater than that of the [ancestor][] `div`, and so is clipped by the `overflow-x` property of the `div`. + +```html +
+ Partial W3C Logo +
+``` + +[visible]: #visible +[node]: https://dom.spec.whatwg.org/#node 'DOM node, as of 2019/02/14' +[ancestor]: https://dom.spec.whatwg.org/#concept-tree-ancestor 'DOM ancestor, as of 2019/02/14' +[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'CSS draft, flat tree, 2020/02/14' +[computed]: https://www.w3.org/TR/css-cascade-3/#computed-value +[overflow-x]: https://drafts.csswg.org/css-overflow/#overflow-properties diff --git a/pages/glossary/vertically-clipped-by-overflow.md b/pages/glossary/vertically-clipped-by-overflow.md new file mode 100755 index 0000000000..b8c4715062 --- /dev/null +++ b/pages/glossary/vertically-clipped-by-overflow.md @@ -0,0 +1,25 @@ +--- +title: Vertically Clipped by Overflow +key: vertically-clipped-by-overflow +unambiguous: true +objective: true +--- + +A [node][] is Vertically Clipped by Overflow if it has an [ancestor][] in the [flat tree][] with a [computed][] [overflow-y][] of `hidden` or `clip`, where changing the [overflow-y][] of all such [ancestors][ancestor] to `visible` would cause more of the [node][] to become [visible][]. + +#### Example of Vertically Clipped by Overflow + +This `img` element has an [ancestor][] `div` element with an `overflow-y` of `hidden`. The height of the `img` is greater than that of the [ancestor][] `div`, and so is clipped by the `overflow-y` property of the `div`. + +```html +
+ Partial W3C Logo +
+``` + +[visible]: #visible +[node]: https://dom.spec.whatwg.org/#node 'DOM node, as of 2019/02/14' +[ancestor]: https://dom.spec.whatwg.org/#concept-tree-ancestor 'DOM ancestor, as of 2019/02/14' +[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'CSS draft, flat tree, 2020/02/14' +[computed]: https://www.w3.org/TR/css-cascade-3/#computed-value +[overflow-y]: https://drafts.csswg.org/css-overflow/#overflow-properties From 4dc8f0ee33618960aff5b66392f75ed508c55a7d Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 31 Mar 2022 14:59:14 +0200 Subject: [PATCH 2/4] Split horizontal and vertical clipping --- .../zoom-text-no-overflow-clipping-59br37.md | 74 ++++++++++++++----- 1 file changed, 54 insertions(+), 20 deletions(-) diff --git a/_rules/zoom-text-no-overflow-clipping-59br37.md b/_rules/zoom-text-no-overflow-clipping-59br37.md index 47945e50e0..5f6d0b4385 100755 --- a/_rules/zoom-text-no-overflow-clipping-59br37.md +++ b/_rules/zoom-text-no-overflow-clipping-59br37.md @@ -33,13 +33,13 @@ This rule applies to any [text node][] for which all of the following is true wh **Note**: A [viewport size][] of 640 by 512 is equivalent to a [viewport size][] of 1280 by 1024 zoomed 200%. -## Expectation +## Expectation 1 -Each test target is not [clipped by overflow][clipped] of an [ancestor][] in the [flat tree][] when in a [viewport size][] of 640 by 512, except if the [clipping][clipped] [ancestor][] has at least one of the following: +Each test target is not [horizontally clipped by overflow][horizontally clipped] of an [ancestor][] in the [flat tree][] when in a [viewport size][] of 640 by 512, except if the [clipping][horizontally clipped] [ancestor][] has a [computed][] [white-space][] of `nowrap`, and a [computed][] [text-overflow][] that is not `clip` -- **text-overflow**: A [computed][] [white-space][] of `nowrap`, and a [computed][] [text-overflow][] that is not `clip`; or +## Expectation 2 -- **line wrapping**: A [used][] [line-height][] equal to or greater than the height of its [bounding box][], or in case of a [computed][] [overflow][] of `clip`, its [content box][]. +Each test target is not [vertically clipped by overflow][vertically clipped] of an [ancestor][] in the [flat tree][] when in a [viewport size][] of 640 by 512, except if the [clipping][vertically clipped] [ancestor][] has a [used][] [line-height][] equal to or greater than the height of its [bounding box][], or in case of a [computed][] [overflow-y][overflow] of `clip`, its [content box][]. ## Assumptions @@ -47,7 +47,7 @@ If any of the following assumptions is true, failing this rule may not result in - There is no other mechanism for resizing text available on the page, that can be used to resize text to 200% without loss of information or functionality. This includes font resizing in the browser, or a javascript mechanism of resizing in the page. -- [Text nodes][text node] can not be [clipped by overflow][clipped] without loss of information, except for [text nodes][text node] with an [ancestor][] with `aria-hidden` set to `true`, or when specific styles have been applied to ensure text is clipped cleanly (text-overflow, line wrapping or hidden text). +- [Text nodes][text node] can not be [horizontally][horizontally clipped] or [vertically clipped by overflow][vertically clipped] without loss of information, except for [text nodes][text node] with an [ancestor][] with `aria-hidden` set to `true`, or when specific styles have been applied to ensure text is clipped cleanly (text-overflow, line wrapping or hidden text). - While [success criterion 1.4.4 Resize text](https://www.w3.org/TR/WCAG21/#resize-text) does not explicitly mention which viewport size has to be resized up to 200%, it is assumed that a [viewport size][] of 1280 by 1024 is applicable. A 1280 by 1024 [viewport size][] is explicitly mentioned under [success criterion 1.4.10 Reflow](https://www.w3.org/TR/WCAG21/#reflow). @@ -85,7 +85,7 @@ This [text node][] is fully [visible][] at a [viewport size][] of 640 by 512. #### Passed Example 2 -This [text node][] is [clipped][] using `text-overflow: ellipsis` at a [viewport size][] of 640 by 512. A link to a full version of the poem is also provided. +This [text node][] is [horizontally clipped][] using `text-overflow: ellipsis` at a [viewport size][] of 640 by 512. A link to a full version of the poem is also provided. ```html
@@ -118,7 +118,7 @@ This [text node][] is restricted to a single line, by setting a `line-height` th #### Passed Example 4 -This [text node][] is not [clipped][] with `overflow: hidden` because it has a parent with `overflow: auto` at a [viewport size][] of 640 by 512. +This [text node][] is not [vertically clipped][] with `overflow: hidden` because it has a parent with `overflow: auto` at a [viewport size][] of 640 by 512. ```html
@@ -133,7 +133,7 @@ This [text node][] is not [clipped][] with `overflow: hidden` because it has a p #### Failed Example 1 -This [text node][] is [clipped][] because it has a fixed height that does not leave enough space for the content to wrap. +This [text node][] is [vertically clipped][] because it has a fixed height that does not leave enough space for the content to wrap. ```html
@@ -144,7 +144,7 @@ This [text node][] is [clipped][] because it has a fixed height that does not le #### Failed Example 2 -This [text node][] is [clipped][] because its height is relative to the viewport height, leaving insufficient space for the page to be zoomed to 200% at a [viewport size][] of 1280 by 1024. +This [text node][] is [vertically clipped][] because its height is relative to the viewport height, leaving insufficient space for the page to be zoomed to 200% at a [viewport size][] of 1280 by 1024. ```html
@@ -159,7 +159,7 @@ This [text node][] is [clipped][] because its height is relative to the viewport #### Failed Example 3 -This [text node][] is [clipped][] by style that is applied at a [viewport size][] width of 640. +This [text node][] is [vertically clipped][] by style that is applied at a [viewport size][] width of 640. ```html +
+ Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten + lore. While I nodded, nearly napping, suddenly there came a tapping. +
+``` + ### Inapplicable #### Inapplicable Example 1 @@ -238,20 +271,21 @@ This [text node][] with the text "Web Content Accessibility Guidelines 2.1" is f ``` [attribute value]: #attribute-value 'Definition of Attribute Value' -[clipped]: #clipped-by-overflow -[visible]: #visible -[viewport size]: #viewport-size -[parent]: https://dom.spec.whatwg.org/#concept-tree-parent 'DOM parent, as of 2020/02/14' [ancestor]: https://dom.spec.whatwg.org/#concept-tree-ancestor 'DOM ancestor, 2020/02/13' -[text node]: https://dom.spec.whatwg.org/#text +[bounding box]: https://www.w3.org/TR/css-ui-3/#valdef-box-sizing-border-box [computed]: https://www.w3.org/TR/css-cascade-3/#computed-value +[content box]: https://www.w3.org/TR/css-ui-3/#valdef-box-sizing-content-box [flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'CSS draft, flat tree, 2020/02/14' -[overflow]: https://www.w3.org/TR/CSS22/visufx.html#overflow +[html element]: #namespaced-element +[horizontally clipped]: #horizontally-clipped-by-overflow [line-height]: https://www.w3.org/TR/CSS22/visudet.html#propdef-line-height [line-height normal]: https://drafts.csswg.org/css2/#valdef-line-height-normal "CSS 2.2 (Editor's draft) - normal line-height" -[white-space]: https://www.w3.org/TR/CSS22/text.html#propdef-white-space +[overflow]: https://drafts.csswg.org/css-overflow/#overflow-properties +[parent]: https://dom.spec.whatwg.org/#concept-tree-parent 'DOM parent, as of 2020/02/14' +[text node]: https://dom.spec.whatwg.org/#text [text-overflow]: https://www.w3.org/TR/css-ui-3/#text-overflow -[bounding box]: https://www.w3.org/TR/css-ui-3/#valdef-box-sizing-border-box -[content box]: https://www.w3.org/TR/css-ui-3/#valdef-box-sizing-content-box [used]: https://www.w3.org/TR/css-cascade-4/#used 'CSS Cascading and Inheritance Level 4 (Working draft) - Used Values' -[html element]: #namespaced-element +[vertically clipped]: #vertically-clipped-by-overflow +[viewport size]: #viewport-size +[visible]: #visible +[white-space]: https://www.w3.org/TR/CSS22/text.html#propdef-white-space From 571dc7530fd0d542683b0664ba109dd68d208d48 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 7 Apr 2022 15:19:51 +0200 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Carlos Duarte --- _rules/zoom-text-no-overflow-clipping-59br37.md | 2 +- pages/glossary/horizontally-clipped-by-overflow.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/_rules/zoom-text-no-overflow-clipping-59br37.md b/_rules/zoom-text-no-overflow-clipping-59br37.md index 5f6d0b4385..7895235ade 100755 --- a/_rules/zoom-text-no-overflow-clipping-59br37.md +++ b/_rules/zoom-text-no-overflow-clipping-59br37.md @@ -192,7 +192,7 @@ This [text node][] is [vertically clipped][] at a [viewport size][] of 640 by 51 #### Failed Example 5 -This [text node][] is [vertically clipped][] at a [viewport size][] of 640 by 512. +This [text node][] is [horizontally clipped][] at a [viewport size][] of 640 by 512. ```html