diff options
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/cssom/iframe/style_test.html')
| -rw-r--r-- | contexts/data/lib/closure-library/closure/goog/cssom/iframe/style_test.html | 391 |
1 files changed, 0 insertions, 391 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/cssom/iframe/style_test.html b/contexts/data/lib/closure-library/closure/goog/cssom/iframe/style_test.html deleted file mode 100644 index a348759..0000000 --- a/contexts/data/lib/closure-library/closure/goog/cssom/iframe/style_test.html +++ /dev/null @@ -1,391 +0,0 @@ -<html> -<!-- -Copyright 2010 The Closure Library Authors. All Rights Reserved. - -Use of this source code is governed by the Apache License, Version 2.0. -See the COPYING file for details. ---> -<head> -<meta http-equiv="X-UA-Compatible" content="IE=edge"> - <script src="../../base.js"></script> - <script> - goog.require('goog.cssom'); - goog.require('goog.cssom.iframe.style'); - goog.require('goog.testing.jsunit'); - </script> - <script> - // unit tests - var propertiesToTest = [ - 'color', - 'font-family', - 'font-style', - 'font-size', - 'font-variant', - 'border-top-style', - 'border-top-width', - 'border-top-color', - 'background-color', - 'margin-bottom' - ]; - - function crawlDom(startNode, func) { - if (startNode.nodeType != 1) { return; } - func(startNode); - for (var i = 0; i < startNode.childNodes.length; i++) { - crawlDom(startNode.childNodes[i], func); - } - } - - function getCurrentCssProperties(node, propList) { - var props = {}; - if (node.nodeType != 1) { return; } - for (var i = 0; i < propList.length; i++) { - var prop = propList[i]; - if (node.currentStyle) { // IE - var propCamelCase = ''; - var propParts = prop.split('-'); - for (var j = 0; j < propParts.length; j++) { - propCamelCase += propParts[j].charAt(0).toUpperCase() + - propParts[j].substring(1, propParts[j].length); - } - props[prop] = node.currentStyle[propCamelCase]; - } else { // standards-compliant browsers - props[prop] = node.ownerDocument.defaultView.getComputedStyle( - node, '').getPropertyValue(prop); - } - } - return props; - } - - function CssPropertyCollector(){ - var propsList = []; - this.propsList = propsList - - this.collectProps = function(node) { - var nodeProps = getCurrentCssProperties(node, propertiesToTest); - if (nodeProps) { propsList.push([nodeProps, node]); } - } - } - - function recursivelyListCssProperties(el) { - var collector = new CssPropertyCollector(); - crawlDom(el, collector.collectProps); - return collector.propsList; - } - - function testMatchCssSelector() { - var container = document.createElement('div'); - container.className = 'container'; - var el = document.createElement('div'); - x = el; - el.id = 'mydiv'; - el.className = 'colorful foo'; - // set some arbirtrary content - el.innerHTML = '<div><ul><li>One</li><li>Two</li></ul></div>'; - container.appendChild(el); - document.body.appendChild(container); - - var elementAncestry = new goog.cssom.iframe.style.NodeAncestry_(el); - assertEquals(5, elementAncestry.nodes.length); - - // list of input/output results. Output is the index of the selector - // that we expect to match - for example, in 'body div div.colorful', - // 'div.colorful' has an index of 2. - var expectedResults = [ - ['body div', [4, 1]], - ['h1', null], - ['body div h1', [4, 1]], - ['body div.colorful h1', [4, 1]], - ['body div div', [4, 2]], - ['body div div div', [4, 2]], - ['body div div.somethingelse div', [4, 1]], - ['body div.somethingelse div', [2, 0]], - ['div.container', [3, 0]], - ['div.container div', [4, 1]], - ['#mydiv', [4, 0]], - ['div#mydiv', [4, 0]], - ['div.colorful', [4, 0]], - ['div#mydiv .colorful', [4, 0]], - ['.colorful', [4, 0]], - ['body * div', [4,2]], - ['body * *', [4,2]] - ]; - for (var i = 0; i < expectedResults.length; i++) { - var input = expectedResults[i][0]; - var expectedResult = expectedResults[i][1]; - var selector = new goog.cssom.iframe.style.CssSelector_(input); - var result = selector.matchElementAncestry(elementAncestry); - if (expectedResult == null) { - assertEquals('Expected null result', expectedResult, result); - } else { - assertEquals('Expected element index for ' + input, - expectedResult[0], - result.elementIndex); - assertEquals('Expected selector part index for ' + input, - expectedResult[1], - result.selectorPartIndex); - } - } - document.body.removeChild(container); - } - - function makeIframeDocument(iframe) { - var doc = goog.dom.getFrameContentDocument(iframe); - doc.open(); - doc.write('<html><head>'); - doc.write('<style>html,body { background-color: transparent; }</style>'); - doc.write('</head><body></body></html>'); - doc.close(); - return doc; - } - - function testCopyCss() { - for (var i = 1; i <= 4; i++) { - var sourceElement = document.getElementById('source'+i); - var newFrame = document.createElement('iframe'); - newFrame.allowTransparency = true; - sourceElement.parentNode.insertBefore(newFrame, - sourceElement.nextSibling); - var doc = makeIframeDocument(newFrame); - goog.cssom.addCssText( - goog.cssom.iframe.style.getElementContext(sourceElement), - new goog.dom.DomHelper(doc)); - doc.body.innerHTML = sourceElement.innerHTML; - - var oldProps = recursivelyListCssProperties(sourceElement); - var newProps = recursivelyListCssProperties(doc.body); - - assertEquals(oldProps.length, newProps.length); - for (var j = 0; j < oldProps.length; j++) { - for (var k = 0; k < propertiesToTest.length; k++) { - assertEquals('testing property ' + propertiesToTest[k], - oldProps[j][0][propertiesToTest[k]], - newProps[j][0][propertiesToTest[k]]); - } - } - } - } - - function normalizeCssText(cssText) { - // Normalize cssText for testing purposes. - return cssText.replace(/\s/g, '').toLowerCase(); - } - - function testAImportantInFF2() { - var testDiv = document.getElementById('source1'); - var cssText = normalizeCssText( - goog.cssom.iframe.style.getElementContext(testDiv)); - var color = standardizeCSSValue('color', 'red'); - var NORMAL_RULE = 'a{color:' + color; - var FF_2_RULE = 'a{color:' + color + '!important'; - if (goog.userAgent.GECKO && !goog.userAgent.isVersion('1.9a')) { - assertContains(FF_2_RULE, cssText); - } else { - assertContains(NORMAL_RULE, cssText); - assertNotContains(FF_2_RULE, cssText); - } - } - - function testCopyBackgroundContext() { - var testDiv = document.getElementById('backgroundTest'); - var cssText = goog.cssom.iframe.style.getElementContext(testDiv, - null, - true); - var iframe = document.createElement('iframe'); - var ancestor = document.getElementById('backgroundTest-ancestor-1'); - ancestor.parentNode.insertBefore(iframe, ancestor.nextSibling); - iframe.style.width = '100%'; - iframe.style.height = '100px'; - iframe.style.borderWidth = '0px'; - var doc = makeIframeDocument(iframe); - goog.cssom.addCssText(cssText, new goog.dom.DomHelper(doc)); - doc.body.innerHTML = testDiv.innerHTML; - var normalizedCssText = normalizeCssText(cssText); - assertTrue( - 'Background color should be copied from parent element', - /body{[^{]*background-color:(?:rgb\(128,0,128\)|#800080)/.test( - normalizedCssText)); - assertTrue( - 'Background image should be copied from ancestor element', - /body{[^{]*background-image:url\(/.test(normalizedCssText)); - // Background-position can't be calculated in FF2, due to this bug: - // http://bugzilla.mozilla.org/show_bug.cgi?id=316981 - if (!(goog.userAgent.GECKO && !goog.userAgent.isVersion('1.9'))) { - // Expected x position is: - // originalBackgroundPositionX - elementOffsetLeft - // 40px - (1px + 8px) == 31px - // Expected y position is: - // originalBackgroundPositionY - elementOffsetLeft - // 70px - (1px + 10px + 5px) == 54px; - assertTrue('Background image position should be adjusted correctly', - /body{[^{]*background-position:31px54px/.test(normalizedCssText)); - } - } - - function testCopyBackgroundContextFromIframe() { - var testDiv = document.getElementById('backgroundTest'); - var iframe = document.createElement('iframe'); - iframe.allowTransparency = true; - iframe.style.position = 'absolute'; - iframe.style.top = '5px'; - iframe.style.left = '5px'; - iframe.style.borderWidth = '2px'; - iframe.style.borderStyle = 'solid'; - testDiv.appendChild(iframe); - var doc = makeIframeDocument(iframe); - doc.body.backgroundColor = 'transparent'; - doc.body.style.margin = '0'; - doc.body.style.padding = '0'; - doc.body.innerHTML = '<p style="margin: 0">I am transparent!</p>'; - var normalizedCssText = normalizeCssText( - goog.cssom.iframe.style.getElementContext( - doc.body.firstChild, null, true)); - // Background properties should get copied through from the parent - // document since the iframe is transparent - assertTrue( - 'Background color should be copied from parent element', - /body{[^{]*background-color:(?:rgb\(128,0,128\)|#800080)/.test( - normalizedCssText)); - assertTrue( - 'Background image should be copied from ancestor element', - /body{[^{]*background-image:url\(/.test(normalizedCssText)); - // Background-position can't be calculated in FF2, due to this bug: - // http://bugzilla.mozilla.org/show_bug.cgi?id=316981 - if (!(goog.userAgent.GECKO && !goog.userAgent.isVersion('1.9'))) { - // Image offset should have been calculated to be the same as the - // above example, but adding iframe offset and borderWidth. - // Expected x position is: - // originalBackgroundPositionX - elementOffsetLeft - // 40px - (1px + 8px + 5px + 2px) == 24px - // Expected y position is: - // originalBackgroundPositionY - elementOffsetLeft - // 70px - (1px + 10px + 5px + 5px + 2px) == 47px; - assertTrue('Background image position should be adjusted correctly', - !!/body{[^{]*background-position:24px47px/.exec( - normalizedCssText)) - } - iframe.parentNode.removeChild(iframe); - } - - function testCopyFontFaceRules() { - var isFontFaceCssomSupported = - goog.userAgent.WEBKIT || - goog.userAgent.OPERA || - (goog.userAgent.GECKO && goog.userAgent.isVersion('1.9.1')); - // We cannot use goog.testing.ExpectedFailures since it dynamically - // brings in CSS which causes the background context tests to fail - // in IE6. - if (isFontFaceCssomSupported) { - var cssText = goog.cssom.iframe.style.getElementContext( - document.getElementById('cavalier')); - assertTrue('The font face rule should have been copied correctly', - /@font-face/.test(cssText)); - } - } - - </script> - <style type="text/css"> - @import url("style_test_import.css"); - - body { font-family: Verdana; } - div { background-color: #ffc; margin: 10px 0; } - p { margin: 10px 0; } - .boxy { padding: 5px; background-color: #fa0; } - .special .boxy { padding: 10px; background-color: #abef00; } - div div strong { color: red; } - div { line-height: 1.3; } - .wrapper .inner-wrapper { border: 2px solid pink;} - a { color: red; } - #source4 { background-color: #900; } - - #backgroundTest-ancestor-1 { - background-color: rgb(128,0,128); - } - #backgroundTest-ancestor-0 { - background-image: url("../../images/blank.gif"); - background-position: 40px 70px; - background-repeat: repeat; - background-color: transparent; - padding: 5px 8px; - } - div#backgroundTest-parent { - border: 1px solid black; - background-color: transparent; - } - div#backgroundTest { - position: relative; - background-color: transparent; - height: 100px; - margin-top: 0; - } - </style> - <style type="text/css"> - .goog-presently-theme-monochrome { - background-color: black; - color: #CCC; - } - .goog-presently-theme-monochrome a { - color: #FFF; - } - .goog-presently-theme-monochrome p#source4 { - font-variant: small-caps; - } - - .italic { - font-style: italic; - } - </style> - <style type="text/css"> - @font-face { - font-family: Cavalier; - } - #cavalier { - font-family: Cavalier; - } - </style> -</head> -<body> - - <div class="wrapper"> - - <div class="inner-wrapper"> - - <div id="source1" class="italic"> - hello world - </div> - - <div id="source2"> - <div>Some <strong>strong</strong> text</div> - <div class="boxy exciting">A box</div> - <div class="inner-wrapper">A wrapper</div> - </div> - - <div id="source3" class="special"> - Some <strong>strong</strong> text - <div class="boxy">A box</div> - </div> - - <div id="ancestor" class="goog-presently-theme-monochrome"> - <p id="source4" style="background-color: #900"> - Here's a link: <a href="#">my link</a> - </p> - </div> - - <div id="backgroundTest-ancestor-1"> - <div id="backgroundTest-ancestor-0"> - <div id="backgroundTest-parent"> - <div id="backgroundTest"> - hello - </div> - </div> - </div> -</div> - -<div id="cavalier"></div> - </div> - - </div> - - <br /> -</body> -</html> |