"Zoomed text node is not clipped with CSS overflow" [59br37]: split horizontal and vertical checks (#1823)

* Split definition of clipped by overflow
* Split horizontal and vertical clipping

Co-authored-by: Carlos Duarte <carlosapaduarte@gmail.com>
Co-authored-by: Trevor R. Bostic <32486143+tbostic32@users.noreply.github.com>

Author: 3 people

_rules/zoom-text-no-overflow-clipping-59br37.md

@@ -33,21 +33,21 @@ 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
 
 If any of the following assumptions is true, failing this rule may not result in a failure of [success criterion 1.4.4 Resize text](https://www.w3.org/TR/WCAG21/#resize-text):
 
 - 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
 <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px;">
@@ -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
 <div style="overflow: hidden; height: 2em; font-size: 16px;">
@@ -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
 <div style="overflow: hidden; height: 1.5em; font-size: 16px;">
@@ -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
 <div style="overflow: hidden; height: 16vh; font-size: 16px;">
@@ -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
 <style>
@@ -179,6 +179,39 @@ This [text node][] is [clipped][] by style that is applied at a [viewport size][
 </div>
 ```
 
+#### Failed Example 4
+
+This [text node][] is [vertically clipped][] at a [viewport size][] of 640 by 512.
+
+```html
+<div style="overflow-y: hidden; height: 10px; white-space: nowrap; text-overflow: ellipsis; font-size: 16px;">
+	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.
+</div>
+```
+
+#### Failed Example 5
+
+This [text node][] is [horizontally clipped][] at a [viewport size][] of 640 by 512.
+
+```html
+<style>
+	.wordClip {
+		overflow-x: hidden;
+		white-space: nowrap;
+		text-overflow: clip;
+		width: 50px;
+		height: 16px;
+		line-height: 16px;
+		font-size: 16px;
+	}
+</style>
+<div class="wordClip">
+	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.
+</div>
+```
+
 ### 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

pages/glossary/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 <dfn>Horizontally Clipped by Overflow</dfn> 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 Horizontally 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
+<div style="width: 100px; overflow-x: hidden;">
+	<img src="/test-assets/shared/w3c-logo.png" width="150" alt="Partial W3C Logo" />
+</div>
+```
+
+[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

pages/glossary/horizontally-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 <dfn>Vertically Clipped by Overflow</dfn> 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
+<div style="height: 100px; overflow-y: hidden;">
+	<img src="/test-assets/shared/w3c-logo.png" height="150" alt="Partial W3C Logo" />
+</div>
+```
+
+[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