### CSS Animation Shorthand Examples

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/animation.html

Demonstrates the 'animation' shorthand property with various combinations of values.

```css
#animation0 {animation: none;}
```

```css
#animation1 {animation: 3s;}
```

```css
#animation2 {animation: ease-in-out;}
```

```css
#animation3 {animation: 3s 1s;}
```

```css
#animation4 {animation: 5;}
```

```css
#animation5 {animation: alternate-reverse;}
```

```css
#animation6 {animation: backwards;}
```

```css
#animation7 {animation: paused;}
```

```css
#animation8 {animation: someName;}
```

```css
#animation9 {animation: 3s linear 1s someName;}
```

```css
#animation10 {animation: 3s ease-in 1s 5 reverse both paused someName;}
```

```css
#animation11 {animation: someName paused both reverse 5 ease-in 3s 1s;}
```

```css
#animation12 {animation: name1 1s 2s ease infinite alternate both running, 3s 4s ease-in 5 name2 backwards paused reverse;}
```

--------------------------------

### CSS Animation Direction Examples

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/animation.html

Illustrates the 'animation-direction' property with single and multiple values.

```css
#animation-direction0 {animation-direction: reverse;}
```

```css
#animation-direction1 {animation-direction: alternate, alternate-reverse, normal;}
```

```css
#animation-direction2 {animation-direction: alternate-normal;}
```

```css
#animation-direction3 {animation-direction: normal reverse;}
```

--------------------------------

### CSS :nth-child() Examples

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/simple/child-pseudo.html

These examples demonstrate the flexibility of the :nth-child() pseudo-class for selecting elements based on their position. Use these to apply styles to specific elements within a list or other parent container.

```css
li:nth-child(odd) { color: #000; } /* 1, 3, 5, etc. */
```

```css
li:nth-child(even) { color: #FFF; } /* 2, 4, 6, etc. */
```

```css
li:nth-child(5n) { color: #F00; } /* 5, 10, 15, etc. */
```

```css
li:nth-child(3n+4) { color: #0F0; } /* 4, 7, 10, 13, etc. */
```

```css
li:nth-child(-n+3) { color: #00F; } /* First 3 */
```

```css
li:nth-child(7) { color: #FF0; } /* 7 */
```

--------------------------------

### CSS Animation Timing Function Examples

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/animation.html

Illustrates various 'animation-timing-function' values, including keywords, cubic-bezier, and steps.

```css
#animation-timing-function0 {animation-timing-function: linear;}
```

```css
#animation-timing-function1 {animation-timing-function: ease, ease-in, ease-in-out;}
```

```css
#animation-timing-function2 {animation-timing-function: illegal;}
```

```css
#animation-timing-function3 {animation-timing-function: ease ease-in ease-in-out;}
```

```css
#animation-timing-function4 {animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);}
```

```css
#animation-timing-function5 {animation-timing-function: cubic-bezier(-0.1, 0.7, 1.0, 0.1);}
```

```css
#animation-timing-function6 {animation-timing-function: cubic-bezier(0.1, 0.7, 1.1, 0.1);}
```

```css
#animation-timing-function7 {animation-timing-function: steps(5, jump-both);}
```

```css
#animation-timing-function8 {animation-timing-function: steps(0, jump-both);}
```

```css
#animation-timing-function9 {animation-timing-function: frames(10);}
```

```css
#animation-timing-function10{animation-timing-function: frames();}
```

--------------------------------

### Basic Media Query Example

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/media/media1.html

Applies styles to elements within a media query for screen and projection devices with specific width and height constraints. Styles for 'strong' elements are nested within the query.

```css
p { color: red; }
@media screen and (min-width: 400px) and (min-height: 300px), projection {
  strong { color: blue; }
}
```

--------------------------------

### CSS Transition Property

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/transition.html

Examples of specifying which CSS properties should transition. Supports single properties, comma-separated lists, and the 'none' keyword.

```css
#transition-property0 {transition-property: margin-top;}
```

```css
#transition-property1 {transition-property: margin, padding, box-shadow;}
```

```css
#transition-property2 {transition-property: margin, padding, none;}
```

```css
#transition-property3 {transition-property: margin padding box-shadow;}
```

--------------------------------

### CSS Transition Delay

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/transition.html

Examples of setting the 'transition-delay' property. Supports single values, multiple values, and negative delays.

```css
#transition-delay0 {transition-delay: 1s;}
```

```css
#transition-delay1 {transition-delay: -1s;}
```

```css
#transition-delay2 {transition-delay: 1s, 2s, 3s;}
```

```css
#transition-delay3 {transition-delay: 1s, 2s, 3;}
```

--------------------------------

### Media Query with Different Constraints

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/media/media1.html

Applies styles to elements within a media query for screen and print devices, using different constraints (min-weight) than the previous example. Styles for 'strong' elements are nested.

```css
@media screen and (min-weight: 400kg), print {
  strong { color: green; }
}
```

--------------------------------

### CSS Animation Play State Examples

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/animation.html

Shows the 'animation-play-state' property with 'running', 'paused', and an invalid value.

```css
#animation-play-state0 {animation-play-state: paused;}
```

```css
#animation-play-state1 {animation-play-state: running, paused, paused;}
```

```css
#animation-play-state2 {animation-play-state: illegal;}
```

```css
#animation-play-state3 {animation-play-state: running paused paused;}
```

--------------------------------

