test_distance_of_basic_shape.html (3527B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <script src='/resources/testharness.js'></script> 4 <script src='/resources/testharnessreport.js'></script> 5 <script src='../testcommon.js'></script> 6 <div id='log'></div> 7 <script type='text/javascript'> 8 'use strict'; 9 10 // We don't have an official spec to define the distance between two basic 11 // shapes, but we still need this for DevTools, so Gecko and Servo backends use 12 // the similar rules to define the distance. If there is a spec for it, we have 13 // to update this test file. 14 // See https://github.com/w3c/csswg-drafts/issues/662. 15 16 test(function(t) { 17 var target = addDiv(t); 18 var dist = getDistance(target, 'clip-path', 'none', 'none'); 19 assert_equals(dist, 0, 'none and none'); 20 }, 'none and none'); 21 22 test(function(t) { 23 var target = addDiv(t); 24 var dist = getDistance(target, 'clip-path', 'circle(10px)', 'circle(20px)'); 25 assert_equals(dist, 10, 'circle(10px) and circle(20px)'); 26 }, 'circles'); 27 28 test(function(t) { 29 var target = addDiv(t); 30 var circle1 = 'circle(calc(10px + 10px) at 20px 10px)'; 31 var circle2 = 'circle(30px at 10px 10px)'; 32 var dist = getDistance(target, 'clip-path', circle1, circle2); 33 assert_equals(dist, 34 Math.sqrt(10 * 10 + 10 * 10), 35 circle1 + ' and ' + circle2); 36 }, 'circles with positions'); 37 38 test(function(t) { 39 var target = addDiv(t); 40 var ellipse1 = 'ellipse(20px calc(10px + 10px))'; 41 var ellipse2 = 'ellipse(30px 30px)'; 42 var dist = getDistance(target, 'clip-path', ellipse1, ellipse2); 43 assert_equals(dist, 44 Math.sqrt(10 * 10 + 10 * 10), 45 ellipse1 + ' and ' + ellipse2); 46 }, 'ellipses'); 47 48 test(function(t) { 49 var target = addDiv(t); 50 var polygon1 = 'polygon(50px 0px, 100px 50px, 50px 100px, 0px 50px)'; 51 var polygon2 = 'polygon(40px 0px, 100px 70px, 10px 100px, 0px 70px)'; 52 var dist = getDistance(target, 'clip-path', polygon1, polygon2); 53 assert_equals(dist, 54 Math.sqrt(10 * 10 + 20 * 20 + 40 * 40 + 20 * 20), 55 polygon1 + ' and ' + polygon2); 56 }, 'polygons'); 57 58 test(function(t) { 59 var target = addDiv(t); 60 var inset1 = 'inset(5px 5px 5px 5px round 40px 30px 20px 5px)'; 61 var inset2 = 'inset(10px 5px round 50px 60px)'; 62 var dist = getDistance(target, 'clip-path', inset1, inset2); 63 64 // if we have only two parameter in inset(), the first one means 65 // top and bottom edges, and the second one means left and right edges. 66 // and the definitions of inset is inset(top, right, bottom, left). Besides, 67 // the "round" part uses the shorthand of border radius for each corner, so 68 // each corner is a pair of (x, y). We are computing the distance between: 69 // 1. inset(5px 5px 5px 5px 70 // round (40px 40px) (30px 30px) (20px 20px) (5px 5px)) 71 // 2. inset(10px 5px 10px 5px 72 // round (50px 50px) (60px 60px) (50px 50px) (60px 60px)) 73 // That is why we need to multiply 2 for each border-radius corner. 74 assert_equals(dist, 75 Math.sqrt(5 * 5 + 5 * 5 + 76 (50 - 40) * (50 - 40) * 2 + 77 (60 - 30) * (60 - 30) * 2 + 78 (50 - 20) * (50 - 20) * 2 + 79 (60 - 5) * (60 - 5) * 2), 80 inset1 + ' and ' + inset2); 81 }, 'insets'); 82 83 test(function(t) { 84 var target = addDiv(t); 85 var dist = getDistance(target, 'clip-path', 86 'circle(20px)', 'ellipse(10px 20px)'); 87 assert_equals(dist, 0, 'circle(20px) and ellipse(10px 20px)'); 88 }, 'Mismatched basic shapes'); 89 90 </script> 91 </html>