| 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 |