oschaaf commented 9 years ago

Running ngx_pagespeed's system tests (without valgrind), a rare test failure occurs:

  test_filter prioritize_critical_css
  start_test no critical selectors chosen from unauthorized resources
  URL="$TEST_ROOT/unauthorized/prioritize_critical_css.html"
  URL+="?PageSpeedFilters=prioritize_critical_css,debug"
  fetch_until -save $URL 'fgrep -c pagespeed.criticalCssBeaconInit' 3
....

This fails:

  EXPECTED_IMPORT_FAILURE_LINE="<!--Flattening failed: Cannot import http://www.google.com/css/maia.css as it is on an unauthorized domain-->"
  check [ $(grep -o "$EXPECTED_IMPORT_FAILURE_LINE" $FETCH_FILE | wc -l) -eq 1 ]

jeffkaufman commented 9 years ago

Because the fetch_until has -save the fetch file should still be on disk right after the failure. The next time this happens can you cat the fetch file and put that here? I want to see what it has instead of the expected import failure line.

oschaaf commented 9 years ago

@jeffkaufman Still had emacs open for that file:

<!doctype html>
<html> 
  <head>
    <title>prioritize_critical_css example</title>
    <link rel="stylesheet" type="text/css" href="http://www.google.com/cse/style/look/default.css"><!--The preceding resource was not rewritten because its domain (www.google.com) is not authorized-->
    <link rel="stylesheet" type="text/css" href="with_unauthorized_imports.css"><!--Fetch status not set when IsSafeToRewrite was called, preventing rewriting of http://localhost:8050/mod_pagespeed_test/unauthorized/with_unauthorized_imports.css-->
  </head>
  <body>
    <div class="foo" style="display:inline-block;"></div>
    <span class="blue big">Prioritize Critical CSS with unauthorized resources</span>
    <div class="bold">
      <p>
      The prioritize_critical_css filter identifies selectors from css
      references and introduces them into the beaconing javascript code. If the
      InlineUnauthorizedResources option is enabled, selectors from unauthorized
      resources such as the www.google.com default.css resource will also be
      considered, but unauthorized @import references will not be considered.
      </p>
    </div>
    <div class="gsc-completion-selected">This text should have a grey background.</div>
  <!--Summary computation status for CriticalCssBeacon
