tor-browser

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

at-custom-media-cssom.html (5109B)

      1 <!DOCTYPE html>
      2 <title>CSS Custom Media Queries: CSSOM</title>
      3 <link rel="help" href=https://drafts.csswg.org/mediaqueries-5/#custom-mq-cssom/>
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 
      7 <script>
      8 
      9 test(t => {
     10  let sheet = new CSSStyleSheet();
     11  sheet.replaceSync(`
     12    @custom-media --true true
     13  `);
     14  assert_equals(sheet.cssRules.length, 1);
     15  let customMediaRule = sheet.cssRules[0];
     16  assert_true(customMediaRule instanceof CSSCustomMediaRule);
     17  assert_equals(customMediaRule.name, '--true');
     18  assert_equals(customMediaRule.query, true);
     19 }, 'CSSCustomMediaRule true');
     20 
     21 test(t => {
     22  let sheet = new CSSStyleSheet();
     23  sheet.replaceSync(`
     24    @custom-media --false false
     25  `);
     26  assert_equals(sheet.cssRules.length, 1);
     27  let customMediaRule = sheet.cssRules[0];
     28  assert_true(customMediaRule instanceof CSSCustomMediaRule);
     29  assert_equals(customMediaRule.name, '--false');
     30  assert_equals(customMediaRule.query, false);
     31 }, 'CSSCustomMediaRule false');
     32 
     33 test(t => {
     34  let sheet = new CSSStyleSheet();
     35  sheet.replaceSync(`
     36    @custom-media --empty
     37  `);
     38  assert_equals(sheet.cssRules.length, 1);
     39  let customMediaRule = sheet.cssRules[0];
     40  assert_true(customMediaRule instanceof CSSCustomMediaRule);
     41  assert_equals(customMediaRule.name, '--empty');
     42  assert_not_equals(typeof customMediaRule.query, "boolean");
     43  assert_equals(customMediaRule.query.length, 0);
     44 }, 'CSSCustomMediaRule empty');
     45 
     46 test(t => {
     47  let sheet = new CSSStyleSheet();
     48  sheet.replaceSync(`
     49    @custom-media --query (color) and (--query)
     50  `);
     51  assert_equals(sheet.cssRules.length, 1);
     52  let customMediaRule = sheet.cssRules[0];
     53  assert_true(customMediaRule instanceof CSSCustomMediaRule);
     54  assert_equals(customMediaRule.name, '--query');
     55  assert_equals(customMediaRule.query.length, 1);
     56  assert_equals(customMediaRule.query.mediaText, '(color) and (--query)');
     57 }, 'CSSCustomMediaRule cycle');
     58 
     59 test(t => {
     60  let sheet = new CSSStyleSheet();
     61  sheet.replaceSync(`
     62    @custom-media --query (hover) and (width > 1024px)
     63  `);
     64  assert_equals(sheet.cssRules.length, 1);
     65  let customMediaRule = sheet.cssRules[0];
     66  assert_true(customMediaRule instanceof CSSCustomMediaRule);
     67  assert_equals(customMediaRule.name, '--query');
     68  assert_equals(customMediaRule.query.length, 1);
     69  assert_equals(customMediaRule.query.mediaText, '(hover) and (width > 1024px)');
     70 }, 'CSSCustomMediaRule simple');
     71 
     72 test(t => {
     73  let sheet = new CSSStyleSheet();
     74  sheet.replaceSync(`
     75    @custom-media --query (color), (hover)
     76  `);
     77  assert_equals(sheet.cssRules.length, 1);
     78  let customMediaRule = sheet.cssRules[0];
     79  assert_true(customMediaRule instanceof CSSCustomMediaRule);
     80  assert_equals(customMediaRule.name, '--query');
     81  assert_equals(customMediaRule.query.length, 2);
     82  assert_equals(customMediaRule.query.mediaText, '(color), (hover)');
     83 }, 'CSSCustomMediaRule multiple media queries');
     84 
     85 test(t => {
     86  let sheet = new CSSStyleSheet();
     87  sheet.replaceSync(`
     88    @custom-media --true (color), (hover)
     89  `);
     90  assert_equals(sheet.cssRules.length, 1);
     91  let customMediaRule = sheet.cssRules[0];
     92  assert_true(customMediaRule instanceof CSSCustomMediaRule);
     93  assert_equals(customMediaRule.query.length, 2);
     94  assert_equals(customMediaRule.query.mediaText, '(color), (hover)');
     95  customMediaRule.query.mediaText = '(min-width: 100px)';
     96  assert_equals(customMediaRule.query.length, 1);
     97  assert_equals(customMediaRule.query.mediaText, '(min-width: 100px)');
     98 }, 'CSSCustomMediaRule change mediaText');
     99 
    100 test(t => {
    101  let sheet = new CSSStyleSheet();
    102  sheet.replaceSync(`
    103    @custom-media --true (color)
    104  `);
    105  assert_equals(sheet.cssRules.length, 1);
    106  let customMediaRule = sheet.cssRules[0];
    107  assert_true(customMediaRule instanceof CSSCustomMediaRule);
    108  assert_equals(customMediaRule.query.length, 1);
    109  assert_equals(customMediaRule.query.mediaText, '(color)');
    110  customMediaRule.query.appendMedium('(hover)');
    111  assert_equals(customMediaRule.query.length, 2);
    112  assert_equals(customMediaRule.query.mediaText, '(color), (hover)');
    113 }, 'CSSCustomMediaRule appendMedium');
    114 
    115 test(t => {
    116  let sheet = new CSSStyleSheet();
    117  sheet.replaceSync(`
    118    @custom-media --true (color), (hover)
    119  `);
    120  assert_equals(sheet.cssRules.length, 1);
    121  let customMediaRule = sheet.cssRules[0];
    122  assert_true(customMediaRule instanceof CSSCustomMediaRule);
    123  assert_equals(customMediaRule.query.length, 2);
    124  assert_equals(customMediaRule.query.mediaText, '(color), (hover)');
    125  customMediaRule.query.deleteMedium('(hover)');
    126  assert_equals(customMediaRule.query.length, 1);
    127  assert_equals(customMediaRule.query.mediaText, '(color)');
    128 }, 'CSSCustomMediaRule deleteMedium');
    129 
    130 test(t => {
    131  let sheet = new CSSStyleSheet();
    132  sheet.replaceSync(`
    133    @custom-media --true (color)
    134  `);
    135  assert_equals(sheet.cssRules.length, 1);
    136  let customMediaRule = sheet.cssRules[0];
    137  assert_true(customMediaRule instanceof CSSCustomMediaRule);
    138  assert_equals(customMediaRule.query.item(0), '(color)');
    139  assert_equals(customMediaRule.query.item(1), null);
    140 }, 'CSSCustomMediaRule item');
    141 
    142 </script>