OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>CSS Snap Size: parsing snap-width</title> | 2 <title>CSS Snap Size: parsing snap-width</title> |
3 <link rel="author" title="Koji Ishii" href="kojiishi@gmail.com"> | 3 <link rel="author" title="Koji Ishii" href="kojiishi@gmail.com"> |
4 <link rel="help" href="https://drafts.csswg.org/css-snap-size/#snap-width"> | 4 <link rel="help" href="https://drafts.csswg.org/css-snap-size/#snap-width"> |
5 <meta name="assert" content="This test asserts the parsing and getComputedStyle
works correctly for the snap-width property."> | 5 <meta name="assert" content="This test asserts the parsing and getComputedStyle
works correctly for the snap-width property."> |
6 <meta name="flags" content="dom"> | 6 <meta name="flags" content="dom"> |
7 <script src="/resources/testharness.js"></script> | 7 <script src="/resources/testharness.js"></script> |
8 <script src="/resources/testharnessreport.js"></script> | 8 <script src="/resources/testharnessreport.js"></script> |
9 | 9 |
10 <div data-expected="0px" title="initial value"></div> | 10 <div data-expected="0px" title="initial value"></div> |
11 | 11 |
12 <div style="snap-width: 20px" data-expected="20px"> | 12 <div style="snap-width: 20px" data-expected="20px"> |
13 <div data-expected="0px" title="snap-width should not inherit"></div> | 13 <div data-expected="0px" title="snap-width should not inherit"></div> |
14 <div style="snap-width: inherit" data-expected="20px"></div> | 14 <div style="snap-width: inherit" data-expected="20px"></div> |
15 </div> | 15 </div> |
16 | 16 |
17 <div style="snap-width: 20px; snap-width: initial" data-expected="0px"></div> | 17 <div style="snap-width: 20px; snap-width: initial" data-expected="0px"></div> |
18 | 18 |
19 <!-- "0" is a valid length even without units --> | 19 <!-- "0" is a valid length even without units --> |
20 <div style="snap-width: 20px; snap-width: 0" data-expected="0px"></div> | 20 <div style="snap-width: 20px; snap-width: 0" data-expected="0px"></div> |
21 | 21 |
22 <!-- These are invalid and thus its preceding declarations should remain --> | 22 <!-- These are invalid and thus its preceding declarations should remain --> |
23 <div style="snap-width: 20px; snap-width: 1" data-expected="20px"></div> | 23 <div style="snap-width: 20px; snap-width: 1" data-expected="20px"></div> |
24 <div style="snap-width: 20px; snap-width: -1px" data-expected="20px"></div> | 24 <div style="snap-width: 20px; snap-width: -1px" data-expected="20px"></div> |
25 <div style="snap-width: 20px; snap-width: 10%" data-expected="20px"></div> | 25 <div style="snap-width: 20px; snap-width: 10%" data-expected="20px"></div> |
26 | 26 |
27 <div id="pt" style="snap-width: 40pt"></div> | 27 <div id="pt" style="snap-width: 40pt"></div> |
28 | 28 |
29 <script> | 29 <script> |
30 Array.prototype.forEach.call(document.querySelectorAll("[data-expected]"), funct
ion (element) { | 30 Array.prototype.forEach.call(document.querySelectorAll("[data-expected]"), funct
ion (element) { |
31 test(function () { | 31 test(function () { |
32 var actual = getComputedStyle(element).snapWidth; | 32 var actual = getComputedStyle(element).snapWidth; |
33 assert_equals(actual, element.dataset.expected); | 33 assert_equals(actual, element.dataset.expected); |
34 }, element.title || element.getAttribute("style")); | 34 }, element.title || element.getAttribute("style")); |
35 }); | 35 }); |
36 | 36 |
37 test(function () { | 37 test(function () { |
38 assert_equals(getComputedStyle(document.getElementById("pt")).snapWidth.slice(
-2), "px"); | 38 assert_equals(getComputedStyle(document.getElementById("pt")).snapWidth.slice(
-2), "px"); |
39 }, "Computed value must be the absolute length"); | 39 }, "Computed value must be the absolute length"); |
40 </script> | 40 </script> |
OLD | NEW |