diff --git a/_rules/meta-viewport-b4f0c3.md b/_rules/meta-viewport-b4f0c3.md index d74823560f5..38cabbbfdad 100755 --- a/_rules/meta-viewport-b4f0c3.md +++ b/_rules/meta-viewport-b4f0c3.md @@ -22,11 +22,14 @@ acknowledgments: ## Applicability -This rule applies to each `content` attribute on a `meta` element with a `name` [attribute value][] of `viewport`. +This rule applies to each `content` attribute on a `meta` element with a `name` [attribute value][] of `viewport` for which at least one of the following is true: + +- the `content` [attribute value][] has the `user-scalable` property; or +- the `content` [attribute value][] has the `maximum-scale` property. ## Expectation 1 -For each test target, the [attribute value][] does hot have a `user-scalable` property with a value of `no`. +For each test target, the [attribute value][] does not have a `user-scalable` property with a value of `no`. ## Expectation 2 @@ -61,13 +64,13 @@ This rule is designed specifically for [1.4.4 Resize text][sc144], which require #### Passed Example 1 -This viewport `meta` element does not prevent user scaling because it does not specify the `maximum-scale` and `user-scalable` values. +This viewport `meta` element does not prevent user scaling because it has `user-scalable` set to `yes`. ```html Simple page showing random text - +

@@ -79,13 +82,13 @@ This viewport `meta` element does not prevent user scaling because it does not s #### Passed Example 2 -This viewport `meta` element does not prevent user scaling because it has `user-scalable` set to `yes`. +This viewport `meta` element allows users to scale content up to 200% because it has `maximum-scale` set to 2.0. ```html Simple page showing random text - +

@@ -97,13 +100,13 @@ This viewport `meta` element does not prevent user scaling because it has `user- #### Passed Example 3 -This viewport `meta` element allows users to scale content up to 600% because it has `maximum-scale` set to 6.0. +This viewport `meta` element does not prevent user scaling because it has `maximum-scale` set to -1 which results in this value being dropped. ```html Simple page showing random text - +

@@ -113,15 +116,17 @@ This viewport `meta` element allows users to scale content up to 600% because it ``` -#### Passed Example 4 +### Failed + +#### Failed Example 1 -This viewport `meta` element does not prevent user scaling because it does not specify the `maximum-scale` and `user-scalable` values. +This viewport `meta` element prevents user scaling because it has `user-scalable` set to `no`. ```html Simple page showing random text - +

@@ -131,15 +136,15 @@ This viewport `meta` element does not prevent user scaling because it does not s ``` -#### Passed Example 5 +#### Failed Example 2 -This viewport `meta` element does not prevent user scaling because it has `maximum-scale` set to -1 which results in this value being dropped. +This viewport `meta` element prevents users to scale content up to 200% because it has `maximum-scale` set to 1.5. ```html Simple page showing random text - +

@@ -149,17 +154,15 @@ This viewport `meta` element does not prevent user scaling because it has `maxim ``` -### Failed - -#### Failed Example 1 +#### Failed Example 3 -This viewport `meta` element prevents user scaling because it has `user-scalable` set to `no`. +This viewport `meta` element prevents users to scale content up to 200% because it has `maximum-scale` set to 1.0. ```html Simple page showing random text - +

@@ -169,15 +172,15 @@ This viewport `meta` element prevents user scaling because it has `user-scalable ``` -#### Failed Example 2 +#### Failed Example 4 -This viewport `meta` element prevents users to scale content up to 200% because it has `maximum-scale` set to 1.5. +This viewport `meta` element prevents users to scale content up to 200% because it has `maximum-scale` set to `yes` which translates to 1.0. ```html Simple page showing random text - +

@@ -187,15 +190,17 @@ This viewport `meta` element prevents users to scale content up to 200% because ``` -#### Failed Example 3 +### Inapplicable -This viewport `meta` element prevents users to scale content up to 200% because it has `maximum-scale` set to 1.0. +#### Inapplicable Example 1 + +There is no viewport `meta` element. ```html - Simple page showing random text - + Lorem ipsum +

@@ -205,15 +210,15 @@ This viewport `meta` element prevents users to scale content up to 200% because ``` -#### Failed Example 4 +#### Inapplicable Example 2 -This viewport `meta` element prevents users to scale content up to 200% because it has `maximum-scale` set to `yes` which translates to 1.0. +This viewport `meta` element does not have a `content` attribute. ```html Simple page showing random text - +

@@ -223,17 +228,15 @@ This viewport `meta` element prevents users to scale content up to 200% because ``` -### Inapplicable - -#### Inapplicable Example 1 +#### Inapplicable Example 3 -There is no viewport `meta` element. +This viewport `meta` element does not specify the `maximum-scale` nor `user-scalable` values. ```html - Lorem ipsum - + Simple page showing random text +

@@ -243,15 +246,15 @@ There is no viewport `meta` element. ``` -#### Inapplicable Example 2 +#### Inapplicable Example 4 -This viewport `meta` element does not have a `content` attribute. +This viewport `meta` element does not prevent user scaling because it does not specify the `maximum-scale` nor `user-scalable` values. ```html Simple page showing random text - +