offset-supports-calc.html (1687B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Motion Path Module Level 1: calc values</title> 6 <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> 7 <link rel="help" href="https://drafts.fxtf.org/motion-1/"> 8 <link rel="help" href="https://drafts.csswg.org/css-values-3/#calc-notation"> 9 <meta name="assert" content="calc values are supported in offset properties."> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <style> 13 #target { 14 font-size: 20px; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="target"></div> 20 <script> 21 'use strict'; 22 23 test(function(){ 24 target.style = 'offset-position: calc(30px + 20%) calc(-200px + 8em + 100%);'; 25 assert_equals(getComputedStyle(target).offsetPosition, 'calc(20% + 30px) calc(100% - 40px)'); 26 }, 'offset-position supports calc'); 27 28 test(function(){ 29 target.style = 'offset-path: ray(calc(1turn - 100grad) closest-side);'; 30 assert_equals(getComputedStyle(target).offsetPath, 'ray(270deg)'); 31 }, 'offset-path supports calc'); 32 33 test(function(){ 34 target.style = 'offset-distance: calc(-100px + 50%);'; 35 assert_equals(getComputedStyle(target).offsetDistance, 'calc(50% - 100px)'); 36 }, 'offset-distance supports calc'); 37 38 test(function(){ 39 target.style = 'offset-rotate: auto calc(1turn - 100grad);'; 40 assert_equals(getComputedStyle(target).offsetRotate, 'auto 270deg'); 41 }, 'offset-rotate supports calc'); 42 43 test(function(){ 44 target.style = 'offset-anchor: calc(30px + 20%) calc(-200px + 8em + 100%);'; 45 assert_equals(getComputedStyle(target).offsetAnchor, 'calc(20% + 30px) calc(100% - 40px)'); 46 }, 'offset-anchor supports calc'); 47 48 </script> 49 </body> 50 </html>