### CSS Transition Duration

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/transition.html

Examples of setting the 'transition-duration' property. Supports single values, multiple values, and negative durations.

```css
#transition-duration0 {transition-duration: 1s;}
```

```css
#transition-duration1 {transition-duration: -1s;}
```

```css
#transition-duration2 {transition-duration: 1s, 2s, 3s;}
```

```css
#transition-duration3 {transition-duration: 1s, 2s, 3;}
```

--------------------------------

### CSS Animation Delay Examples

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/animation.html

Shows different ways to set the 'animation-delay' property, including single values, multiple values, and negative values.

```css
#animation-delay0 {animation-delay: 1s;}
```

```css
#animation-delay1 {animation-delay: -1s;}
```

```css
#animation-delay2 {animation-delay: 1s, 2s, 3s;}
```

```css
#animation-delay3 {animation-delay: 1s, 2s, 3;}
```

--------------------------------

### CSS Animation Fill Mode Examples

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/animation.html

Shows the 'animation-fill-mode' property with valid keywords and an invalid value.

```css
#animation-fill-mode0 {animation-fill-mode: forwards;}
```

```css
#animation-fill-mode1 {animation-fill-mode: backwards, none, both;}
```

```css
#animation-fill-mode2 {animation-fill-mode: illegal;}
```

```css
#animation-fill-mode3 {animation-fill-mode: backwards none both;}
```

--------------------------------

### Function Start/End Event Handling

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

Handles 'fn-start' and 'fn-end' events to track function execution. Specifically monitors 'onload' events and captures the start time for XHR callbacks.

```javascript
a.on("fn-start",function(t,e,n){e instanceof u&&("onload"===n&&(this.onload=!0),("load"==(t\[0\]&&t\[0\]).type)||this.onload)&&(this.xhrCbStart=(new Date).getTime())})
```

```javascript
a.on("fn-end",function(t,e){this.xhrCbStart&&a.emit("xhr-cb-time",\[(new Date).getTime()-this.xhrCbStart,this.onload,e\]),e)})
```

--------------------------------

### RequireJS Module Loading and Initialization

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

Loads necessary JavaScript modules using RequireJS and initializes various components on document ready. Includes timeago formatting and scrolling setup for mobile webkit devices.

```javascript
requirejs(['http://ads.cdnslate.com/wp-srv/ad/loaders/latest/js/min/polar_config.min.js']); requirejs(["jquery", "hcs/libs/iscroll-lite", "modernizr", "hcs/script", "hcs/plugins/SGGlobalNav.jquery", "hcs/plugins/jQuery.highlighter","hcs/plugins/SGGlobalNav.jquery","libs/jquery-plugins/jquery.timeago","announcements","myslate"], function($, iScroll, unused0, unused1, unused2, unused3, unused4, unused5, announcements, myslate) { $(document).ready(function() { announcements.deleteOldCookies(); $("span.timeago").timeago(); }); function pageLoadedForScrolling(){ scroller = new iScroll('main_sidebar', { hScroll: false, hScrollbar: false, bounce: false }); if(!mobileMode() && tabletMode() && $('html').hasClass('touch')){ // Nav gets iScroll if we're on an actual tablet. window.tabletScroller = new iScroll('nav_sections', { hScroll: false, hScrollbar: false, bounce: false, onBeforeScrollStart: function (e) { var target = e.target; while (target.nodeType != 1) target = target.parentNode; if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') e.preventDefault(); } }); } } // We institute fancy scrolling on iscroll only on mobile webkit. // Webkit detection script Modernizr.addTest('webkit', function(){ return RegExp(" AppleWebKit/").test(navigator.userAgent); }); // Mobile Webkit Modernizr.addTest('mobile', function(){ return RegExp(" Mobile/").test(navigator.userAgent); }); if(Modernizr.webkit && Modernizr.mobile){ if (document.addEventListener){ document.addEventListener('DOMContentLoaded', function () { setTimeout(pageLoadedForScrolling, 200); }, false); } else if (document.attachEvent){ document.attachEvent('DOMContentLoaded', function () { setTimeout(pageLoadedForScrolling, 200); }, false); } } $(function(){ watchSidebar(); if ($('body').hasClass('home') || $('body').hasClass('landing') || $('body').hasClass('settings')) { $('.nav-header').SGGlobalNav({ noRollup: true, // Need to tell the homepage and landing etc that there's no rollup here, which causes things to behave differently. noBurgerScroll: $('body').hasClass('no-burger-scroll'), isSlatePlusUser: myslate.isSlatePlusUser }); } else { $('.nav-header').SGGlobalNav({ isSlatePlusUser: myslate.isSlatePlusUser }); } // Input field placeholder plugin to account for placeholder fallbacks. jQuery(document).ready(function($) { $(".field-with-placeholder").placeholder(); }); $('.content').highlighter({ 'selector': '.highlighter-container', 'noHighlightIds': $('#podcast-slateplus-page'), 'minWords': 0, 'complete': function (data) { // Here we have the selected string for use. // console.log(data); selectedText = data; } }); }); $(document).ready(function() { $(".sticky").each(function() { var stickyTop = $(".sticky").offset().top; // returns number $(window).scroll(function() { // scroll event var windowTop = $(window).scrollTop() + 57 + parseInt($(".sticky").css("margin-top").split("px")[0]); // returns number if (stickyTop < windowTop) { $(".sticky").css({ position: "fixed", top: "53px" }); } else { $(".sticky").css("position"
```

