|
1 | 1 | <!DOCTYPE html>
|
| 2 | +<meta name="viewport" content="width=device-width, initial-scale=1"> |
2 | 3 | <link rel="help" href="https://drafts.csswg.org/css-values-5/#container-progress-func">
|
3 | 4 | <link rel=" author" title=" [email protected]" >
|
4 | 5 | <script src="/resources/testharness.js"></script>
|
|
15 | 16 | <style>
|
16 | 17 | :root {
|
17 | 18 | font-size: 10px;
|
| 19 | + width: 100vw; |
| 20 | + height: 100vh; |
18 | 21 | }
|
19 | 22 | #out-of-scope-container {
|
20 | 23 | container: my-container-3 / size;
|
|
42 | 45 | </style>
|
43 | 46 | <script>
|
44 | 47 |
|
45 |
| -let width = window.innerWidth; |
46 |
| -let height = window.innerHeight; |
| 48 | +// innerWidth and innerHeight have lossy precision, see |
| 49 | +// https://github.com/w3c/csswg-drafts/issues/5260. |
| 50 | +let { width, height } = document.documentElement.getBoundingClientRect(); |
47 | 51 |
|
48 | 52 | let extraWidth = 5051;
|
49 | 53 | let extraHeight = 1337;
|
|
68 | 72 | test_math_used('calc(container-progress(height of my-container from 10px to sign(50px - 500em) * 10px))', (outerHeight - 10) / (-10 - 10), {type:'number'});
|
69 | 73 |
|
70 | 74 | // Fallback
|
71 |
| -test_math_used('container-progress(width of non-existing-container from 0px to 1px)', width, {type:'number'}); |
72 |
| -test_math_used('container-progress(height of non-existing-container from 0px to 1px)', height, {type:'number'}); |
73 |
| -test_math_used('container-progress(width of out-of-scope-container from 0px to 1px)', width, {type:'number'}); |
74 |
| -test_math_used('container-progress(height of out-of-scope-container from 0px to 1px)', height, {type:'number'}); |
| 75 | +test_math_used('container-progress(width of non-existing-container from 0px to 1px)', width, {type:'number', msg: 'container-progress() width fallback for non-existing container name'}); |
| 76 | +test_math_used('container-progress(height of non-existing-container from 0px to 1px)', height, {type:'number', msg: 'container-progress() height fallback for non-existing container names'}); |
| 77 | +test_math_used('container-progress(width of out-of-scope-container from 0px to 1px)', width, {type:'number', msg: 'container-progress() width fallback for out of scope container'}); |
| 78 | +test_math_used('container-progress(height of out-of-scope-container from 0px to 1px)', height, {type:'number', msg: 'container-progress() height fallback for out of scope container'}); |
75 | 79 |
|
76 | 80 | // Type checking
|
77 | 81 | test_math_used('calc(container-progress(width from 0px to 1px) * 1px)', innerWidth + 'px');
|
|
0 commit comments