content-visibility-svg-rect.html (1565B)
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 rect { 16 stroke-width: 5px; 17 stroke:green; 18 } 19 </style> 20 21 <div> 22 <svg xmlns="http://www.w3.org/2000/svg"> 23 <rect id="rect" x="5" y="5" width="10" height="10"/> 24 </svg> 25 </div> 26 27 <script> 28 test(() => { 29 const rectElement = document.getElementById('rect'); 30 const length = rectElement.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 rectElement = document.getElementById('rect'); 36 const point = rectElement.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 rectElement = document.getElementById('rect'); 43 const inFill = rectElement.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 rectElement = document.getElementById('rect'); 49 const inStroke = rectElement.isPointInStroke({ x: 7, y: 7}); 50 assert_true(inStroke, 'stroke'); 51 }, `isPointInStroke() should return true in a c-v:hidden subtree.`); 52 </script>