tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

svg-computed-style.html (3501B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
      5 <link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script src="/css/support/computed-testcommon.js"></script>
      9 </head>
     10 <body>
     11 <svg id="svg">
     12  <rect id="target" width="200" height="100" x="10" y="10" rx="20" ry="20" fill="blue" />
     13 </svg>
     14 
     15 <script>
     16  const target = document.getElementById("target");
     17  const properties = {
     18    "border-spacing": {
     19      "value": "10px 20px",
     20      "otherValues": ["1px", "1px 2px"]
     21    },
     22    "border-width": {
     23      "value": "1px",
     24      "otherValues": ["5px 10px", "2px 4px 6px 8px"],
     25      "requiredProperties": { "border-style": "solid" }
     26    },
     27    "box-shadow": {
     28      "value": "rgb(0, 0, 0) 5px 5px 5px 0px",
     29      "otherValues": ["rgb(0, 0, 0) 10px 10px 10px 0px"]
     30    },
     31    "filter": {
     32      "value": "drop-shadow(rgb(0, 0, 0) 5px 5px 5px)",
     33      "otherValues": ["drop-shadow(rgb(0, 0, 0) 10px 10px 10px)"]
     34    },
     35    "height": {
     36      "value": "9px",
     37      "otherValues": ["18px"]
     38    },
     39    "inset": {
     40      "value": "2px 4px 6px 8px",
     41      "otherValues": ["-20px 40px 60px -80px"],
     42      "requiredProperties": { "position": "absolute" }
     43    },
     44    "line-height" : {
     45      "value": "7px",
     46      "otherValues": ["13px"]
     47    },
     48    "margin" : {
     49      "value": "-10px 20px 30px -40px",
     50      "otherValues": ["-20px 40px 60px -80px"]
     51    },
     52    "max-height" : {
     53      "value": "9px",
     54      "otherValues": ["18px"]
     55    },
     56    "max-width" : {
     57      "value": "9px",
     58      "otherValues": ["18px"]
     59    },
     60    "min-height" : {
     61      "value": "9px",
     62      "otherValues": ["18px"]
     63    },
     64    "min-width" : {
     65      "value": "9px",
     66      "otherValues": ["18px"]
     67    },
     68    "padding": {
     69      "value": "10px 20px 30px 40px",
     70      "otherValues": ["20px 40px 60px 80px"]
     71    },
     72    "text-decoration-thickness": {
     73      "value": "2px",
     74      "otherValues": ["4px"]
     75    },
     76    "text-shadow": {
     77      "value": "rgb(0, 0, 0) 5px 5px 0px",
     78      "otherValues": ["rgb(0, 0, 0) 10px 10px 0px"]
     79    },
     80    "text-underline-offset": {
     81      "value": "2px",
     82      "otherValues": ["4px"]
     83    },
     84    "-webkit-text-stroke-width": {
     85      "value": "2px",
     86      "otherValues": ["4px"]
     87    },
     88    "width": {
     89      "value": "9px",
     90      "otherValues": ["19px"]
     91    },
     92 
     93  };
     94 
     95  for (const [property, {value, otherValues, requiredProperties}] of Object.entries(properties)) {
     96    // setup
     97    if (requiredProperties) {
     98      for (const [prop, reqValue] of Object.entries(requiredProperties)) {
     99        svg.style[prop] = reqValue;
    100        target.style[prop] = reqValue;
    101      }
    102    }
    103 
    104    svg.style[property] = value;
    105 
    106    for (const otherValue of otherValues) {
    107      test_computed_value(property, otherValue, otherValue, "no zoom");
    108    }
    109    test_computed_value(property, "inherit", value, "no zoom");
    110 
    111    target.style.zoom = 2;
    112 
    113    for (const otherValue of otherValues) {
    114      test_computed_value(property, otherValue, otherValue, "zoom: 2");
    115    }
    116    test_computed_value(property, "inherit", value, "zoom: 2");
    117 
    118    // cleanup
    119    svg.style.removeProperty(property);
    120    target.style.removeProperty('zoom');
    121    if (requiredProperties) {
    122      for (const [prop, reqValue] of Object.entries(requiredProperties)) {
    123        svg.style.removeProperty(reqValue);
    124        target.style.removeProperty(reqValue);
    125      }
    126    }
    127  }
    128 </script>
    129 </body>
    130 </html>