Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use syntaxExamples method in wpt

Best JavaScript code snippet using wpt

testsuite.js

Source:testsuite.js

1function assert_is_unit(unit, result) {2  assert_class_string(result, 'CSSUnitValue',3    'relative lengths must compute to a CSSUnitValue');4  assert_equals(result.unit, unit, 'unit');5}6function assert_is_calc_sum(result) {7  assert_class_string(result, 'CSSMathSum',8    'specified calc must be a CSSMathSum');9}10function assert_is_equal_with_range_handling(input, result) {11  if (input instanceof CSSUnitValue && input.value < 0)12    assert_style_value_equals(result, new CSSMathSum(input));13  else14    assert_style_value_equals(result, input);15}16function assert_is_unsupported(result) {17  assert_class_string(result, 'CSSStyleValue');18}19const gCssWideKeywordsExamples = [20  {21    description: 'initial keyword',22    input: new CSSKeywordValue('initial')23  },24  {25    description: 'inherit keyword',26    input: new CSSKeywordValue('initial')27  },28  {29    description: 'unset keyword',30    input: new CSSKeywordValue('initial')31  },32];33const gVarReferenceExamples = [34  {35    description: 'a var() reference',36    input: new CSSUnparsedValue([' ', new CSSVariableReferenceValue('--A')])37  },38];39const gTestSyntaxExamples = {40  '<length>': {41    description: 'a length',42    examples: [43      {44        description: "zero px",45        input: new CSSUnitValue(0, 'px')46      },47      {48        description: "a negative em",49        input: new CSSUnitValue(-3.14, 'em'),50        // 'ems' are relative units, so just check that it computes to px51        defaultComputed: (_, result) => assert_is_unit('px', result)52      },53      {54        description: "a positive cm",55        input: new CSSUnitValue(3.14, 'cm'),56        // 'cms' are relative units, so just check that it computes to px57        defaultComputed: (_, result) => assert_is_unit('px', result)58      },59      {60        description: "a calc length",61        input: new CSSMathSum(new CSSUnitValue(0, 'px'), new CSSUnitValue(0, 'em')),62        // Specified/computed calcs are usually simplified.63        // FIXME: Test this properly64        defaultSpecified: (_, result) => assert_is_calc_sum(result),65        defaultComputed: (_, result) => assert_is_unit('px', result)66      }67    ],68  },69  '<percentage>': {70    description: 'a percent',71    examples: [72      {73        description: "zero percent",74        input: new CSSUnitValue(0, 'percent')75      },76      {77        description: "a negative percent",78        input: new CSSUnitValue(-3.14, 'percent')79      },80      {81        description: "a positive percent",82        input: new CSSUnitValue(3.14, 'percent')83      },84      {85        description: "a calc percent",86        input: new CSSMathSum(new CSSUnitValue(0, 'percent'), new CSSUnitValue(0, 'percent')),87        // Specified/computed calcs are usually simplified.88        // FIXME: Test this properly89        defaultSpecified: (_, result) => assert_is_calc_sum(result),90        defaultComputed: (_, result) => assert_is_unit('percent', result)91      }92    ],93  },94  '<time>': {95    description: 'a time',96    examples: [97      {98        description: "zero seconds",99        input: new CSSUnitValue(0, 's')100      },101      {102        description: "negative milliseconds",103        input: new CSSUnitValue(-3.14, 'ms'),104        // Computed values use canonical units105        defaultComputed: (_, result) => assert_style_value_equals(result, new CSSUnitValue(-0.00314, 's'))106      },107      {108        description: "positive seconds",109        input: new CSSUnitValue(3.14, 's')110      },111      {112        description: "a calc time",113        input: new CSSMathSum(new CSSUnitValue(0, 's'), new CSSUnitValue(0, 'ms')),114        // Specified/computed calcs are usually simplified.115        // FIXME: Test this properly116        defaultSpecified: (_, result) => assert_is_calc_sum(result),117        defaultComputed: (_, result) => assert_is_unit('s', result)118      }119    ],120  },121  '<flex>': {122    description: 'a flexible length',123    examples: [124      {125        description: "zero fractions",126        input: new CSSUnitValue(0, 'fr')127      },128      {129        description: "one fraction",130        input: new CSSUnitValue(0, 'fr')131      },132      {133        description: "negative fraction",134        input: new CSSUnitValue(-3.14, 'fr')135      },136      // TODO(https://github.com/w3c/css-houdini-drafts/issues/734):137      // Add calc tests involving 'fr' when that is spec'd in CSS.138    ],139  },140  '<number>': {141    description: 'a number',142    examples: [143      {144        description: 'the number zero',145        input: new CSSUnitValue(0, 'number')146      },147      {148        description: 'a negative number',149        input: new CSSUnitValue(-3.14, 'number')150      },151      {152        description: 'a positive number',153        input: new CSSUnitValue(3.14, 'number')154      },155      {156        description: "a calc number",157        input: new CSSMathSum(new CSSUnitValue(2, 'number'), new CSSUnitValue(3, 'number')),158        defaultSpecified: (_, result) => assert_is_calc_sum(result),159        defaultComputed: (_, result) => {160          assert_style_value_equals(result, new CSSUnitValue(5, 'number'));161        }162      }163    ],164  },165  '<position>': {166    description: 'a position',167    examples: [168      {169        decription: "origin position",170        input: new CSSPositionValue(new CSSUnitValue(0, 'px'), new CSSUnitValue(0, 'px'))171      }172    ],173  },174  '<url>': {175    description: 'a URL',176    examples: [177      // TODO(https://github.com/w3c/css-houdini-drafts/issues/716):178      // We can't test this until CSSURLValue is spec'd.179    ],180  },181  '<transform>': {182    description: 'a transform',183    examples: [184      {185        description: 'a transform containing percents',186        input: new CSSTransformValue([187          new CSSTranslate(188            new CSSUnitValue(50, 'percent'),189            new CSSUnitValue(50, 'percent'),190          )191        ]),192      },193      {194        description: 'a transform containing relative values',195        input: new CSSTransformValue([196          new CSSPerspective(new CSSUnitValue(10, 'em'))197        ]),198        defaultComputed: (_, result) => {199          // Relative units compute to absolute.200          assert_class_string(result, 'CSSTransformValue',201            'Result must be a CSSTransformValue');202          assert_class_string(result[0], 'CSSPerspective',203            'First component must be a CSSTransformValue');204          assert_is_unit('px', result[0].length);205        }206      },207      {208        description: 'a transform containing all the transform components',209        input: new CSSTransformValue([210          new CSSTranslate(211            new CSSUnitValue(0, 'px'),212            new CSSUnitValue(1, 'px'),213            new CSSUnitValue(2, 'px'),214          ),215          new CSSTranslate(216            new CSSUnitValue(0, 'px'),217            new CSSUnitValue(1, 'px'),218          ),219          new CSSRotate(1, 2, 3, new CSSUnitValue(45, 'deg')),220          new CSSRotate(new CSSUnitValue(45, 'deg')),221          new CSSScale(1, 2, 3),222          new CSSScale(1, 2),223          new CSSSkew(new CSSUnitValue(1, 'deg'), new CSSUnitValue(1, 'deg')),224          new CSSSkewX(new CSSUnitValue(1, 'deg')),225          new CSSSkewY(new CSSUnitValue(45, 'deg')),226          new CSSPerspective(new CSSUnitValue(1, 'px')),227          new CSSMatrixComponent(new DOMMatrixReadOnly(228            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16])229          ),230          new CSSMatrixComponent(new DOMMatrixReadOnly([1, 2, 3, 4, 5, 6])),231        ]),232      }233    ],234  },235};236// Test setting a value in a style map and then getting it from the inline and237// computed styles.238function testPropertyValid(propertyName, examples, specified, computed, description) {239  test(t => {240    let element = createDivWithStyle(t);241    for (const example of examples) {242      element.attributeStyleMap.set(propertyName, example.input);243      // specified style244      const specifiedResult = element.attributeStyleMap.get(propertyName);245      assert_not_equals(specifiedResult, null,246        'Specified value must not be null');247      assert_true(specifiedResult instanceof CSSStyleValue,248        'Specified value must be a CSSStyleValue');249      if (specified || example.defaultSpecified) {250        (specified || example.defaultSpecified)(example.input, specifiedResult);251      } else {252        assert_style_value_equals(specifiedResult, example.input,253          `Setting ${example.description} and getting its specified value`);254      }255      // computed style256      const computedResult = element.computedStyleMap().get(propertyName);257      assert_not_equals(computedResult, null,258        'Computed value must not be null');259      assert_true(computedResult instanceof CSSStyleValue,260        'Computed value must be a CSSStyleValue');261      if (computed || example.defaultComputed) {262        (computed || example.defaultComputed)(example.input, computedResult);263      } else {264        assert_style_value_equals(computedResult, example.input,265          `Setting ${example.description} and getting its computed value`);266      }267    }268  }, `Can set '${propertyName}' to ${description}`);269}270// We have to special case CSSImageValue as they cannot be created with a271// constructor and are completely opaque.272function testIsImageValidForProperty(propertyName) {273  test(t => {274    let element1 = createDivWithStyle(t, `${propertyName}: url("/media/1x1-green.png")`);275    let element2 = createDivWithStyle(t);276    const result = element1.attributeStyleMap.get(propertyName);277    assert_not_equals(result, null, 'Image value must not be null');278    assert_class_string(result, 'CSSImageValue',279      'Image value must be a CSSImageValue');280    element2.attributeStyleMap.set(propertyName, result);281    assert_equals(element2.style[propertyName], element1.style[propertyName],282      'Image value can be set on different element');283  }, `Can set '${propertyName}' to an image`);284}285// Test that styleMap.set throws for invalid values286function testPropertyInvalid(propertyName, examples, description) {287  test(t => {288    let styleMap = createInlineStyleMap(t);289    for (const example of examples) {290      assert_throws(new TypeError(), () => styleMap.set(propertyName, example.input));291    }292  }, `Setting '${propertyName}' to ${description} throws TypeError`);293}294// Test that styleMap.get/.set roundtrips correctly for unsupported values.295function testUnsupportedValue(propertyName, cssText) {296  test(t => {297    let element1 = createDivWithStyle(t);298    let element2 = createDivWithStyle(t);299    element1.style[propertyName] = cssText;300    const result = element1.attributeStyleMap.get(propertyName);301    assert_not_equals(result, null,302      'Unsupported value must not be null');303    assert_class_string(result, 'CSSStyleValue',304      'Unsupported value must be a CSSStyleValue and not one of its subclasses');305    element2.attributeStyleMap.set(propertyName, result);306    assert_equals(element2.style[propertyName], element1.style[propertyName],307      'Unsupported value can be set on different element');308  }, `'${propertyName}' does not supported '${cssText}'`);309}310function createKeywordExample(keyword) {311  return {312    description: `the '${keyword}' keyword`,313    examples: [ { input: new CSSKeywordValue(keyword) } ]314  };315}316// Run a battery of StylePropertyMap tests on |propertyName|.317// Second argument is a list of test cases. A test case has the form:318//319// {320//   syntax: "<length>",321//   specified: /* a callback */ (optional)322//   computed: /* a callback */ (optional)323// }324//325// If a callback is passed to |specified|, then the callback will be passed326// two arguments:327// 1. The input test case328// 2. The result of calling get() on the inline style map (specified values).329//330// The callback should check if the result is expected using assert_* functions.331// If no callback is passed, then we assert that the result is the same as332// the input.333//334// Same goes for |computed|, but with the computed style map (computed values).335//336// FIXME: The reason we pass argument #2 is that it's sometimes difficult to337// compute exactly what the expected result should be (e.g. browser-specific338// values). Once we can do that, we can remove argument #2 and just return339// the expected result.340function runPropertyTests(propertyName, testCases) {341  let syntaxTested = new Set();342  // Every property should at least support CSS-wide keywords.343  testPropertyValid(propertyName,344    gCssWideKeywordsExamples,345    null, // should be as specified346    () => {}, // could be anything347    'CSS-wide keywords');348  // Every property should support values containing var() references.349  testPropertyValid(propertyName,350    gVarReferenceExamples,351    null, // should be as specified352    () => {}, // could compute to anything353    'var() references');354  for (const testCase of testCases) {355    // <image> is a special case356    if (testCase.syntax === '<image>') {357      testIsImageValidForProperty(propertyName);358      continue;359    }360    // Retrieve test examples for this test case's syntax. If the syntax361    // looks like a keyword, then create an example on the fly.362    const syntaxExamples = testCase.syntax.toLowerCase().match(/^[a-z\-]+$/) ?363      createKeywordExample(testCase.syntax) :364      gTestSyntaxExamples[testCase.syntax];365    if (!syntaxExamples)366      throw new Error(`'${testCase.syntax}' is not a valid CSS component`);367    testPropertyValid(propertyName,368      syntaxExamples.examples,369      testCase.specified,370      testCase.computed,371      syntaxExamples.description);372    syntaxTested.add(testCase.syntax);373  }374  // Also test that styleMap.set rejects invalid CSSStyleValues.375  for (const [syntax, syntaxExamples] of Object.entries(gTestSyntaxExamples)) {376    if (!syntaxTested.has(syntax)) {377      testPropertyInvalid(propertyName,378        syntaxExamples.examples,379        syntaxExamples.description);380    }381  }382}383// Same as runPropertyTests but for list-valued properties.384function runListValuedPropertyTests(propertyName, testCases) {385  // TODO(https://crbug.com/545318): Run list-valued tests as well.386  runPropertyTests(propertyName, testCases);387}388// Check that |propertyName| doesn't "support" examples in |testExamples|.389// |testExamples| is a list of CSS string values. An "unsupported" value390// doesn't have a corresponding Typed OM representation. It normalizes as391// the base CSSStyleValue.392function runUnsupportedPropertyTests(propertyName, testExamples) {393  for (const cssText of testExamples) {394    testUnsupportedValue(propertyName, cssText);395  }...

Using AI Code Generation

1var wptools = require('wptools');2var syntaxExamples = wptools.syntaxExamples();3console.log(syntaxExamples);4var wptools = require('wptools');5var syntaxExamples = wptools.syntaxExamples();6console.log(syntaxExamples);7var wptools = require('wptools');8var syntaxExamples = wptools.syntaxExamples();9console.log(syntaxExamples);10var wptools = require('wptools');11var syntaxExamples = wptools.syntaxExamples();12console.log(syntaxExamples);13var wptools = require('wptools');14var syntaxExamples = wptools.syntaxExamples();15console.log(syntaxExamples);16var wptools = require('wptools');17var syntaxExamples = wptools.syntaxExamples();18console.log(syntaxExamples);19var wptools = require('wptools');20var syntaxExamples = wptools.syntaxExamples();21console.log(syntaxExamples);22var wptools = require('wptools');23var syntaxExamples = wptools.syntaxExamples();24console.log(syntaxExamples);25var wptools = require('wptools');26var syntaxExamples = wptools.syntaxExamples();27console.log(syntaxExamples);28var wptools = require('wptools');29var syntaxExamples = wptools.syntaxExamples();30console.log(syntaxExamples);31var wptools = require('wptools');32var syntaxExamples = wptools.syntaxExamples();33console.log(syntaxExamples);

Using AI Code Generation

1const wpt = require('wpt-api');2wpt.syntaxExamples('test');3var wpt = require('wpt-api');4wpt.syntaxExamples('test');5var wpt = require('wpt-api');6wpt.syntaxExamples('test');7var wpt = require('wpt-api');8wpt.syntaxExamples('test');9var wpt = require('wpt-api');10wpt.syntaxExamples('test');11var wpt = require('wpt-api');12wpt.syntaxExamples('test');13var wpt = require('wpt-api');14wpt.syntaxExamples('test');15var wpt = require('wpt-api');16wpt.syntaxExamples('test');17var wpt = require('wpt-api');18wpt.syntaxExamples('test');19var wpt = require('wpt-api');20wpt.syntaxExamples('test');21var wpt = require('wpt-api');22wpt.syntaxExamples('test');23var wpt = require('wpt-api');24wpt.syntaxExamples('test');25var wpt = require('wpt-api');26wpt.syntaxExamples('test');27var wpt = require('wpt-api');28wpt.syntaxExamples('test');29var wpt = require('w

Using AI Code Generation

1var wpt = require('wpt');2wpt.syntaxExamples(function(err, data){3  console.log(data);4});5var wpt = require('wpt');6var options = {7};8wpt.syntaxExamples(options, function(err, data){9  console.log(data);10});11var wpt = require('wpt');12var options = {13};14wpt.syntaxExamples(options, function(err, data){15  console.log(data);16});17var wpt = require('wpt');18wpt.syntaxExamples(function(err, data){19  console.log(data);20});21var wpt = require('wpt');22var options = {23};24wpt.syntaxExamples(options, function(err, data){25  console.log(data);26});27var wpt = require('wpt');28var options = {29};30wpt.syntaxExamples(options, function(err, data){31  console.log(data);32});33var wpt = require('wpt');34wpt.syntaxExamples(function(err, data){35  console.log(data);36});37var wpt = require('wpt');38var options = {39};40wpt.syntaxExamples(options, function(err, data){41  console.log(data);42});43var wpt = require('wpt');44var options = {45};46wpt.syntaxExamples(options, function(err, data){47  console.log(data);48});49var wpt = require('wpt');50wpt.syntaxExamples(function(err, data){51  console.log(data);52});53var wpt = require('wpt');54var options = {55};56wpt.syntaxExamples(options, function(err, data){

Using AI Code Generation

1var wpt = require('./wpt.js');2wpt.syntaxExamples();3module.exports.syntaxExamples = function() {4  console.log('syntax examples');5};6var wpt = require('./wpt.js');7wpt.syntaxExamples();8exports.syntaxExamples = function() {9  console.log('syntax examples');10};11var wpt = require('./wpt.js');12wpt.syntaxExamples();13module.exports = {14  syntaxExamples: function() {15    console.log('syntax examples');16  }17}18var wpt = require('./wpt.js');19wpt.syntaxExamples();20exports = module.exports = {21  syntaxExamples: function() {22    console.log('syntax examples');23  }24}25var wpt = require('./wpt.js');26wpt.syntaxExamples();27exports.syntaxExamples = function() {28  console.log('syntax examples');29};30var wpt = require('./wpt.js');31wpt.syntaxExamples();32exports = {33  syntaxExamples: function() {34    console.log('syntax examples');35  }36};37var wpt = require('./wpt

Using AI Code Generation

1var wpt = require('./wpt');2var wpt = new wpt('API_KEY');3wpt.syntaxExamples('test',function(err,data){4    if(err){5        console.log(err);6    }else{7        console.log(data);8    }9});10var wpt = require('./wpt');11var wpt = new wpt('API_KEY');12wpt.syntaxExamples('test',function(err,data){13    if(err){14        console.log(err);15    }else{16        console.log(data);17    }18});19var wpt = require('./wpt');20var wpt = new wpt('API_KEY');21wpt.syntaxExamples('test',function(err,data){22    if(err){23        console.log(err);24    }else{25        console.log(data);26    }27});28var wpt = require('./wpt');29var wpt = new wpt('API_KEY');30wpt.syntaxExamples('test',function(err,data){31    if(err){32        console.log(err);33    }else{34        console.log(data);35    }36});37var wpt = require('./wpt');38var wpt = new wpt('API_KEY');39wpt.syntaxExamples('test',function(err,data){40    if(err){41        console.log(err);42    }else{43        console.log(data);44    }45});46var wpt = require('./wpt');47var wpt = new wpt('API_KEY');48wpt.syntaxExamples('test',function(err,data){49    if(err){50        console.log(err);51    }else{52        console.log(data);53    }54});55var wpt = require('./wpt');56var wpt = new wpt('API_KEY');57wpt.syntaxExamples('test',function(err,data){58    if(err){59        console.log(err);60    }else{61        console.log(data);62    }63});

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.