--------------------------------

### CSS Animation Name Examples

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/animation.html

Demonstrates the 'animation-name' property with various valid identifiers, including those with special characters and numbers.

```css
#animation-name0 {animation-name: someName;}
```

```css
#animation-name1 {animation-name: number_42, -dash, _underscore;}
```

```css
#animation-name2 {animation-name: 42_number;}
```

```css
#animation-name3 {animation-name: none;}
```

--------------------------------

### CSS Animation Duration Examples

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/animation.html

Demonstrates the 'animation-duration' property with valid and invalid values, including multiple values and negative durations.

```css
#animation-duration0 {animation-duration: 1s;}
```

```css
#animation-duration1 {animation-duration: -1s;}
```

```css
#animation-duration2 {animation-duration: 1s, 2s, 3s;}
```

```css
#animation-duration3 {animation-duration: 1s, 2s, 3;}
```

--------------------------------

### CSS Animation Iteration Count Examples

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/animation.html

Illustrates the 'animation-iteration-count' property with 'infinite', numbers, and invalid negative values.

```css
#animation-iteration-count0 {animation-iteration-count: infinite;}
```

```css
#animation-iteration-count1 {animation-iteration-count: 0, 1.5, 3;}
```

```css
#animation-iteration-count2 {animation-iteration-count: -1;}
```

```css
#animation-iteration-count4 {animation-iteration-count: 0, 1.5, -3;}
```

--------------------------------

### Get Used Styles with Media Specification

Source: https://github.com/radkovo/jstyleparser/blob/main/doc/manual/manual.html

Retrieves all style sheets referenced from HTML or XML code that match the given media specification. This method is part of the DOM style analysis process.

```java
CSSFactory.getUsedStyles(Document doc, String encoding, URL base, MediaSpec media);
```

--------------------------------

### Get Used Styles from HTML Document

Source: https://github.com/radkovo/jstyleparser/blob/main/doc/manual/manual.html

Parses all style sheets referenced in an HTML or XML document using CSSFactory. Requires Document, encoding, base URL, and MediaSpec.

```java
Document doc = ...;
String encoding = "UTF-8";
URL base = ...;
MediaSpec media = ...;
StyleSheet usedStyles = CSSFactory.getUsedStyles(doc, encoding, base, media);
```

--------------------------------

### Initialize SGBigSlider and SGVideoGallery

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

Initializes the SGBigSlider and SGVideoGallery components on page load. Includes logic to enable mobile video galleries and handle window resizing.

```javascript
requirejs(["jquery", "hcs/script", "hcs/plugins/SGNavDropdown.jquery", "hcs/plugins/SGBigSlider.jquery","hcs/plugins/SGFootnote.jquery","hcs/plugins/SGRollup.jquery", "hcs/plugins/SGNavDropdown.jquery","hcs/plugins/SGComments.jquery","hcs/plugins/SGLightbox.jquery", "hcs/plugins/SGSocialIcons.jquery","hcs/plugins/jquery.swipebox","hcs/plugins/SGVideoGallery.jquery"], function($, unused0, unused1, unused2, unused3, unused4, unused5, unused6, unused7, unused8) {
  $(function(){
    $('#big_slider').SGBigSlider({ type: 'home' });
    $('#video_gallery').SGVideoGallery();
    // Ideally we wouldn't run process both the desktop/tablet AND mobile video galleries, but
    // we have to if we want both variants to be visible as you resize the window between the 3 breakpoints.
    enableMobileVideoGallery();
  });
});
```

--------------------------------

### Configure Auto Import Media (All)

Source: https://github.com/radkovo/jstyleparser/blob/main/doc/manual/manual.html

This snippet configures the parser to import all style sheets, which is the default behavior.

```java
CSSFactory.setAutoImportMedia(new MediaSpecAll());
```

--------------------------------

### Creating a Media Specification

Source: https://github.com/radkovo/jstyleparser/blob/main/doc/manual/manual.html

Shows how to create a MediaSpec object to define the media type and features, such as 'screen' and display area dimensions, for style sheet evaluation.

```Java
MediaSpec media = new MediaSpec("screen");

media.setDimensions(1600, 1200);
```

--------------------------------

### CSS Transition Timing Function

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/transition.html

Demonstrates various timing functions for CSS transitions, including keywords, cubic-bezier, and steps.

```css
#transition-timing-function0 {transition-timing-function: linear;}
```

```css
#transition-timing-function1 {transition-timing-function: ease, ease-in, ease-in-out;}
```

```css
#transition-timing-function2 {transition-timing-function: illegal;}
```

```css
#transition-timing-function3 {transition-timing-function: ease ease-in ease-in-out;}
```

```css
#transition-timing-function4 {transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);}
```

```css
#transition-timing-function5 {transition-timing-function: cubic-bezier(-0.1, 0.7, 1.0, 0.1);}
```

```css
#transition-timing-function6 {transition-timing-function: cubic-bezier(0.1, 0.7, 1.1, 0.1);}
```

```css
#transition-timing-function7 {transition-timing-function: steps(5, jump-both);}
```

```css
#transition-timing-function8 {transition-timing-function: steps(0, jump-both);}
```

```css
#transition-timing-function9 {transition-timing-function: frames(10);}
```

```css
#transition-timing-function10{transition-timing-function: frames();}
```

--------------------------------

### Configure RequireJS for Slate.com

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

