content-visibility-svg-path.html (3563B)
1 <!DOCTYPE html> 2 <link rel="author" href="mailto:rbuis@igalia.com"> 3 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <style> 8 body { 9 margin: 0; 10 padding: 0; 11 } 12 div { 13 content-visibility:hidden; 14 } 15 path { 16 stroke-width: 5px; 17 stroke:green; 18 } 19 </style> 20 21 <div> 22 <svg xmlns="http://www.w3.org/2000/svg"> 23 <path id="path" d="M5 5 L 10 5 L 10 10 L 5 10 Z"/> 24 </svg> 25 </div> 26 27 <script> 28 test(() => { 29 const pathElement = document.getElementById('path'); 30 const length = pathElement.getTotalLength(); 31 assert_greater_than(length, 0, 'length'); 32 }, `getTotalLength() should return nonzero value in a c-v:hidden subtree.`); 33 34 test(() => { 35 const pathElement = document.getElementById('path'); 36 const point = pathElement.getPointAtLength(0); 37 assert_greater_than(point.x, 0, 'point.x'); 38 assert_greater_than(point.y, 0, 'point.y'); 39 }, `getPointAtLength() should return nonzero values in a c-v:hidden subtree.`); 40 41 test(() => { 42 const pathElement = document.getElementById('path'); 43 const inFill = pathElement.isPointInFill({ x: 7, y: 7}); 44 assert_true(inFill, 'fill'); 45 }, `isPointInFill() should return true in a c-v:hidden subtree.`); 46 47 test(() => { 48 const pathElement = document.getElementById('path'); 49 const inStroke = pathElement.isPointInStroke({ x: 7, y: 7}); 50 assert_true(inStroke, 'stroke'); 51 }, `isPointInStroke() should return true in a c-v:hidden subtree.`); 52 53 test(() => { 54 const pathElement = document.getElementById('path'); 55 var rect = pathElement.ownerSVGElement.createSVGRect(); 56 rect.x = 10; 57 rect.y = 10; 58 rect.width = 50; 59 rect.height = 50; 60 const intersection = pathElement.ownerSVGElement.checkIntersection(pathElement, rect); 61 assert_true(intersection, 'intersection'); 62 }, `checkIntersection() should return true in a c-v:hidden subtree.`); 63 64 test(() => { 65 const pathElement = document.getElementById('path'); 66 var rect = pathElement.ownerSVGElement.createSVGRect(); 67 rect.width = 50; 68 rect.height = 50; 69 const enclosed = pathElement.ownerSVGElement.checkEnclosure(pathElement, rect); 70 assert_true(enclosed, 'enclosure'); 71 }, `checkEnclosure() should return true in a c-v:hidden subtree.`); 72 73 test(() => { 74 const pathElement = document.getElementById('path'); 75 var rect = pathElement.ownerSVGElement.createSVGRect(); 76 rect.x = 10; 77 rect.y = 10; 78 rect.width = 50; 79 rect.height = 50; 80 const intersectionList = pathElement.ownerSVGElement.getIntersectionList(rect, null); 81 assert_greater_than(intersectionList.length, 0, 'intersection'); 82 }, `getIntersectionList() should return items in a c-v:hidden subtree.`); 83 84 test(() => { 85 const pathElement = document.getElementById('path'); 86 var rect = pathElement.ownerSVGElement.createSVGRect(); 87 rect.width = 50; 88 rect.height = 50; 89 const enclusureList = pathElement.ownerSVGElement.getEnclosureList(rect, null); 90 assert_greater_than(enclusureList.length, 0, 'intersection'); 91 }, `getEnclosureList() should return items in a c-v:hidden subtree.`); 92 93 test(() => { 94 const pathElement = document.getElementById('path'); 95 const bbox = pathElement.getBBox(); 96 assert_not_equals(bbox.x, 0, 'x'); 97 assert_not_equals(bbox.y, 0, 'y'); 98 assert_not_equals(bbox.width, 0, 'width'); 99 assert_not_equals(bbox.height, 0, 'height'); 100 }, `path getBBox() should return nonzero values in a c-v:hidden subtree.`); 101 </script>