Resource 0 http://www.google.com/cse/style/look/default.css: Cannot create resource: either its domain is unauthorized and InlineUnauthorizedResources is not enabled, or it cannot be fetched (check the server logs)
Resource 1 http://localhost:8050/mod_pagespeed_test/unauthorized/with_unauthorized_imports.css: Computed OK
--><script pagespeed_no_defer="">(function(){var pagespeedutils = {MAX_POST_SIZE:131072, sendBeacon:function(a, b, c) {
  var d;
  if (window.XMLHttpRequest) {
    d = new XMLHttpRequest;
  } else {
    if (window.ActiveXObject) {
      try {
        d = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          d = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (f) {
        }
      }
    }
  }
  if (!d) {
    return!1;
  }
  var g = -1 == a.indexOf("?") ? "?" : "&";
  a = a + g + "url=" + encodeURIComponent(b);
  d.open("POST", a);
  d.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  d.send(c);
  return!0;
}, addHandler:function(a, b, c) {
  if (a.addEventListener) {
    a.addEventListener(b, c, !1);
  } else {
    if (a.attachEvent) {
      a.attachEvent("on" + b, c);
    } else {
      var d = a["on" + b];
      a["on" + b] = function() {
        c.call(this);
        d && d.call(this);
      };
    }
  }
}, getPosition:function(a) {
  for (var b = a.offsetTop, c = a.offsetLeft;a.offsetParent;) {
    a = a.offsetParent, b += a.offsetTop, c += a.offsetLeft;
  }
  return{top:b, left:c};
}, getWindowSize:function() {
  return{height:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, width:window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth};
}, inViewport:function(a, b) {
  var c = pagespeedutils.getPosition(a);
  return pagespeedutils.positionInViewport(c, b);
}, positionInViewport:function(a, b) {
  return a.top < b.height && a.left < b.width;
}, getRequestAnimationFrame:function() {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || null;
}};
window.pagespeed = window.pagespeed || {};
var pagespeed = window.pagespeed;
pagespeed.CriticalCssBeacon = function(a, b, c, d, e) {
  this.MAXITERS_ = 250;
  this.beaconUrl_ = a;
  this.htmlUrl_ = b;
  this.optionsHash_ = c;
  this.nonce_ = d;
  this.selectors_ = e;
  this.criticalSelectors_ = [];
  this.idx_ = 0;
};
pagespeed.CriticalCssBeacon.prototype.sendBeacon_ = function() {
  for (var a = "oh=" + this.optionsHash_ + "&n=" + this.nonce_, a = a + "&cs=", b = 0;b < this.criticalSelectors_.length;++b) {
    var c = 0 < b ? "," : "", c = c + encodeURIComponent(this.criticalSelectors_[b]);
    if (a.length + c.length > pagespeedutils.MAX_POST_SIZE) {
      break;
    }
    a += c;
  }
  pagespeed.criticalCssBeaconData = a;
  pagespeedutils.sendBeacon(this.beaconUrl_, this.htmlUrl_, a);
};
pagespeed.CriticalCssBeacon.prototype.checkCssSelectors_ = function(a) {
  for (var b = 0;b < this.MAXITERS_ && this.idx_ < this.selectors_.length;++b, ++this.idx_) {
    try {
      null != document.querySelector(this.selectors_[this.idx_]) && this.criticalSelectors_.push(this.selectors_[this.idx_]);
    } catch (c) {
    }
  }
  this.idx_ < this.selectors_.length ? window.setTimeout(this.checkCssSelectors_.bind(this), 0, a) : a();
};
pagespeed.criticalCssBeaconInit = function(a, b, c, d, e) {
  if (document.querySelector && Function.prototype.bind) {
    var f = new pagespeed.CriticalCssBeacon(a, b, c, d, e);
    pagespeedutils.addHandler(window, "load", function() {
      window.setTimeout(function() {
        f.checkCssSelectors_(function() {
          f.sendBeacon_();
        });
      }, 0);
    });
  }
};
pagespeed.criticalCssBeaconInit = pagespeed.criticalCssBeaconInit;
})();
pagespeed.selectors=[".non_flattened_selector"];pagespeed.criticalCssBeaconInit('/ngx_pagespeed_beacon','http://localhost:8050/mod_pagespeed_test/unauthorized/prioritize_critical_css.html','fCrreLxwwp','0DZGRl2lh3A',pagespeed.selectors);</script></body>
</html>
<!--
mod_pagespeed on
Filters:
db  Debug
hw  Flushes html
pr  Prioritize Critical Css

Options:
AvoidRenamingIntrospectiveJavascript (aris) False
CriticalImagesBeaconEnabled (cibe) False
EnableRewriting (e) 1
FetcherTimeOutMs (bfto) 30000
FileCacheInodeLimit (afcl) 500000
InlineResourcesWithoutExplicitAuthorization (irwea) 
InPlaceResourceOptimization (ipro) True
RewriteLevel (l) Pass Through
Statistics (ase) True
StatisticsLogging (asle) True

#NumFlushes            0
#EndDocument after     436us
#Total Parse duration  184us
#Total Render duration 1720us
#Total Idle duration   252us
The following filters were disabled for this request:
    CriticalSelectorFilter: No critical selector info in cache
    SupportNoscript
-->

oschaaf commented 9 years ago

@jeffkaufman Thinking about it, this might be a side-effect of https://github.com/pagespeed/ngx_pagespeed/issues/915 It might make sense to postpone looking into this until https://github.com/pagespeed/ngx_pagespeed/issues/915 has been resolved, and first see if this is till reproducible after that

edit: mention https://github.com/pagespeed/ngx_pagespeed/issues/915 instead of https://github.com/pagespeed/ngx_pagespeed/issues/912

jeffkaufman commented 9 years ago

912 is this one; do you mean another one?

oschaaf commented 9 years ago

Sorry, I meant https://github.com/pagespeed/ngx_pagespeed/issues/915 !

apache / incubator-pagespeed-ngx

investigate system test failure: "prioritize critical css" #912

912 is this one; do you mean another one?