Sets up the require.js configuration for Slate.com, defining base URLs, paths for various libraries, and shim configurations for module dependencies.

```javascript
requirejs.config({"baseUrl": "http://static.cdnslate.com/etc/designs/slate/js", "waitSeconds": 0, "paths": { "jquery": "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min", "jqueryui": "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min", "modernizr": "/etc/designs/slate/js/libs/modernizr-2.6.1.min", "announcements": "/etc/designs/slate/js/announcements", "slate": "/etc/designs/slate/lib", "hogan": "libs/hogan-2.0.0", "facebook": "//connect.facebook.net/en_US/all", "twitter": "//platform.twitter.com/widgets", "livefyre": "//cdn.livefyre.com/Livefyre", "brightcove": "https://sadmin.brightcove.com/js/BrightcoveExperiences", "brightcovetracking": "/etc/designs/slate/js/brightcovetracking", "brightcovetracking-new": "/etc/designs/slate/js/brightcovetracking-new", "videojs-omniture": "/etc/designs/slate/js/videojs.analytic.omniture", "mobileredirection": "libs/redirection_mobile_1.0.0.min", "optimizely": "//cdn.optimizely.com/js/37441550", "outbrain": "//widgets.outbrain.com/outbrain", "shared": "http://static.cdnslate.com/etc/designs/shared/js", "instafeed": "/etc/designs/slate/js/instafeed", "campaigns": "http://campaigns.slate.com/campaigns/slate", "clipboard": "libs/zeroclipboard/ZeroClipboard.min", "tinypass": "https://cdn.tinypass.com/api/tinypass.min", //janrain "rpxnow": window.location.protocol === 'https:' ? 'https://rpxnow.com/load/login.slate.com?noext' : 'http://widget-cdn.rpxnow.com/load/login.slate.com?noext', 'promise': 'requirejs-promise', 'youtube': "/etc/designs/slate/js/youtube", 'youtubeapi' : "https://www.youtube.com/iframe_api?noext", "keywee": "https://dc8xl0ndzn2cb.cloudfront.net/js/slate/v0/keywee.min", "slateAds": [ "http://ads.cdnslate.com/wp-srv/ad/loaders/latest/js/min/loader.min.js?noext", "plus-upsell-adblock" ] }, "shim": { "shared/devicemode": ["modernizr"], "hcs/script": ["jquery", "modernizr", "shared/devicemode"], "libs/jquery-plugins/jquery.browser": ["jquery"], "hcs/plugins/jquery.transit": ["jquery"], "hcs/plugins/SGFootnote.jquery": ["jquery"], "hcs/plugins/SGSocialIcons.jquery": ["jquery", "hcs/script"], "hcs/plugins/SGNavDropdown.jquery": ["jquery"], "hcs/plugins/SGComments.jquery": ["jquery", "hcs/script"], "hcs/plugins/SGRollup.jquery": ["jquery", "hcs/script"], "hcs/plugins/SGGlobalNav.jquery": ["jquery", "hcs/script"], "hcs/plugins/SGLightbox.jquery": ["jquery"], "hcs/plugins/jQuery.highlighter": ["jquery"], "hcs/libs/swipe": ["jquery"], "hcs/libs/magnific": ["jquery"], "hcs/plugins/jquery.swipebox": ["jquery"], "hcs/plugins/SGBigSlider.jquery": ["jquery", "hcs/script", "hcs/libs/swipe"], "hcs/plugins/jquery.placeholder.min": ["jquery"], "libs/jquery-plugins/jquery.timeago": ["jquery"], "libs/jquery-plugins/jquery.form": ["jquery"], "libs/jquery-plugins/jquery.cookie": ["jquery"], "libs/jquery-plugins/jquery.fittext": ["jquery"], "libs/jquery-plugins/" ] });
```

--------------------------------

### New Relic Initialization

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

Initializes New Relic Browser monitoring. This snippet configures essential application details for performance tracking.

```javascript
window.NREUM||(NREUM={});NREUM.info={"applicationID":"2676640","applicationTime":2359,"beacon":"bam.nr-data.net","queueTime":0,"licenseKey":"f3154255a5","transactionName":"YwEAY0tTXkJYURBYVlpLN0VQHVlfXVccH1FACQ4=","agent":"js-agent.newrelic.com\/nr-768.min.js","errorBeacon":"bam.nr-data.net"}
```

--------------------------------

### New Relic API Initialization

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

Initializes New Relic API methods by wrapping them with a handler that records timestamps and arguments. This allows for custom event tracking and API call monitoring.

```javascript
var n=function(t){return function(){r(t,[(new Date).getTime()].concat(i(arguments)))}};var r=t("handle"),o=t(1),i=t(2);"undefined"==typeof window.newrelic&&(newrelic=window.NREUM);var a=["setPageViewName","addPageAction","setCustomAttribute","finished","addToTrace","inlineHit","noticeError"];o(a,function(t,e){window.NREUM[e]=n("api-"+e)}),e.exports=window.NREUM
```

--------------------------------

### CSS Transition Properties

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/transition.html

Demonstrates different ways to define the 'transition' shorthand property, including duration, delay, timing function, and property name.

```css
#transition0 {transition: none;}
```

```css
#transition1 {transition: 3s;}
```

```css
#transition2 {transition: 3s 1s;}
```

```css
#transition3 {transition: ease-in-out;}
```

```css
#transition4 {transition: propertyName;}
```

