tor-browser

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

CSSStyleDeclaration.html (4555B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <title>Custom Elements: CEReactions on CSSStyleDeclaration interface</title>
      5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
      6 <meta name="assert" content="cssText, setProperty, setPropertyValue, setPropertyPriority, removeProperty, cssFloat, and all camel cased attributes of CSSStyleDeclaration interface must have CEReactions">
      7 <meta name="help" content="https://dom.spec.whatwg.org/#node">
      8 <script src="/resources/testharness.js"></script>
      9 <script src="/resources/testharnessreport.js"></script>
     10 <script src="../resources/custom-elements-helpers.js"></script>
     11 <script src="./resources/reactions.js"></script>
     12 </head>
     13 <body>
     14 <div id="log"></div>
     15 <script>
     16 
     17 test_mutating_style_property_value(function (instance, propertyName, idlName, value) {
     18    instance.style.cssText = `${propertyName}: ${value}`;
     19 }, 'cssText on CSSStyleDeclaration');
     20 
     21 test_mutating_style_property_value(function (instance, propertyName, idlName, value) {
     22    instance.style.setProperty(propertyName, value);
     23 }, 'setProperty on CSSStyleDeclaration');
     24 
     25 test_mutating_style_property_priority(function (instance, propertyName, idlName, isImportant) {
     26    instance.style.setProperty(propertyName, instance.style[idlName], isImportant ? 'important': '');
     27 }, 'setProperty on CSSStyleDeclaration');
     28 
     29 if (CSSStyleDeclaration.prototype.setPropertyValue) {
     30    test_mutating_style_property_value(function (instance, propertyName, idlName, value) {
     31        instance.style.setPropertyValue(propertyName, value);
     32    }, 'setPropertyValue on CSSStyleDeclaration');
     33 }
     34 
     35 if (CSSStyleDeclaration.prototype.setPropertyPriority) {
     36    test_mutating_style_property_priority(function (instance, propertyName, idlName, isImportant) {
     37        instance.style.setPropertyPriority(propertyName, isImportant ? 'important': '');
     38    }, 'setPropertyPriority on CSSStyleDeclaration');
     39 }
     40 
     41 test_removing_style_property_value(function (instance, propertyName, idlName) {
     42    instance.style.removeProperty(propertyName);
     43 }, 'removeProperty on CSSStyleDeclaration');
     44 
     45 test(function () {
     46    var element = define_new_custom_element(['style']);
     47    var instance = document.createElement(element.name);
     48    assert_array_equals(element.takeLog().types(), ['constructed']);
     49    instance.style.cssFloat = 'left';
     50    assert_equals(instance.getAttribute('style'), 'float: left;');
     51    var logEntries = element.takeLog();
     52    assert_array_equals(logEntries.types(), ['attributeChanged']);
     53    assert_attribute_log_entry(logEntries.last(), {name: 'style', oldValue: null, newValue: 'float: left;', namespace: null});
     54 }, 'cssFloat on CSSStyleDeclaration must enqueue an attributeChanged reaction when it adds the observed style attribute');
     55 
     56 test(function () {
     57    var element = define_new_custom_element([]);
     58    var instance = document.createElement(element.name);
     59    assert_array_equals(element.takeLog().types(), ['constructed']);
     60    instance.style.cssFloat = 'left';
     61    assert_equals(instance.getAttribute('style'), 'float: left;');
     62    assert_array_equals(element.takeLog().types(), []);
     63 }, 'cssFloat on CSSStyleDeclaration must not enqueue an attributeChanged reaction when it adds the style attribute but the style attribute is not observed');
     64 
     65 test_mutating_style_property_value(function (instance, propertyName, idlName, value) {
     66    assert_equals(idlName, 'borderWidth');
     67    instance.style.borderWidth = value;
     68 }, 'A camel case attribute (borderWidth) on CSSStyleDeclaration',
     69    {propertyName: 'border-width', idlName: 'borderWidth', value1: '2px', value2: '4px'});
     70 
     71 test_mutating_style_property_value(function (instance, propertyName, idlName, value) {
     72    assert_equals(propertyName, 'border-width');
     73    instance.style['border-width'] = value;
     74 }, 'A dashed property (border-width) on CSSStyleDeclaration',
     75    {propertyName: 'border-width', idlName: 'borderWidth', value1: '1px', value2: '5px'});
     76 
     77 test_mutating_style_property_value(function (instance, propertyName, idlName, value) {
     78    instance.style.webkitFilter = value;
     79 }, 'A webkit prefixed camel case attribute (webkitFilter) on CSSStyleDeclaration',
     80    {propertyName: 'filter', idlName: 'filter', value1: 'grayscale(20%)', value2: 'grayscale(30%)'});
     81 
     82 test_mutating_style_property_value(function (instance, propertyName, idlName, value) {
     83    instance.style['-webkit-filter'] = value;
     84 }, 'A webkit prefixed dashed property (-webkit-filter) on CSSStyleDeclaration',
     85    {propertyName: 'filter', idlName: 'filter', value1: 'grayscale(20%)', value2: 'grayscale(30%)'});
     86 
     87 </script>
     88 </body>
     89 </html>