From 9fb0c5f3d3df1b207c444114a3ea0a6dc909cde4 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Tue, 9 Sep 2014 17:18:15 +0200
Subject: [PATCH] use computed style when calculating bg birghtness
---
js/reveal.js | 7 ++++---
test/examples/slide-backgrounds.html | 21 +++++++++++++++++----
2 files changed, 21 insertions(+), 7 deletions(-)
diff --git a/js/reveal.js b/js/reveal.js
index df4e8a0a..24093e4d 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -714,15 +714,16 @@
if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
+ container.appendChild( element );
+
// If this slide has a background color, add a class that
// signals if it is light
- if( element.style.backgroundColor && colorBrightness( element.style.backgroundColor ) > 128 ) {
+ var computedBackgroundColor = window.getComputedStyle( element ).backgroundColor;
+ if( computedBackgroundColor && colorBrightness( computedBackgroundColor ) > 128 ) {
slide.classList.add( 'is-background-light' );
element.classList.add( 'is-background-light' );
}
- container.appendChild( element );
-
return element;
}
diff --git a/test/examples/slide-backgrounds.html b/test/examples/slide-backgrounds.html
index ba020cb0..60223c7f 100644
--- a/test/examples/slide-backgrounds.html
+++ b/test/examples/slide-backgrounds.html
@@ -10,6 +10,15 @@
<link rel="stylesheet" href="../../css/reveal.css">
<link rel="stylesheet" href="../../css/theme/serif.css" id="theme">
+ <style type="text/css" media="screen">
+ .slides section,
+ .slides section h2 {
+ color: #fff;
+ }
+ .slides .is-background-light h2 {
+ color: #222;
+ }
+ </style>
</head>
<body>
@@ -26,6 +35,10 @@
<h2>data-background: #bb00bb</h2>
</section>
+ <section data-background-color="lightblue">
+ <h2>data-background: ----</h2>
+ </section>
+
<section>
<section data-background="#ff0000">
<h2>data-background: #ff0000</h2>
@@ -50,20 +63,20 @@
</section>
</section>
- <section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)">
+ <section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(0,0,0,0.9)">
<h2>Background image</h2>
</section>
<section>
- <section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)">
+ <section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(0,0,0,0.9)">
<h2>Background image</h2>
</section>
- <section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)">
+ <section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(0,0,0,0.9)">
<h2>Background image</h2>
</section>
</section>
- <section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111" style="background: rgba(255,255,255,0.9)">
+ <section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111" style="background: rgba(0,0,0,0.9)">
<h2>Background image</h2>
<pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre>
</section>
--
GitLab