```css
#transition5 {transition: 3s 1s propertyName;}
```

```css
#transition6 {transition: 3s ease-in 1s propertyName;}
```

```css
#transition7 {transition: propertyName ease-in 3s 1s;}
```

```css
#transition8 {transition: prop1 3s 1s ease, prop2 ease-in 6s 2s, 1s ease-in-out prop3 3s;}
```

--------------------------------

### New Relic Agent Core Initialization

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

This is a core part of the New Relic Browser agent's initialization, defining its internal module loading mechanism and setting up error handling.

```javascript
window.NREUM||(NREUM={}),__nr_require=function(t,e,n){function r(n){if(!e[n]){var o=e[n]={exports:{}};t[n][0].call(o.exports,function(e){var o=t[n][1][e];return r(o||e)},o,o.exports)}return e[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<n.length;o++)r(n[o]);return r}({QJf3ax:[function(t,e){function n(t){function e(e,n,a){t&&t(e,n,a),a||(a={});for(var c=s(e),f=c.length,u=i(a,o,r),d=0;f>d;d++)c[d].apply(u,n);return u}function a(t,e){f[t]=s(t).concat(e)}function s(t){return f[t]||[]}function c(){return n(e)}var f={};return{on:a,emit:e,create:c,listeners:s,_events:f}}function r(){return{}}var o="nr@context",i=t("gos");e.exports=n()},{gos:"7eSDFh"}],ee:[function(t,e){e.exports=t("QJf3ax")},{}],3:[function(t){function e(t){try{i.console&&console.log(t)}catch(e){}}var n,r=t("ee"),o=t(1),i={};try{n=localStorage.getItem("__nr_flags").split(","),console&&"function"==typeof console.log&&(i.console=!0,-1!==n.indexOf("dev")&&(i.dev=!0),-1!==n.indexOf("nr_dev")&&(i.nrDev=!0))}catch(a){}i.nrDev&&r.on("internal-error",function(t){e(t.stack)}),i.dev&&r.on("fn-err",function(t,n,r){e(r.stack)}),i.dev&&(e("NR AGENT IN DEVELOPMENT MODE"),e("flags: "+o(i,function(t){return t}).join(", ")))},{1:24,ee:"QJf3ax"}],4:[function(t){function e(t,e,n,i,s){try{c?c-=1:r("err",[s||new UncaughtException(t,e,n)})}catch(f){try{r("ierr",[f,(new Date).getTime(),!0])}catch(u){}}return"function"==typeof a?a.apply(this,o(arguments)):!1}function UncaughtException(t,e,n){this.message=t||"Uncaught error with no additional information",this.sourceURL=e,this.line=n}function n(t){r("err",[t,(new Date).getTime()])}var r=t("handle"),o=t(6),i=t("ee"),a=window.onerror,s=!1,c=0;t("loader").features.err=!0,t(5),window.onerror=e;try{throw new Error}catch(f){"stack"in f&&(t(1),t(2),"addEventListener"in window&&t(3),window.XMLHttpRequest&&XMLHttpRequest.prototype&&XMLHttpRequest.prototype.addEventListener&&window.XMLHttpRequest&&XMLHttpRequest.prototype&&XMLHttpRequest.prototype.addEventListener&&!/CriOS/.test(navigator.userAgent)&&t(4),s=!0)}i.on("fn-start",function(){s&&(c+=1)}),i.on("fn-err",function(t,e,r){s&&(this.thrown=!0,n(r))}),i.on("fn-end",function(){s&&!this.thrown&&c>0&&(c-=1)}),i.on("internal-error",function(t){r("ierr",[t,(new Date).getTime(),!0])})},{1:11,2:10,3:8,4:12,5:3,6:25,ee:"QJf3ax",handle:"D5DuLP",loader:"G9z0Bl"}],5:[function(t){if(window.addEventListener){var e=t("handle"),n=t("ee");t(1),window.addEventListener("click",function(){e("inc",["ck"])});window.addEventListener("hashchange",function(){e("inc",["hc"])});n.on("pushState-start",function(){e("inc",["ps"]})}},{1:9,ee:"QJf3ax",handle:"D5DuLP"}],6:[function(t){t("loader").features.ins=!0},{loader:"G9z0Bl"}],7:[function(t){function e(){}if(window.performance&&window.performance.timing&&window.performance.getEntriesByType){var n=t("ee"),r=t("handle"),o=t(1),i=t(2);t("loader").features.stn=!0,t(3);var a=Event;n.on("fn-start",function(t){var e=t[0];e instanceof a&&(this.bstStart=Date.now())}),n.on("fn-end",function(t,e){var n=t[0];n instanceof a&&r("bst",[n,e,this.bstStart,Date.now()])}),o.on("fn-start",function(t,e,n){this.bstStart=Date.now(),this.bstType=n}),o.on("fn-end",function(t,e){r("bstTimer",[e,this.bstStart,Date.now(),this.bstType])}),i.on("fn-start",function(){this.bstStart=Date.now()}),i.on("fn-end",function(t,e){r("bstTimer",[e,this.bstStart,Date.now(),"requestAnimationFrame"])}),n.on("pushState-start",function(){this.time=Date.now(),this.startPath=location.pathname+location.hash}),n.on("pushState-end",function(){r("bstHist",[location.pathname+location.hash,this.startPath,this.time])}),"addEventListener"in window.performance&&(window.performance.addEventListener("webkitresourcetimingbufferfull",function(){r("bstResource",[window.performance.getEntriesByType("resource")]),window.performance.webkitClearResourceTimings()},!1),window.performance.addEventListener("resourcetimingbufferfull",function(){r("bstResource",[window.performance.getEntriesByType("resource")]),window.performance.clearResourceTimings()},!1)),document.addEventListener("scroll",e,!1),document.addEventListener("keypress",e,!1),docu
```

