tor-browser

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

css-var-dom-interface.html (4464B)

      1 <!DOCTYPE html>
      2 <title>SVGLength DOM interface with CSS variables</title>
      3 <link rel="author" title="Divyansh Mangal" href="mailto:dmangal@microsoft.com">
      4 <link rel="help" href="https://github.com/w3c/svgwg/issues/1038">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 
      8 <style>
      9  :root {
     10    --length-100px: 100px;
     11    --length-50: 50;
     12    --length-75percent: 75%;
     13    --invalid-length: not-a-length;
     14  }
     15 </style>
     16 
     17 <svg id="svg" width="200" height="200">
     18  <rect id="rect1-px" width="var(--length-100px)" height="50"/>
     19  <rect id="rect2-px" width="var(--length-100px)" height="50"/>
     20  <rect id="rect3-px" width="var(--length-100px)" height="50"/>
     21  <rect id="rect-number" width="var(--length-50)" height="50"/>
     22  <rect id="rect-percent" width="var(--length-75percent)" height="50"/>
     23  <rect id="rect-invalid" width="var(--invalid-length)" height="50"/>
     24  <rect id="rect-normal" width="100px" height="50"/>
     25 </svg>
     26 
     27 <script>
     28 test(() => {
     29  const rect = document.getElementById('rect1-px');
     30  const width = rect.width.baseVal;
     31 
     32  assert_equals(width.value, 0);
     33  assert_equals(width.valueInSpecifiedUnits, 0);
     34  assert_equals(width.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
     35 
     36 }, 'SVGLength DOM interface with CSS variable containing px unit');
     37 
     38 test(() => {
     39  const rect = document.getElementById('rect-number');
     40  const width = rect.width.baseVal;
     41 
     42  assert_equals(width.value, 0);
     43  assert_equals(width.valueInSpecifiedUnits, 0);
     44  assert_equals(width.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
     45 
     46 }, 'SVGLength DOM interface with CSS variable containing number');
     47 
     48 test(() => {
     49  const rect = document.getElementById('rect-percent');
     50  const width = rect.width.baseVal;
     51 
     52  assert_equals(width.value, 0);
     53  assert_equals(width.valueInSpecifiedUnits, 0);
     54  assert_equals(width.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
     55 
     56 }, 'SVGLength DOM interface with CSS variable containing percentage');
     57 
     58 test(() => {
     59  const rect = document.getElementById('rect-invalid');
     60  const width = rect.width.baseVal;
     61 
     62  assert_equals(width.value, 0);
     63  assert_equals(width.valueInSpecifiedUnits, 0);
     64  assert_equals(width.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
     65 
     66 }, 'SVGLength DOM interface with invalid CSS variable');
     67 
     68 test(() => {
     69  const rect = document.getElementById('rect1-px');
     70  const width = rect.width.baseVal;
     71 
     72  assert_equals(width.valueAsString, 'var(--length-100px)');
     73 
     74  // Setting value should work (converts to user units)
     75  width.value = 120;
     76  assert_equals(width.value, 120);
     77  assert_equals(width.unitType, SVGLength.SVG_LENGTHTYPE_NUMBER);
     78  assert_equals(width.valueAsString, '120');
     79 
     80 }, 'SVGLength DOM interface methods with CSS variables');
     81 
     82 test(() => {
     83  const rect = document.getElementById('rect2-px');
     84  const width = rect.width.baseVal;
     85 
     86  assert_equals(width.valueAsString, 'var(--length-100px)');
     87 
     88  assert_throws_dom("NotSupportedError", function() { width.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_CM); });
     89 
     90  assert_equals(width.valueAsString, 'var(--length-100px)');
     91  assert_equals(width.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
     92  assert_equals(width.value, 0);
     93 
     94 }, 'SVGLength.convertToSpecifiedUnits with CSS variables');
     95 
     96 test(() => {
     97  const rect = document.getElementById('rect3-px');
     98  const width = rect.width.baseVal;
     99 
    100  width.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_CM, 2.54);
    101  assert_equals(width.value, 96);
    102  assert_equals(width.unitType, SVGLength.SVG_LENGTHTYPE_CM);
    103  assert_equals(width.valueAsString, '2.54cm');
    104 
    105 }, 'SVGLength.newValueSpecifiedUnits with CSS variables');
    106 
    107 test(() => {
    108  const detachedSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    109  const detachedRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    110  detachedSvg.appendChild(detachedRect);
    111 
    112  detachedRect.setAttribute('width', 'var(--length-100px)');
    113 
    114  const width = detachedRect.width.baseVal;
    115 
    116  assert_equals(width.value, 0);
    117  assert_equals(width.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
    118 
    119 }, 'SVGLength should handle detached elements gracefully for CSS variables');
    120 
    121 test(() => {
    122  const svg = document.getElementById('svg');
    123  const new_length = svg.createSVGLength();
    124 
    125  new_length.valueAsString = 'var(--length-100px)';
    126 
    127  assert_equals(new_length.value, 0);
    128  assert_equals(new_length.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
    129 
    130 }, 'SVGLength should handle standalone lengths gracefully for CSS variables');
    131 </script>