--------------------------------

### Event Emitter with Queue

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

Creates an event emitter instance that allows emitting events. If no listeners are registered for an event, it queues the event for later processing.

```javascript
function n(t,e,n){return r.listeners(t).length?r.emit(t,e,n):void(r.q&&(r.q[t]||(r.q[t]=[]),r.q[t].push(e)))}var r=t("ee").create();e.exports=n,n.ee=r,r.q={}
```

--------------------------------

### Initialize comScore Analytics

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

This snippet initializes the comScore analytics script. It ensures the comScore object is available and pushes the necessary configuration before asynchronously loading the beacon script.

```javascript
var _comscore = _comscore || [];
_comscore.push({ c1: "2", c2: "18406752" });
(function() {
  var s = document.createElement("script"), el = document.getElementsByTagName("script")[0];
  s.async = true;
  s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js";
  el.parentNode.insertBefore(s, el);
})();
```

--------------------------------

### Configure Auto Import Media (Screen Type)

Source: https://github.com/radkovo/jstyleparser/blob/main/doc/manual/manual.html

This snippet configures the parser to import all style sheets valid for the 'screen' media type, regardless of feature values.

```java
CSSFactory.setAutoImportMedia(new MediaSpecType("screen"));
```

--------------------------------

### Configure and Load Chartbeat Analytics

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

Configures Chartbeat analytics with site-specific information (UID, domain, sections, authors) and asynchronously loads the Chartbeat JavaScript tracker.

```javascript
var _sf_async_config={uid:9250,domain:"slate.com"};
_sf_async_config.useCanonical = true;
if (wp_meta_data) {
  var sectionsArray = new Array();
  if (wp_meta_data.section !== undefined) {
    sectionsArray.push(wp_meta_data.section);
  }
  if (wp_meta_data.rubric !== undefined) {
    sectionsArray.push(wp_meta_data.rubric);
  }
  if (wp_meta_data.blog !== undefined) {
    sectionsArray.push(wp_meta_data.blog);
  }
  _sf_async_config.sections = sectionsArray.join(",");
  if (wp_meta_data.authors !== undefined) {
    _sf_async_config.authors = wp_meta_data.authors.join(",");
  }
}
(function(){
  function loadChartbeat() {
    window._sf_endpt=(new Date()).getTime();
    var e = document.createElement('script');
    e.setAttribute('language', 'javascript');
    e.setAttribute('type', 'text/javascript');
    e.setAttribute('src', (("https:" == document.location.protocol) ? "https://a248.e.akamai.net/chartbeat.download.akamai.com/102508/" : "http://static.chartbeat.com/") + "js/chartbeat.js");
    document.body.appendChild(e);
  }
  var oldonload = window.onload;
  window.onload = (typeof window.onload != 'function') ? loadChartbeat : function() {
    oldonload();
    loadChartbeat();
  };
})();
```

--------------------------------

### Instrumenting Timers

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

Wraps setTimeout, setInterval, clearTimeout, and clearImmediate. Useful for tracking timer execution and potential delays.

```javascript
function n(t,e,n){t[0]=i(t[0],"fn-",null,n)}
function r(t,e,n){
  function r(){return a}
  this.ctx={};
  var a={"nr@context":this.ctx};
  o.emit("initTimerContext",[t,n],a),
  t[0]=i(t[0],"fn-",r,n)
}
var o=t("ee").create(),i=t(1)(o);
e.exports=o,
i.inPlace(window,["setTimeout","setImmediate"],"setTimer-"),
i.inPlace(window,["setInterval"],"setInterval-"),
i.inPlace(window,["clearTimeout","clearImmediate"],"clearTimeout-"),
o.on("setInterval-start",n),
o.on("setTimer-start",r)
```

--------------------------------

### Configure Auto Import Media (None)

Source: https://github.com/radkovo/jstyleparser/blob/main/doc/manual/manual.html

This snippet configures the parser to not automatically import any style sheets.

```java
CSSFactory.setAutoImportMedia(new MediaSpecNone());
```

--------------------------------

### Configure Auto Import Media (Screen Only)

Source: https://github.com/radkovo/jstyleparser/blob/main/doc/manual/manual.html

This snippet configures the parser to automatically import only style sheets valid for the 'screen' media type, using default values for all features.

```java
CSSFactory.setAutoImportMedia(new MediaSpec("screen"));
```

--------------------------------

### Assigning Pseudo-Classes to Elements

Source: https://github.com/radkovo/jstyleparser/blob/main/doc/manual/manual.html

Demonstrates how to use MatchConditionOnElements to assign specific pseudo-classes like :hover and :visited to individual DOM elements. This allows for custom styling beyond the default behavior.

```Java
Element e1 = document.getElementById('element1');
Element e2 = ... //or any other way of obtaining a DOM Element

MatchConditionOnElements cond = new MatchConditionOnElements("a", PseudoDeclaration.LINK);

cond.addMatch(e1, PseudoDeclaration.HOVER);
cond.addMatch(e2, PseudoDeclaration.VISITED);

CSSFactory.registerDefaultMatchCondition(cond);

StyleMap decl = CSSFactory.assignDOM(doc, null, base, "screen", true);
```

--------------------------------

### Assign DOM Styles with Media and Inheritance

Source: https://github.com/radkovo/jstyleparser/blob/main/doc/manual/manual.html

Combines obtaining used styles and evaluating DOM styles. It assigns CSS rules to HTML elements, considering media specifications and inheritance options.

```java
CSSFactory.assignDOM(Document doc, String encoding, URL base, String media, boolean useInheritance);
```

--------------------------------

### Multiple Box Shadows (Inset and Outset)

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/boxshadow.html

Applies multiple box shadows, including an inset shadow. Use for complex layered shadow effects.

```css
#shadow_multi1 { box-shadow: 3px 3px #eee, inset -1em 0 .4em olive; }
```

--------------------------------

### Multiple Box Shadows (Outset)

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/boxshadow.html

Applies multiple outset box shadows. Use for creating depth with distinct shadow layers.

```css
#shadow_multi2 { box-shadow: 3px 3px #eee, 10px 0 .4em olive; }
```

--------------------------------

### Multiple Box Shadows with RGB and Spread

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/boxshadow.html

Applies multiple box shadows with RGB color values and spread distances. Use for advanced, multi-layered shadow designs.

```css
#shadow_multi3 { box-shadow: 3px 3px rgb(3,3,3) , 10px 0 .4em olive, green -5em 5em 5em 5em; }
```

--------------------------------

### Slate HP Video Properties Configuration

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

Extends the configuration object to set properties for homepage video playback. This snippet is used to control video preview and theme settings on the homepage.

```javascript
requirejs(['jquery', 'config'], function($, config) {
    $.extend(config, {
        sgHPVidProps: {
            sgHPVidPreview: false,
            sgHPBottomTheme: "standard"
        }
    });
});
```

--------------------------------

### Basic Background Color and Image

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/background.html

Sets a background color and a background image with specific repeat and position. Useful for defining distinct visual areas.

```css
.cont {
  background-color: #aaa;
  position: relative;
  border: 1px solid black;
}
.example {
  border: 5px solid blue;
  width: 300px;
  height: 200px;
  margin: 100px 100px;
  padding: 10px;
}
#bg1 {
  background-color: blue;
  background-image: url("bgimg.png");
  background-repeat: no-repeat;
  background-position: 25px 25px;
  background-size: 1px 10%;
}
```

--------------------------------

### Evaluate DOM with Media Specification

Source: https://github.com/radkovo/jstyleparser/blob/main/doc/manual/manual.html

Assigns styles to individual DOM elements, considering only rules that apply to the given media. This includes internal @media rules and imported rules with media queries.

```java
Analyzer.evaluateDOM(Document doc, MediaSpec media, boolean inherit);
```

--------------------------------

### Multiple Box Shadows (Basic)

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/simple/box-shadow.html

Applies multiple box shadows to an element, separated by commas.

```css
#multiple_0 {box-shadow: 5px 5px, 5px 5px red;}
```

--------------------------------

### Inset Box Shadow with All Components

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/boxshadow.html

Applies an inset box shadow including offset, blur, spread, and color. Use for detailed inset effects.

```css
#shadow4 { box-shadow: rgba(0, 0, 255, .2) inset 5em 1em 10px 5px; }
```

--------------------------------

### Parse CSS String and Access Rules

Source: https://github.com/radkovo/jstyleparser/blob/main/README.md

Parses a CSS string and demonstrates accessing rules, selectors, and declarations. Ensure the base URL is correctly set for relative path resolution.

```java
String css = "div { background-color: red; width: 12px; }";

//parse the style sheet
StyleSheet sheet = CSSFactory.parseString(css, new URL("http://base.url"));

//access the rules and declarations
RuleSet rule = (RuleSet) sheet.get(0);       //get the first rule
CombinedSelector selector = rule.getSelectors()[0]; //read the 'div' selector
Declaration bgDecl = rule.get(0);            //read the 'background-color' declaration
String bgProperty = bgDecl.getProperty();    //read the property name
TermColor color = (TermColor) bgDecl.get(0); //read the color

//print the results
System.out.println(selector);   //prints 'div'
System.out.println(bgProperty); //prints 'background-color'
System.out.println(color);      //prints '#ff0000'

//or even print the entire style sheet (formatted)
System.out.println(sheet);
```

--------------------------------

### Krux Control Tag Initialization

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

Initializes the Krux control tag for audience segmentation and data collection. This script is dynamically loaded and configured based on URL parameters or default settings.

```javascript
window.Krux||((Krux=function(){Krux.q.push(arguments)}).q=[]);
(function(){
    var k=document.createElement('script');k.type='text/javascript';k.async=true;
    var m,src=(m=location.href.match(/\bkxsrc=(\[^&\s]+)/))&&decodeURIComponent(m[1]);
    k.src = /^https?:\/\/(\[a-z0-9_\-\.])+\./i.test(src) ? src : src === "disable" ? "" : (location.protocol==="https:"?"https:" : "http:")+"//cdn.krxd.net/controltag?confid=KGU_SbHX";
    var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(k,s);
}());
```

--------------------------------

### Basic Box Shadow: None

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/simple/box-shadow.html

Applies no shadow to the element.

```css
#none {box-shadow: none;}
```

--------------------------------

### HTML Standards Mode CSS Selectors

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/case/test_html_std.html

Demonstrates case sensitivity for element names, classes, IDs, and pseudo-classes in HTML standards mode using CSS.

```css
li { color: red; }
LI { color: green; }
```

```css
.second { color: green; }
.SECOND { color: red; }
```

```css
#selected { color: green; }
#SELECTED { color: red; }
```

```css
li:last-child { color: red; }
li:LAST-CHILD { color: green; }
```

--------------------------------

### Slate Domain Configuration

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

Sets the document domain based on configuration, ensuring correct domain resolution for scripts and cookies. This is crucial for cross-domain communication or consistent behavior across subdomains.

```javascript
requirejs(['config'], function(config) {
    var documentDomain = 'slate.com';
    if (config.janrain.siteConfig.enabled) {
        documentDomain = config.myslate.site_base_domain;
    }
    document.domain = documentDomain;
});
```

--------------------------------

### Basic Box Shadow

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/advanced/boxshadow.html

Applies a simple red box shadow with offset and blur. Use for basic visual depth.

```css
#shadow1 { box-shadow: 10px 5px 5px red; }
```

--------------------------------

### RequireJS Campaign Execution

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

Executes campaign manager functions using RequireJS. Note the commented-out setTimeout, indicating potential performance considerations.

```javascript
requirejs(["shared/campaignManager", "optimizely"], function(campaigns, optimizely) { // setTimeout. Boo. setTimeout(campaigns.execute, 400); });
```

--------------------------------

### Instrumenting History API

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

Wraps the pushState and replaceState methods of the History API. Useful for tracking navigation changes in single-page applications.

```javascript
var n=t("ee").create(),r=t(1)(n);
e.exports=n,
r.inPlace(window.history,["pushState","replaceState"],"-")
```

--------------------------------

### URL Parsing for Port and Hostname

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/profiling/slate.html

Parses a URL string to extract port, hostname, pathname, and protocol. Handles cases where the port is not explicitly defined in the URL.

```javascript
e.exports=function(t){var e=document.createElement("a"),n=window.location,r={};e.href=t,r.port=e.port;var o=e.href.split("://");return!r.port&&o\[1\]&&(r.port=o\[1\]).split("/")\[0\]).split("@").pop().split(":")\[1\]),r.port&&"0"!==r.port||(r.port="https"===o\[0\]?"443":"80"),r.hostname=e.hostname||n.hostname,r.pathname=e.pathname,r.protocol=o\[0
],"/"!==r.pathname.charAt(0)&&(r.pathname="/"+r.pathname),r.sameOrigin=!e.hostname||e.hostname===document.domain&&e.port===n.port&&e.protocol===n.protocol,r}}
```

--------------------------------

### StyleMap Pseudo-Element Methods

Source: https://github.com/radkovo/jstyleparser/blob/main/doc/manual/manual.html

Provides methods to check for and retrieve the style of CSS pseudo-elements for a given DOM element.

```APIDOC
## StyleMap Pseudo-Element Operations

### Description
Methods to interact with CSS pseudo-element styles.

### Methods

#### `hasPseudo(Element element, Selector.PseudoDeclaration pseudo)`

Checks if the given DOM element has any style declared for the specified pseudo-element.

- **element** (org.w3c.dom.Element) - The DOM element to check.
- **pseudo** (Selector.PseudoDeclaration) - The pseudo-element type (e.g., BEFORE, AFTER, FIRST_LETTER, FIRST_LINE).

Returns: `boolean` - true if the element has style for the pseudo-element, false otherwise.

#### `get(Element element, Selector.PseudoDeclaration pseudo)`

Retrieves the style data for the specified pseudo-element of the given DOM element.

- **element** (org.w3c.dom.Element) - The DOM element whose pseudo-element style is to be obtained.
- **pseudo** (Selector.PseudoDeclaration) - The pseudo-element type (e.g., BEFORE, AFTER, FIRST_LETTER, FIRST_LINE).

Returns: `NodeData` - The style data for the pseudo-element.
```

--------------------------------

### Inset Box Shadow with Spread

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/simple/box-shadow.html

Applies an inset shadow with horizontal offset, vertical offset, blur radius, and spread radius.

```css
#inset_spread {box-shadow: inset 5px 5px 5px 5px;}
```

--------------------------------

### Basic Element Styling

Source: https://github.com/radkovo/jstyleparser/blob/main/src/test/resources/media/media1.html

Applies a simple style to 'em' elements, independent of any media queries.

```css
em { color: green; }
```

--------------------------------

### Access Multi-Value Properties

Source: https://github.com/radkovo/jstyleparser/blob/main/README.md

Retrieves multiple values for properties like 'background-image' from a NodeData object. Use getListSize() to determine the number of values.

```java
//get the style of a single element
Element div = doc.getElementById("searchelement"); //choose a DOM element
NodeData style = map.get(div); //get the style map for the element

//get the number of background images specified for the element
int bgcnt = style.getListSize("background-image", true);

//read all images
for (int index = 0; index < bgcnt; index++>) {
    CSSProperty.BackgroundImage image = style.getProperty("background-image", index);
    if (image == CSSProperty.BackgroundImage.uri) { //if the image is specified by its url
        TermURI urlstring = style.getValue(TermURI.class, "background-image", index);
        //... do something with the image url
    }
}
```